vue3代码编辑器组件codemirror-editor-vue3

官方文档：https://github.com/RennCheung/codemirror-editor-vue3
国内镜像：https://renncheung.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started

1.安装

npm install codemirror-editor-vue3 codemirror@5.x -S

2.代码示例

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script>
  import { ref, onMounted, onUnmounted } from "vue"
  import "codemirror/mode/javascript/javascript.js"
  import Codemirror from "codemirror-editor-vue3"
  export default {
    components: { Codemirror },
    setup() {
      const code = ref(
        `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
      )

      const cmRef = ref()
      const cmOptions = {
        mode: "text/javascript"
      }
      const onChange = (val, cm) => {
        console.log(val)
        console.log(cm.getValue())
      }

      const onInput = (val) => {
        console.log(val)
      }

      const onReady = (cm) => {
        console.log(cm.focus())
      }

      onMounted(() => {
        setTimeout(() => {
          cmRef.value?.refresh()
        }, 1000)

        setTimeout(() => {
          cmRef.value?.resize(300, 200)
        }, 2000)

        setTimeout(() => {
          cmRef.value?.cminstance.isClean()
        }, 3000)
      })

      onUnmounted(() => {
        cmRef.value?.destroy()
      })

      return {
        code,
        cmRef,
        cmOptions,
        onChange,
        onInput,
        onReady
      }
    }
  }
</script>

3.支持多种语言

参考文档：https://codemirror.net/5/mode/index.html

1. 点击参考文档，选择语言并点击在文章最后找到mode的格式
2. 在配置项中修改mode，并引入对应语言js
   如使用python
   在参考文档中找到 MIME types defined: text/x-python and text/x-cython.
   引入并使用python语言，一定要引入对应js才能使用

import "codemirror/mode/python/python.js"
const cmOptions = {
  mode: "text/x-python", // Use the Python mode
}