在vue中使用代码镜像的问题

房地概述：

我第一次用codemirror，它用在vue。看了官方文件后，大量都是英文的。翻译后，我了解了这个插件，然后在项目中使用时出现了几个问题：

1.新版codemirror在lib目录中没有codemirror.js文件，但是旧版有，所以网上很多文章直接引用如下：

script src=' http : lib/codemirror . js '/script link rel='样式表' href='./lib/codemirror . CSS ' rel=' external no follow ' script src=' http : mode/Javascript/JAVAScript . js '/script但是，新手在新版本的code mirror中报告错误，这将codemirror.js放在src目录中。当然，如果您想移动到lib目录，您需要更改codemirror.js文件内部的路径。

2.在vue中使用codemirror动态创建编辑器会在关闭时导致一个天知道是什么的错误，也就是说，例如，我已经构建了两个新的编辑器，a和b，a在左边，b在右边。当我关闭a时，我想显示b的文档内容，但它显示的是b的，这是动态数据变化导致的错误，但当b关闭时，可以显示a的文本内容。

3.当路线跳转时，当打开的编辑器代码显示顶级内容时，切换到其他路线然后切换回来仍然可以显示缓存的编辑器文本。当我把编辑器拉到底部显示底层文字内容，然后切换到其他路线再切回去，编辑器是空白的，鼠标点击编辑器或者鼠标滑轮滚动，文字内容出现，显示的内容就是顶层内容。

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

实现

1.首先安装vue-codemirror

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

然后在main.js中使用https://www.npmjs.com/package/vue-codemirrornpm install vue-codemirror-save

从“vue-codemirror”导入{codemirror}，导入“code mirror/lib/code mirror . CSS”vue . use(vuecodemirr)，然后在组件中使用它

从“vue-codemirror”导入{ code mirror } require(' code mirror/mode/python/python . js ')require(' code mirror/addon/fold code . js ')require(' code mirror/addon/fold/brace-fold . js ')require(' code mirror/addon/fold/XML-fold . js ')require(' code mirror/addon/fold . js ')require(' code mirror/addon/fold . js ')

当然，需要先声明组件

组件： {codemirror} html代码如下所示：

code mirror ref=' mycm ' : value=' item。content ' : options=' CMOS options ' @ changes=' changes ' class=' code '/codemirroroptions是与codemirror相同的配置项

value:字符串| CodeMirror。文件

编辑器的初始值(文本)可以是字符串或代码镜像文档对象(不同于HTML文档对象)。

mode:字符串|对象

与模式相关联的mime是常见的或在CodeMirror中使用，当未设置该值时，默认情况下将使用第一个加载的模式定义文件。通常，关联的mime类型用于设置该值；此外，还可以使用名称属性作为值的对象(例如：{name: "JavaScript "，

json: true }).您可以通过访问CodeMirror.modes和CodeMirror.mimeModes来获取已定义的模式和MIME.

lineSeparator:字符串|null

明确指定编辑器使用的行分隔符(换行符)。默认情况下(该值为空)，文档将被CRLF(以及单独的CR、LF)分割，并且单独的LF将在所有输出中用作换行符(例如getValue)。当指定换行符时，该行将只被指定的字符串分开。

主题：字符串

配置编辑器的主题样式。若要使用主题，必须确保命名的样式。加载cm-s-[name] (name是设置主题的值)。当然，您也可以一次加载多个主题样式，使用与html相同的方法并使用类，例如theme: foo bar，因此此时，已经加载了两个样式，cm-s-foo cm-s-bar。

indentUnit:整数

缩进单位，值为空格数，默认值为2。

smartIndent:布尔值

自动缩进，设置是否根据上下文自动缩进(缩进量与前一行相同)。默认值为真。

tabSize:整数

制表符的宽度，默认为4。

indentWithTabs:布尔值

缩进时，是否需要用n个制表符替换n *制表符宽度的空格默认为假。

electricChars:布尔值

如果输入可能改变当前缩进，默认值为真(仅在模式支持缩进时有效)。

specialChars:正则表达式

需要用占位符替换的特殊字符的正则表达式。最常用的字符是非打印字符。默认值为：/[\ u 0000-\ u 0019 \ u 00ad \ 100 b-\ u200f \ u 2028 \ u 2029 \ ufeff]/。

specialCharPlaceholder:函数(char) 元素

这是一个以specialChars选项指定的字符为参数的函数，这个函数将生成一个显示指定字符的DOM节点。默认情况下，会显示一个红点()，该红点前面有一个带有特殊字符编码的提示框。

rtlMoveVisually:确定水平光标在从右向左(阿拉伯语、希伯来语)文本中的移动是视觉上的(按左箭头将光标向左移动)还是逻辑上的(按左箭头将移动到字符串中下一个较低的索引，在从右向左的文本中，该索引在视觉上是右的)。缺省值在Windows上为假，在其他平台上为真。(不知道这一段到底是怎么回事)

keyMap:字符串

配置快捷键。默认值是default，由codemorrir.js内部定义。其他值在keymap目录中。

extraKeys:对象

使用不同于先前按键映射配置的快捷键绑定编辑器。

lineWrapping:布尔值

在长行中，无论文本是换行还是滚动，默认都是滚动。

行号：布尔值

是否在编辑器左侧显示行号。

第一行数字：整数

默认情况下，行号开始计数的数字是1。

lineNumberFormatter:函数(line:整数)字符串

使用函数设置行号。

