vue-codemirror—基于vue的代码在线编辑器

CodeMirror（下面简称为cm）是一款基于JavaScript、面向语言的前端代码编辑器。它支持开箱即用，自带了超过100种语言的库，同时还有很多附加功能，目前得到了jetbrains等公司的支持。在这个分类下，能够与cm并驾齐驱的另一个编辑器则是ACE。CodeMirror官网：https://codemirror.net/

1. CodeMirror引入

在cm官网使用手册中，介绍了在项目中引入cm的方式。如果是传统项目，使用cdn或者将cm包放置在项目中即可引入；如果使用了npm等包管理工具，安装cm依赖然后就可以使用了。

有人针对vue框架，封装了cm，提供了一个面向vue的cm组件：vue-codemirror，使用起来比较方便。

vue-codemirror的npm安装命令：npm install vue-codemirror --save

安装完成后，首先需要在全局或组件下引入vue-codemirror，这里演示的是在组件下引入。
js/css文件引入：

// 全局引入vue-codemirror
import {codemirror} from 'vue-codemirror';
// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/idea.css'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import 'codemirror/mode/sql/sql.js';

在组件中引入：

export default {
  components: {
    codemirror
  }
}

2. 使用Codemirror

在vue中引入cm后，接下来就可以使用了，下面是完整的例子：

<template>
  <div>
    <codemirror
      ref="cm"
      v-model="code"
      :options="cmOptions"
      @input="inputChange"
    ></codemirror>
  </div>
</template>

<script>
  // 全局引入vue-codemirror
  import {codemirror} from 'vue-codemirror';
  // 引入css文件
  import 'codemirror/lib/codemirror.css'
  // 引入主题 可以从 codemirror/theme/ 下引入多个
  import 'codemirror/theme/idea.css'
  // 引入语言模式 可以从 codemirror/mode/ 下引入多个
  import 'codemirror/mode/sql/sql.js';

  export default {
    name: 'Simple',
    components: {codemirror},
    data() {
      return {
        code: 'select a from table1 where b = 1',
        cmOptions: {
          // 语言及语法模式
          mode: 'text/x-sql',
          // 主题
          theme: 'idea',
          // 显示函数
          line: true,
          lineNumbers: true,
          // 软换行
          lineWrapping: true,
          // tab宽度
          tabSize: 4,
        }
      }
    },
    methods: {
      inputChange(content) {
        this.$nextTick(() => {
          console.log("code:" + this.code);
          console.log("content:" + content)
        });
      },
    },
  }
</script>