CodeMirror 是一个功能强大的代码编辑器内核（基于浏览器），常用于在线代码编辑、配置编辑器、富文本差异显示等场景。它支持丰富的语言高亮、主题、快捷键、扩展（addon）等。下面我将演示在 Vue 项目中如何集成 CodeMirror，包括把 CodeMirror 封装为一个组件，支持 v-model（双向绑定）、外部配置传入和事件回调，方便复用。

1，安装依赖

npm install codemirror@5

2，封装一个自定义组件

<template>
    <div class="cm-wrapper">
        <!-- 使用 textarea 以便后续销毁时能调用 toTextArea() 安全销毁 -->
        <textarea ref="textarea"></textarea>
    </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'  // 基础样式
import 'codemirror/theme/dracula.css' // 可选主题

import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'     // html 使用 xml 或 htmlmixed
import 'codemirror/mode/css/css.js'
import 'codemirror/addon/edit/closebrackets.js'   // 自动闭合括号
import 'codemirror/addon/comment/comment.js'      // 注释快捷键
import 'codemirror/addon/fold/foldcode.js'        // 折叠
import 'codemirror/addon/selection/active-line.js'// 当前行高亮

export default {
    name: 'CodeMirrorEditor',
    props: {
        value: { type: String, default: '' },  // 绑定的文本内容
        options: { type: Object, default: () => ({}) } //CodeMirror初始化配置（lineNumbers, mode等）
    },
    mounted() {
        // // 合并默认配置
        const defaultOptions = {
            value: this.value || '',
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            autoCloseBrackets: true
        }
        // 用 fromTextArea 创建编辑器，便于销毁
        this.editor = CodeMirror.fromTextArea(this.$refs.textarea,
            Object.assign({}, defaultOptions, this.options))
        // 初始化后主动设置一次内容
        if (this.value) {
            this.editor.setValue(this.value)
        }
        //  编辑器内容变化时向外发出input事件
        this.editor.on('change', () => {
            const val = this.editor.getValue()
            this.$emit('input', val)
        })
    },
    watch: {
        // 如果外部 modelValue 变更（非来自编辑器），同步到编辑器
        value(newVal) {
            if (!this.editor) return
            if (this.editor.getValue() !== newVal) {
                this.editor.setValue(newVal || '')
            }
        }
    },
    // 组件卸载，销毁编辑器并恢复 textarea
    beforeDestroy() {
        if (this.editor && typeof this.editor.toTextArea === 'function') {
            this.editor.toTextArea()
            this.editor = null
        }
    }
}
</script>

<style scoped>
.cm-wrapper .CodeMirror {
    height: 400px;
}
</style>

3，使用样例

<template>
    <CodeMirrorEditor v-model="code" :options="{ mode: 'javascript', lineNumbers: true }" />
</template>
<script>
import CodeMirrorEditor from './codemirror/CodeMirrorEditor.vue'
export default {
    components: { CodeMirrorEditor },
    data() {
        return {
            code: `const users = [
    { id: 1, name: 'Alice',s: 30 }
]

// 箭头函数
const getUserNames = () => users.map(u => u.name)

// async / await 示例
async function loadUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        const user = users.find(u => u.id === id)
        user ? resolve(user) : reject(new Error('Not found'))
        }, 500)
    })
}`
        }
    }
}
</script>

（2）运行效果如下，可以看到代码已经具有语法高亮效果，并且我们可以自由编辑。

附：进阶技巧

1，只读模式

<CodeMirrorEditor v-model="code" :options="{ 
    mode: 'javascript', 
    lineNumbers: true,
    readOnly: true }" 
/>

（2）如果希望只读模式下光标也不显示，那么可以将 readOnly 属性设置为 'nocursor'

<CodeMirrorEditor v-model="code" :options="{
    mode: 'javascript',
    lineNumbers: true,
    readOnly: 'nocursor'}" 
/>

2，设置主题样式

node_modules/codemirror/theme/

（2）下面是官方内置主题完整列表：

深色主题

浅色主题

3024-night abbott abcdef ambiance ayu-dark base16-dark bespin blackboard cobalt colorforth darcula dracula duotone-dark elegant erlang-dark hopscotch icecoder isotope lesser-dark liquibyte lucario material material-darker material-ocean material-palenight monokai night nord oceanic-next panda-syntax paraiso-dark railscasts rubyblue seti shadowfox the-matrix tomorrow-night-bright tomorrow-night-eighties ttcn twilight vibrant-ink xq-dark yonce zenburn

3024-day base16-light default eclipse idea mdn-like neo paraiso-light ssms yeti xq-light

（3）下面样例我们改用 idea 浅色主题进行代码高亮显示，修改 CodeMirrorEditor.vue 组件。

<template>
    <div class="cm-wrapper">
        <!-- 使用 textarea 以便后续销毁时能调用 toTextArea() 安全销毁 -->
        <textarea ref="textarea"></textarea>
    </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'  // 基础样式
import 'codemirror/theme/idea.css' // 可选主题

import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'     // html 使用 xml 或 htmlmixed
import 'codemirror/mode/css/css.js'
import 'codemirror/addon/edit/closebrackets.js'   // 自动闭合括号
import 'codemirror/addon/comment/comment.js'      // 注释快捷键
import 'codemirror/addon/fold/foldcode.js'        // 折叠
import 'codemirror/addon/selection/active-line.js'// 当前行高亮

export default {
    name: 'CodeMirrorEditor',
    props: {
        value: { type: String, default: '' },  // 绑定的文本内容
        options: { type: Object, default: () => ({}) } //CodeMirror初始化配置（lineNumbers, mode等）
    },
    mounted() {
        // // 合并默认配置
        const defaultOptions = {
            value: this.value || '',
            lineNumbers: true,
            mode: 'javascript',
            theme: 'idea',
            autoCloseBrackets: true
        }
        // 用 fromTextArea 创建编辑器，便于销毁
        this.editor = CodeMirror.fromTextArea(this.$refs.textarea,
            Object.assign({}, defaultOptions, this.options))
        // 初始化后主动设置一次内容
        if (this.value) {
            this.editor.setValue(this.value)
        }
        //  编辑器内容变化时向外发出input事件
        this.editor.on('change', () => {
            const val = this.editor.getValue()
            this.$emit('input', val)
        })
    },
    watch: {
        // 如果外部 modelValue 变更（非来自编辑器），同步到编辑器
        value(newVal) {
            if (!this.editor) return
            if (this.editor.getValue() !== newVal) {
                this.editor.setValue(newVal || '')
            }
        }
    },
    // 组件卸载，销毁编辑器并恢复 textarea
    beforeDestroy() {
        if (this.editor && typeof this.editor.toTextArea === 'function') {
            this.editor.toTextArea()
            this.editor = null
        }
    }
}
</script>

<style scoped>
.cm-wrapper .CodeMirror {
    height: 400px;
}
</style>

（4）最后显示效果如下：

3，设置语言 mode

node_modules/codemirror/mode/

（2）下面表格整理了市面上常用语言以及对应的 mode： （3）假设我们需要实现 sql 语言高亮，首先在 CodeMirrorEditor.vue 组件中引入对应 mode 的 js。

import 'codemirror/mode/sql/sql.js'

（4）然后使用该组件时将 mode 设置为'sql'

<CodeMirrorEditor v-model="code" :options="{
    mode: 'sql',
    lineNumbers: true
}" />

（5）最后效果如下图所示：