vue 使用代码编辑器插件 vue-codemirror
之前用过一次，当时用的一知半解的，所以也没有成文，前几天又因为项目有需求，所以说有用了一次，当然，依旧是一知半解，但是还是稍微写一下子吧！万一以后用到，不用满网找资料了，个人学习记录，仅供参考，切勿尽信！
vue-codemirror 说明
首先我的项目是 vue2 版本的，vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之，新版本是与之前的版本完全不兼容。如果您希望继续使用Vue2或更低版本的CodeMirror。
任意门
vue-codemirror Github 地址： https://github.com/surmon-china/vue-codemirror
codemirror 中文文档：https://olindk.gitbooks.io/codemirror/content/configuration.html
codemirror 英文文档：https://codemirror.net/doc/manual.html#config
vue-codemirror 安装
因为最新版本已经不支持 vue2 了，所以我不能安装最细版本的，只能指定支持 vue2 版本的插件，因此，安装下面两个插件，必须两个都安装哈，不能只安装一个嗷！
npm i vue-codemirror@4.x --save
npm i codemirror@5.x --save
vue-codemirror 使用
具体根据上面提供的官方文档去看哈，我这就不展开说了，我就简单贴一下我的代码哈；
首先在需要代码编辑器的组件里面引入插件：
import { codemirror } from 'vue-codemirror'
components: {
codemirror
},
然后在 HTML 部分使用一下：
<codemirror v-model="code" @ready="onCmReady" :style="codemirrorStyle" :options="cmOptions"></codemirror>
其中 v-model 就是你要绑定编辑的代码；@ready 绑定了一个函数，目的是在完成之后添加一个事件，用来代码提示用；style 绑定的是这个编辑器的样式，比如字体样式、字体大小之类的；options 很重要，是对编辑器的配置信息；
再一个就是引入一下必要的文件，我用到了这一些，一些样式，代码校验啥的：
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/base16-dark.css'
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/indent-fold'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/search/match-highlighter'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'
然后再 data 里面创建一下必要参数：
code: '',
cmOptions: {
mode: 'text/javascript',
gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
lineNumbers: true,
line: true,
lint: true,
lineWrapping: true,
autofocus: true,
autoCloseBrackets: true,
foldGutter: true, // 块槽
hintOptions: { completeSingle: true },
matchTags: { bothTags: true },
matchBrackets: true,
showCursorWhenSelecting: true,
styleSelectedText: true,
styleActiveLine: true,
autoRefresh: true,
highlightSelectionMatches: {
minChars: 2,
trim: true,
style: "matchhighlight",
showToken: false
},
},
codemirrorStyle: {
fontSize: '18px',
lineHeight: '150%',
height: '450px',
border: '1px solid #EBEEF5'
}
其中在 option 绑定数据里面的 mode: 'text/javascript', 表示当前编辑器，解析的是 JavaScript 代码，这个很重要。
然后就是代码校验需要使用几个包，可能需要单独安装一下：
# 校验json相关
npm install jsonlint file system
# 校验js相关
npm install jshint
安装完成之后呢，把他们引入并且挂载 window 上面就行，他会自己找到使用：
import jsonlint from 'jsonlint'
import { JSHINT } from 'jshint'
window.JSHINT = JSHINT
window.jsonlint = jsonlint
最后就是代码提示，比如 js 的代码提示是吧！
onCmReady(cm) {
cm.on("inputRead", (cm, obj) => {
if (obj.text && obj.text.length > 0) {
let c = obj.text[0].charAt(obj.text[0].length - 1)
if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
cm.showHint({ completeSingle:false }) // 自动填充关闭了它
}
}
})
},
但是代码提示框的层级可能会比较低，被其他元素盖住，可以提升一下层级：
<style>
.CodeMirror-hints {
z-index: 30000!important; // 其实也不用这么大啦！
}
</style>
然后就完事了！看一下效果：
其他
这玩意儿啊，除了可以编辑 JavaScript 代码，像是JSON、HTML、CSS都是可以的！
编写JSON
编写JSON的话，需要改一下模式：
mode: 'application/json'
看一下效果哈：
编写 HTML
编写 HTML 的话，需要改一下模式：
mode: 'text/html'
看一下效果哈：
编写 CSS
编写 CSS 的话，需要改一下模式：
mode: 'text/css'
看一下效果哈：
行，大体就这些东西！
