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

我的项目是 vue2 版本的,vue-codemirror不能安装最新版本的,我的项目中使用的是4.0.5版本的. 首先需要引入插件：

import { codemirror } from 'vue-codemirror'

components: {
  codemirror
},

然后使用代码:

<codemirror v-model="code"  :style="codemirrorStyle" :options="cmOptions"></codemirror>

下面这些文件可以按需引入:

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'

我项目中只是简单引用了几个:

import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/selection/active-line'
import 'codemirror/lib/codemirror.js'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/shell/shell.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'
      }

然后需要在样式中修改一下codemirror的部分样式,这个因项目而异:

.Codemirror-activeline {
   line-height:30px;
}
.Codemirror{
   height:80vh;
   max-height:88vh;
 }
 .Codemirror-sizer {
   line-height:20px;
  }
  /deep/ .Codemirror-scroll {
  min-height:40vh;
  cursor:text;
  max-height:86vh;
  }
  
  /deep/ .Codemirror{
  height:auto;
  width:100%;
  border:1px solid  #e9eaec;
  }
  
  /deep/ .Codemirror-code {
  color:#67696a;
  }

看下效果:

参考文章:juejin.cn/post/739317…