脚本编辑CodeMirror的用法与配置

1、npm install vue-codemirror-lite, 安装vue-codemirrir-lite；
2、在需要用到的文件里面引入{codemirror}, codemirror/lib/codemirror.css, 语言：codemirror/mode/python/python.js,
主题样式：codemirror/theme/blackboard.css, codemirror/theme/elegant.css, 引入光标所在行是否高亮的包：codemirror/addon/selection/active-line.js；

import { codemirror } from 'vue-codemirror-lite'
  import 'codemirror/lib/codemirror.css'
  // language
  import 'codemirror/mode/python/python.js'
  // theme css
  import 'codemirror/theme/blackboard.css'
  import 'codemirror/theme/elegant.css'
  // require active-line.js
  import 'codemirror/addon/selection/active-line.js'

3、components里面注册codemirror；
4、脚本编辑区设置一个变量用来存放脚本，在data里面设置；

data () {
const code = ''
return {
code,
cmOption: {
tabSize: 2,
styleActiveLine: true,
lineNumbers: true,
line: true,
lineWrapping: true,
mode: 'text/x-python',
theme: '',
scrollbarStyle: null,
readOnly: 'nocursor'
}
}
}

5、用codemirror时需要设置两个参数，一个是我这里的code，绑定脚本编辑区输入的脚本内容，另一个是options,值为这里的cmOption；

6、options里面的参数解释：
tabSize：tab的空格宽度，
styleActiveLine：设置光标所在行高亮true/false，
lineNumbers：是否使用行号，
line：是否显示编辑区的线，
lineWrapping：在长行时文字是换行（wrap）还是滚动（scroll），默认为滚动，
mode：通用的或者在codemirror中使用的与mode相关联的mime，当不设置时，会默认使用第一个载入的mode定义文件，
theme：配置编辑器的主题样式，
scrollbarStyle：设置滚动条，默认为null，为不显示的滚动条，
readOnly：编辑器是否只读，如果设置为‘nocursor’，编辑区将不能编辑也就是不能获取焦点。
7、编辑时直接将获取到的脚本内容赋值：

$axios.get(`/scriptConsole/getScriptByUuid/${params}`).then((res) => {
            if (res.data) {
              this.scriptCardList = [res.data]
              this.scriptCardListSearch = [res.data]
              this.currentItem = res.data
              this.code = this.currentItem.content // 直接显示脚本内容
          })