在vue里使用codemirror遇到的问题

　　

<强>前提小结:
　　

　　

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

　　

1。新版的codemirror在自由目录下没有codemirror.js文件,旧版的有,所以网上的很多文章都是直接这样引:

　　 　　 　　& lt; scriptsrc=" https://www.yisu.com/zixun/lib/codemirror.js "祝辞& lt;/script> 　　& lt; linkrel="样式表" href=" https://www.yisu.com/lib/codemirror.css " rel=巴獠縩ofollow”比; 　　& lt; scriptsrc=" https://www.yisu.com/zixun/mode/javascript/javascript.js "祝辞& lt;/script> 　　 　　

然而新手在新版的codemirror怎么引都报的错,新版的codemirror把<代码> codemirror.js> codemirror。js代码文件如果你要移到自由目录下是要改变里面的路径的。
　　

　　

2。在vue里面使用codemirror,动态创建编辑器,在关闭的时候会产生一种鬼知道是什么的错误,就是比如我新建了a、b两个编辑器,一个在左,我在右,当我关闭时,想要显示b的文档内容,却显示的是b的,肯呢个这是动态数据改变产生的错误,可是当关闭,不关闭时,就能显示一个的文本内容。
　　

　　

在vue里使用codemirror遇到的问题

　　

3。路由跳转的时候,当打开的编辑器代码显示最顶层的内容的时候,切换到其他路由再切换回来还是能显示缓存的编辑器文本,当我把编辑器拉到最底层,显示最底层的文本内容,再切换到其他路由再切回来时,编辑器一片空白,鼠标点击编辑器或者鼠标滑轮滚动,文本内容出现,而且显示的内容是顶层的内容。

　　

在vue里使用codemirror遇到的问题

　　

基于以上几点,我选择用vue-codemirror组件来实现。
　　

　　


　　

　　

1。首先要先安装vue-codemirror
　　

　　

在npm的官网我找到了vue-codemirror

　　 　　 　　https://www.npmjs.com/package/vue-codemirror 　　npm安装vue-codemirror——保存 　　 　　

接着在main.js里使用

　　 　　 　　从“vue-codemirror”进口{codemirror} 　　
　　 　　 　　 　　导入“codemirror/lib/codemirror.css” 　　Vue.use (VueCodemirror) 　　 　　

再到组件中使用
　　

　　 　　 　　从“vue-codemirror”进口{codemirror} 　　要求(“codemirror/模式/python/python.js”) 　　要求(“codemirror/插件/折叠/foldcode.js”) 　　要求(“codemirror/插件/折叠/foldgutter.js”) 　　要求(“codemirror/插件/折叠/brace-fold.js”) 　　要求(“codemirror/插件/折叠/xml-fold.js”) 　　要求(“codemirror/插件/折叠/indent-fold.js”) 　　要求(“codemirror/插件/折叠/markdown-fold.js”) 　　要求(codemirror/插件/折叠/comment-fold.js) 　　 　　

　　

当然组件需要先声明

　　 　　 　　组件:{ 　　codemirror 　　} 　　 　　

html代码这样写:
　　

　　 　　 　　& lt; codemirror 　　ref=" myCm " 　　:value=" https://www.yisu.com/zixun/item.content " 　　:选项=" cmOptions” 　　@changes="变化" 　　类=按搿? 　　祝辞& lt;/codemirror> 　　 　　

选项是和codemirror一样的配置项

　　
　　

值:字符串| CodeMirror。医生
　　

　　 　　

编辑器的初始值(文本),可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。

　　

<强>模式:字符串|对象
　　

　　

通用的或者在CodeMirror中使用的与模式相关联的mime,当不设置这个值的时候,会默认使用第一个载入的模式定义文件。一般地,会使用关联的mime类型来设置这个值;除此之外,也可以使用一个带有名字属性的对象来作为值(如:<代码>{名称:“javascript代码
　　

　　

<代码>,json:真})。可以通过访问CodeMirror.modes和CodeMirror.mimeModes获取定义的模式和MIME。

　　

<强> lineSeparator:字符串|空
　　

　　

明确指定编辑器使用的行分割符(换行符)。默认(值为null)情况下,文档会被CRLF(以及单独的CR、LF)分割,单独的低频会在所有的输出中用作换行符(如:getValue)。当指定了换行字符串,行就只会被指定的串分割。

在vue里使用codemirror遇到的问题