CodeMirror 是一个强大的基于浏览器的文本编辑器组件，主要用于网页中创建可编辑的源代码区域，特别适用于编写和展示程序代码。它支持多种编程语言的语法高亮、代码折叠、自动补全、查找替换等多种高级编辑特性。

npm install vue-codemirror --save
或者
npm install codemirror --save

封装组件

<template><div class="common-editor"><textarea ref="textarea" v-model="value"></textarea></div>
</template><script>
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/dracula.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/lint/lint.css'
import "codemirror/addon/lint/lint.js";
import "codemirror/addon/display/autorefresh";
import 'codemirror/mode/python/python'
import 'codemirror/mode/clike/clike'
import 'codemirror/addon/search/match-highlighter'
const CodeMirror = require('codemirror/lib/codemirror')export default {name: 'CommonEditor',props: {value: {type: String,default: ''},language: {type: String,default: null}},data() {return {CommonEditor: false,code: '',coder: null,flag: false,mode: 'java',theme: 'default',modes: [{ value: 'x-java', label: 'Java' },{ value: 'x-python', label: 'Python' }]}},watch: {language: {handler(language) {this.getCoder().then(() => {// 尝试从父容器获取语法类型if (language) {// 获取具体的语法类型对象const modeObj = this.getLanguage(language)// 判断父容器传入的语法是否被支持if (modeObj) {this.mode = modeObj.labelthis.coder.setOption('mode', `text/${modeObj.value}`)}}})},immediate: true},value: {handler(val) {if (this.$isNotEmpty(val)) {this.flag = true//   // this.setCodeContent(val)//   // this.initialize()}},deep: true,immediate: true}},computed: {coderOptions() {return {line: true,mode: 'application/json', // json数据高亮theme: 'dracula', //设置主题 记得引入对应主题才有显示 dracula default  import 'codemirror/theme/blackboard.css'tabSize: 1,lint: true,readOnly: true, // 设置只读不可编辑lineNumbers: true, // 显示行号cursorHeight: 0.8, //光标高度，默认是1autoCloseBrackets: true,gutters: ["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"],keyMap: 'default', // sublime编辑器效果foldGutter: true, // 启用行槽中的代码折叠autoCloseBrackets: true, // 自动闭合符号autoCloseTags: true,matchTags: { bothTags: true },matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时，自动突出显示匹配的括号 }、]styleActiveLine: true, // 高亮选中行matchBrackets: true, // 括号匹配lineWrapping: 'wrap', // 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动showCursorWhenSelecting: true, // 文本选中时显示光标smartIndent: false, // 智能缩进completeSingle: false, // 当匹配只有一项的时候是否自动补全highlightSelectionMatches: {minChars: 2,trim: true,style: "matchhighlight",showToken: false},}}},mounted() {// 初始化this.initialize()},methods: {// 初始化initialize() {// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置this.coder = CodeMirror.fromTextArea(this.$refs.textarea,this.coderOptions)this.coder.on('inputRead', () => {this.coder.showHint()})// 编辑器赋值if (this.value || this.code) {this.setCodeContent(this.value || this.code)} else {this.coder.setValue('')}// 支持双向绑定this.coder.on('change', (coder) => {this.code = coder.getValue()if (this.$emit) {this.$emit('input', this.code)}})},setCodeContent(val) {setTimeout(() => {if (!val) {this.coder.setValue('')} else {this.coder.setValue(val)}}, 300)},getCoder() {const that = thisreturn new Promise((resolve) => {; (function get() {if (that.coder) {resolve(that.coder)} else {setTimeout(get, 10)}})()})},getLanguage(language) {// 在支持的语法类型列表中寻找传入的语法类型return this.modes.find((mode) => {// 所有的值都忽略大小写，方便比较const currentLanguage = language.toLowerCase()const currentLabel = mode.label.toLowerCase()const currentValue = mode.value.toLowerCase()// 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较return (currentLabel === currentLanguage || currentValue === currentLanguage)})},changeMode(val) {// 修改编辑器的语法配置this.coder.setOption('mode', `text/${val}`)// 获取修改后的语法const label = this.getLanguage(val).label.toLowerCase()// 允许父容器通过以下函数监听当前的语法值this.$emit('language-change', label)}}
}
</script>
<style lang="scss" scoped>
.common-editor {width: 100%;height: 100%;.CodeMirror {// color: #ccc;direction: ltr;line-height: 20px;width: 100%;height: 100%;// background-color: #000;}.CodeMirror-hints {z-index: 9999 !important;}.custom-class .CodeMirror {width: 100%;}
}
.CodeMirror-hints {z-index: 1000;
}
</style>

组件引入

<CommonEditor :value="value" language="java"></CommonEditor>在

实现效果