Vue2中使用codemirror element输入框代码高亮

最近需要在一个Vue2（element）网站加一个sql语句输入框供用户输入，尝试使用highlight.js和prisjm.js可以对嵌入代码进行高亮，但无法实现对用户在线输入的代码内容高亮的需求，于是使用了codemirror实现

1.npm下载vue-codemirror

重中之重，下载时注意指定版本，且这里下载vue-codemirror，不是codemirror，两者现有版本不同，可在npm社区查看具体版本，这里我下载的是vue-codemirror4.0.6支持Vue2，默认下载是最新版本只支持Vue3。

cnpm install [email protected]

2.在main.js中配置codemirror插件

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

3.在需要使用的vue文件中引入codemirror插件（可根据需求自行选择和配置）

import 'codemirror/mode/sql/sql.js'
// 主题css
import 'codemirror/theme/solarized.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// closebrackets
import 'codemirror/addon/edit/closebrackets.js'

4.cmOptions配置

export default {  
  data() {
    return {
      sql: "",
      cmOptions: {
        tabSize: 4, // tabsize默认为4
        styleActiveLine: true,
        lineNumbers: true, // 代码行数字
        line: true,
        mode: 'text/x-mysql', // 选择代码语言，我这里选的sql
        extraKeys: {"Ctrl": "autocomplete"},   //自动提示配置 
        lineWrapping: true,    // 自动换行
        theme: 'solarized light' // 主题根据需要自行配置
      }
    }
}

5.完整代码

显示效果：

使用不同语言时需要在vue文件中引入相应语言组件并修改cmOptions里的mode为目标语言。

存在问题： 

      在我这个网站的页面上用户一开始在输入框输入内容时，需要鼠标一直点着才能focus并输入内容，之后可正常输入，由于focus是是鼠标聚焦自动触发的因此暂时还未找到解决方法，不知道大家有没有遇到这个问题，有什么好的建议欢迎讨论～

参考

codemirror指南

vue-codemirror