vue3代码编辑器 codemirror-editor-vue3

官方文档：https://github.com/RennCheung/codemirror-editor-vue3

安装：

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

main.ts注册组件

import { createApp } from 'vue'
import App from './App.vue'
import { InstallCodeMirror } from "codemirror-editor-vue3" 
const app = createApp(App)
app.use(InstallCodeMirror) 

演示图片：

演示：

<template>
    <Codemirror v-model:value="code" :options="cmOptions" border ref="cmRef" height="600" width="800" @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"
import "codemirror/theme/dracula.css";
const code = ref<any>(
    `
console.log('代码编辑器');
     console.log(1);
`
)
const cmRef = ref<CmComponentRef>()
const cmOptions: EditorConfiguration = {
    mode: "text/javascript",
    theme: 'dracula',   // 设置你喜欢的主题  暗黑色
}

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>