第一次用codemirror，而且是在vue里面使用，看了官方文档，一大串都是英文，翻译后大概了解了这个插件，然后在项目中使用时出现过好几个问题：
1.新版的codemirror在lib目录下没有codemirror.js文件，旧版的有，所以网上的很多文章都是直接这样引：
<scriptsrc="lib/codemirror.js"></script> <linkrel="stylesheet"href="../lib/codemirror.css" > <scriptsrc="mode/javascript/javascript.js"></script>
然而新手在新版的codemirror怎么引都报错，新版的codemirror把codemirror.js放到了src目录下，当然src目录下的codemirror.js文件如果你要移到lib目录下是要改变里面的路径的。
2.在vue里面使用codemirror，动态创建编辑器，在关闭的时候会产生一种鬼知道是什么的错误，就是比如我新建了a，b两个编辑器，a在左，b在右，当我关闭a时，想要显示b的文档内容，却显示的是b的，肯呢个这是动态数据改变产生的错误，可是当关闭b，不关闭a时，就能显示a的文本内容。
3.路由跳转的时候，当打开的编辑器代码显示最顶层的内容的时候，切换到其他路由再切换回来还是能显示缓存的编辑器文本，当我把编辑器拉到最底层，显示最底层的文本内容，再切换到其他路由再切回来时，编辑器一片空白，鼠标点击编辑器或者鼠标滑轮滚动，文本内容出现，而且显示的内容是顶层的内容。
基于以上几点，我选择用vue-codemirror组件来实现。
实现
1.首先要先安装vue-codemirror
在npm的官网我找到了vue-codemirror
https://www.npmjs.com/package/vue-codemirror npm install vue-codemirror --save
接着在main.js里使用
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror)
再到组件中使用
import { codemirror } from 'vue-codemirror' require("codemirror/mode/python/python.js") require('codemirror/addon/fold/foldcode.js') require('codemirror/addon/fold/foldgutter.js') require('codemirror/addon/fold/brace-fold.js') require('codemirror/addon/fold/xml-fold.js') require('codemirror/addon/fold/indent-fold.js') require('codemirror/addon/fold/markdown-fold.js') require('codemirror/addon/fold/comment-fold.js')
当然组件需要先声明
components:{ codemirror }
html代码这样写：
<codemirror ref="myCm" :value="item.content" :options="cmOptions" @changes="changes" ></codemirror>
options是和codemirror一样的配置项
value: string | CodeMirror.Doc
编辑器的初始值（文本），可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。
mode: string | object
通用的或者在CodeMirror中使用的与mode相关联的mime，当不设置这个值的时候，会默认使用第一个载入的mode定义文件。一般地，会使用关联的mime类型来设置这个值；除此之外，也可以使用一个带有name属性的对象来作为值（如：{name: “javascript”,
json: true}）。可以通过访问CodeMirror.modes和CodeMirror.mimeModes获取定义的mode和MIME。
lineSeparator: string|null
明确指定编辑器使用的行分割符（换行符）。默认（值为null）情况下，文档会被 CRLF(以及单独的CR, LF)分割，单独的LF会在所有的输出中用作换行符（如：getValue）。当指定了换行字符串，行就只会被指定的串分割。
theme: string
配置编辑器的主题样式。要使用主题，必须保证名称为 .cm-s-[name] (name是设置的theme的值)的样式是加载上了的。当然，你也可以一次加载多个主题样式，使用方法和html和使用类一样，如： theme: foo bar，那么此时需要cm-s-foo cm-s-bar这两个样式都已经被加载上了。
indentUnit: integer
缩进单位，值为空格数，默认为2 。
smartIndent: boolean
自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
tabSize: integer
tab字符的宽度，默认为4 。
indentWithTabs: boolean
在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false 。
electricChars: boolean
在输入可能改变当前的缩进时，是否重新缩进，默认为true （仅在mode支持缩进时有效）。
specialChars: RegExp
需要被占位符(placeholder)替换的特殊字符的正则表达式。最常用的是非打印字符。默认为：/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。
specialCharPlaceholder: function(char) → Element