水槽：阵列

用于添加额外的装订线(在行号装订线之前或代替行号装订线)。该值应该是一个CSS名称数组，每个名称定义了用于绘制装订线背景的宽度(以及可选的背景)。要显式设置行号装订线的位置(默认位于所有其他装订线的右侧)，还可以包含CodeMirror-linenumbers类。类名是用来传递给setGutterMarker的键。

fixedGutter:布尔值

设置装订线是随编辑器内容水平滚动(false)还是固定在左侧(true或默认值)。

scrollbarStyle:字符串

设置滚动条。默认为“原生”，并显示原生滚动条。核心库还提供了“空”样式，完全隐藏了滚动条。插件可以设置更多的滚动条模式。

coverGutterNextToScrollbar:布尔值

当启用fixedgutter并有水平滚动条时，默认情况下，装订线将显示在滚动条的最左侧。当该项设置为真时，装订线将被具有代码镜像-装订线-填充类的元素阻挡。

输入样式：字符串

选择CodeMirror处理输入和聚焦的方式。核心库定义了textarea和contenteditable输入模式。在移动浏览器上，默认值为contenteditable，在桌面浏览器上，默认值为textarea。在内容可编辑模式下，更好地支持IME和屏幕阅读器。

readOnly:布尔值|字符串

编辑器是否为只读。如果设置为预设值“nocursor”，编辑区除了设置为只读外，无法获得焦点。

showCursorWhenSelecting:布尔值

选择时是否显示光标，默认值为假。

lineWiseCopyCut:布尔值

启用时，如果复制或剪切时没有选择文本，光标所在的整行将自动操作。

undoDepth:整数

最大撤消次数，默认值为200(包括所选的内容更改事件)。

historyEventDelay:整数

输入或删除历史事件前的毫秒数。

tabindex:整数

编辑的Tabindex。

autofocus:布尔值

初始化时是否自动获取焦点。默认情况下，它是关闭的。但是，当使用textarea并且没有显式指定值时，它将自动设置为true。

低级选项

以下选项仅在某些特殊情况下使用。

dragDrop:布尔值

默认情况下，是否允许拖放为真。

allowDropFileTypes:数组系统

默认值为空。设置此项时，只接收包含在此数组中的文件类型并将其拖到编辑器中。文件类型是MIME名称。

cursorBlinkRate:号

光标闪烁的时间间隔，以毫秒为单位。默认值为530。设置为0时，光标闪烁被禁用。负数隐藏光标。

光标滚动边距：数字

当光标靠近可视区域的边界时，光标上方和下方的距离。默认值为0。

光标高度：号

光标高度。默认值为1，即全行高。对于某些字体，设置0.85看起来更好。

resetselectioncontextmenu u :布尔值

设置当在选定文本外单击以打开上下文菜单时，是否将光标移动到被单击的位置。默认值为真。

工作时间，工作延迟：号

使用一个假的后台线程来突出显示工作时间的持续时间，然后使用超时来休息工作延迟的持续时间。默认值为200和300。(完全不知道这个函数在说什么)

轮询间隔：号

指示代码镜像滚动(写入数据)到相应文本区域的速度(当它获得焦点时)。大多数输入由事件捕获，但是一些输入法(如IME)在某些浏览器中不生成事件，因此使用数据滚动。默认值为100毫秒。

flattenSpans:布尔值

默认情况下，代码镜像将同一个类的两个跨度组合成一个。通过将此项设置为false来禁用此功能。

addModeClass:布尔值

启用(默认情况下禁用)时，会向每个标记添加一个额外的以cm-m开头的CSS样式类，表示生成标记的模式。例如，由XML模式生成的标记添加了cm-m-xml类。

maxHighlightLength:数字

当需要突出显示一长行时，为了保持响应性能，编辑器在到达一定位置时会直接将其他行设置为纯文本。默认值为10000，可以设置为无穷大关闭该功能。

viewportMargin:整数

指定视图中当前滚动到内容上方和下方的行数。这会影响滚动时要更新的行数。一般来说，应该使用默认值10。您可以将值无限设置为始终呈现整个文档。注意：此设置将影响处理大型文档时的性能。

Vue-codemirror还提供了一些使用方法

scroll changes before change cursorActivity key handled input thread electric out before selectionchange viewport change swapDoc gutterClick gutterContextMen U focus blur refresh选项change scrollcursorintoview update如果我的英语不好，我会一步一步翻译，但基本上这些更改、更新、刷新、对焦、模糊、其他取决于您的需求。代码镜像应该用于编辑后保存代码，使用代码镜像的方法是使用计算属性：

computed : { code mirror(){返回此。$ refs.mycm.codemirror}}，codemirror的方法在官网有详细讲解，所以我就列举一些常用的(

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

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

(3)撤销():取消编辑器

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

(5)set selection({ line : startline number，ch:start_ch}，{line:endLineNumber，ch : end _ ch })；设置新的编辑器

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

(7)替换范围(str1，{line，ch}，{line，ch}，str2) :将字符串1中的部分代码替换为字符串2

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

(9)替换选择(字符串1，字符串2) :来替换所选内容

至此，用法已经完成。我开头提到的三个问题，第一个和第二个都解决了，第三个解决不了。codemirror中应该有一个自动刷新程序。解决页面切换编辑器空白的方法可以在选项中添加一个配置viewportMargin:Infinity，但这会影响性能。

摘要

以上是边肖在vue中使用codemirror的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！