大概三四个月之前我开始有了制作在线编译器的想法，在此之前我接触过很多的在线编译器，如CodePen、JsBin、JsFiddle等，这些都非常优秀且有着庞大的用户群体的编译器。顶多 我一直对在线编译器的实现抱有浓厚兴趣，这些在线编译器支持很多种语言，代码变色，诸多的快捷键以及一些个性化设置，这使得在线编译器看上去和我们在本地下载的编译器软件也不会有太大的区别，我完全不知道这些复杂的功能要怎么实现，于是我观察 CodePen 和 JsBin 代码发现他俩都使用了一个叫 codemirror 的工具。
codemirrorcodemirror 是一个用于浏览器的 JavaScript 实现的多功能文本编辑器。它专门用于编辑代码，并带有许多语言模式和插件 ，可实现更高级的编辑功能。
原来这些编译器是依靠 codemirror 来实现的，codemirror 是一个非常复杂的工具，水水水水水水水水水水 以至于我花了两天时间才熟悉它的配置项。codemirror 本身是采用直接操作 DOM 的方式，而我的项目是使用 Vue + Webpack 构建的，这违反了 Vue 数据驱动 的宗旨，于是我在 npm 上发现了 vue-codemirror 这个工具，采用 Vue 的方式构建代码编辑器 codemirror 有许多配置项，我在自己的项目中用到了如下配置，如果你想看全部配置
| 