今天给大家分享一个 vue3.js 代码编辑预览组件CodemirrorEditor-Vue3。

codemirror-editor-vue3 基于vue3.x 构建开箱即用的代码编辑器组件。适用于嵌入后台管理系统。

安装

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

引入组件

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

快速使用

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

codemirror-editor-vue3 提供了非常丰富的参数配置，感兴趣的可以去看看。

// 文档地址
https://renncheung.github.io/codemirror-editor-vue3
// 仓库地址
https://github.com/RennCheung/codemirror-editor-vue3

OK，今天的分享就到这里了。