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

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后，接下来就可以使用了，下面是完整的例子：