在vue里使用codemirror遇到的问题

 <scriptsrc="/UploadFiles/2021-04-02/codemirror.js">

然而新手在新版的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"
     class="code"
    ></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


这是一个接收由specialChars选项指定的字符作为参数的函数，此函数会产生一个用来显示指定字符的DOM节点。默认情况下，显示一个红点（"htmlcode">

computed: {
  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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！