简介

Codemirror 的 vue3 组件。 基于 Codemirror 5开发，仅支持 vue3.

除了 Codemirror 官方支持的模式外，还增加了开箱即用的日志输出模式，但不一定适用于所有场景。

安装

npm

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn

yarn add codemirror-editor-vue3 codemirror@">=5.64.0 <6"

pnpm

pnpm i codemirror-editor-vue3 codemirror@^5 -S

使用 Typescript

如果你的项目需要支持 Typescript，那还需要安装对应的类型包.

npm

npm install @types/codemirror -D

yarn

yarn add @types/codemirror

pnpm

pnpm i @types/codemirror -D

注册全局组件

WARNING

提示不建议全局注册组件，这会导致无法正确获取模板上的类型提示。

main.js

import { createApp } from "vue"
import App from "./App.vue"
import { InstallCodemirro } from "codemirror-editor-vue3"

const app = createApp(App)
app.use(InstallCodemirro) 
app.mount("#app")

全局注册组件名称是Codemirror，也可以自定义一个组件名称，例如：

main.js

// ....
app.use(InstallCodemirro, { componentName: "customName" }) 

---

在组件中使用

这是一个常用的 javascript 语言的案例。

具体代码如下：

index.vue

<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>

index.vue(ts setup)

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from "vue"
  import "codemirror/mode/javascript/javascript.js"
  import Codemirror from "codemirror-editor-vue3"
  import type { CmComponentRef } from "codemirror-editor-vue3"
  import type { Editor, EditorConfiguration } from "codemirror"

  const code = ref(
    `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
  )
  const cmRef = ref<CmComponentRef>()
  const cmOptions: EditorConfiguration = {
    mode: "text/javascript"
  }

  const onChange = (val: string, cm: Editor) => {
    console.log(val)
    console.log(cm.getValue())
  }

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

  const onReady = (cm: Editor) => {
    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()
  })
</script>