用vue在前端写一个代码编辑器

想要让使用者在页面上可以编辑代码，代码若是写在textarea就太low了，想要实现跟cmd一样的命令行效果，codemirror支持你！

codemirror

安装：

npm install vue-codemirror --save

html

<codemirror v-model="content" :options="options"></codemirror>

js

import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主题,配置后生效
import 'codemirror/theme/rubyblue.css'
//引入语言,配置后生效
import 'codemirror/mode/sql/sql.js'

export default {
    components: {
      codemirror
    },
    data() {
      return {
        //需编辑和显示的内容
        content: '',
        // 默认配置
        options: {
          tabSize: 2, // 缩进格式
          theme: 'rubyblue', // 指定主题，对应主题库 JS 需要提前引入
          lineNumbers: true, // 是否显示行号
          //指定语言类型,如果需要编辑和显示其他语言,需要import语言js然后修改此配置
          mode: 'sql',
          line: true,
          styleActiveLine: true, // 高亮选中行
          //是否为只读,如果为"nocursor" 不仅仅为只读 连光标都无法在区域聚焦
          readOnly: true,
          hintOptions: {
            completeSingle: true // 当匹配只有一项的时候是否自动补全
          }
        },
      }
    }
}

支持的语言

  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/clike/clike.js'
  import 'codemirror/mode/markdown/markdown.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/r/r.js'
  import 'codemirror/mode/shell/shell.js'
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/swift/swift.js'
  import 'codemirror/mode/vue/vue.js'