官方文檔：https://github.com/RennCheung/codemirror-editor-vue3
國內(nèi)鏡像：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文章來源地址http://www.zghlxwxcb.cn/news/detail-621747.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
}

到了這里，關于vue3代碼編輯器組件codemirror-editor-vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！