当前位置:首页 >> 网络编程

在vue里使用codemirror遇到的问题

前提小结:

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

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

 <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的文本内容。

在vue里使用codemirror遇到的问题

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

在vue里使用codemirror遇到的问题

基于以上几点,我选择用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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!