vue2 使用代码编辑器插件 vue-codemirror

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

看一下效果哈：

行，大体就这些东西！