富文本编辑器

 1.npm下载vue-codemirror

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

npm install vue-codemirror@4.0.6

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.完整代码

<template>
    <codemirror
    ref="newCm"  
    v-model="sql" 
    :options="cmOptions"
    @ready="onCmReady">
    </codemirror>
</template>
 
<script>
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'
 
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' // 主题根据需要自行配置
      }
    }
  },
  methods: {
    onCmReady(cm) {
        // 设置代码编辑框宽和高
        this.$refs.newCm.codemirror.setSize("-webkit-fill-available", "auto")
    }
  }
}
</script>