前提小结：

第一次用codemirror，而且是在vue里面使用，看了官方文档，一大串都是英文，翻译后大概了解了这个插件，然后在项目中使用时出现过好几个问题：

1.新版的codemirror在lib目录下没有codemirror.js文件，旧版的有，所以网上的很多文章都是直接这样引：

<scriptsrc="lib/codemirror.js"></script> <linkrel="stylesheet"href="../lib/codemirror.css" rel="external nofollow" ><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://puted: { codemirror() { return this.$refs.myCm.codemirror } },

codemirror的方法在官网有很详细的解释，我在这里就列几个常用的
(

（1)getValue():获取编辑器文本

(2)setValue(textString):设置编辑器文本

(3)undo():撤销一个编辑器

(4)redo():重做一个编辑器

(5)setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});设置一个新的编辑器

(6)getLine(Integer):获取第n行的文本内容

(7)replaceRange(str1,{line,ch},{line,ch},str2):替换str1中一部分代码为str2

(8)lineCount():获取编辑器总行数

(9)replaceSelection(str1,str2):替换所选内容

到此，用法已经说完，开头我提到的三个问题第一第二个已经解决，第三个解决不了，应该是codemirror内部有自动刷新的程序，解决页面切换编辑器空白的方法可以在options加一个配置viewportMargin：Infinity不过这样会影响性能。

总结

以上所述是小编给大家介绍的在vue里使用codemirror，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！