使⽤Vue-codemirror使⽤总结。
前提⼩结：
第⼀次⽤codemirror，⽽且是在vue⾥⾯使⽤，看了官⽅⽂档，⼀⼤串都是英⽂，翻译后⼤概了解了这个插件，然后在项⽬中使⽤时出现过好⼏个问题：
1.新版的codemirror在lib⽬录下没有codemirror.js⽂件，旧版的有，所以⽹上的很多⽂章都是直接这样引：
<scriptsrc="lib/codemirror.js"></script>
<linkrel="stylesheet"href="../lib/codemirror.css">
<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.路由跳转的时候，当打开的编辑器代码显⽰最顶层的内容的时候，切换到其他路由再切换回来还是能显⽰缓存的编辑器⽂本，当我把编辑器拉到最底层，显⽰最底层的⽂本内容，再切换到其他路由再切回来时，编辑器⼀⽚空⽩，⿏标点击编辑器或者⿏标滑轮滚动，⽂本内容出现，⽽且显⽰的内容是顶层的内容。
基于以上⼏点，我选择⽤组件来实现。
实现
1.⾸先要先安装vue-codemirror
(在npm的官⽹我到了)
npm install vue-codemirror --save
2. 接着在main.js⾥使⽤
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(codemirror)
3. 再到组件⾥使⽤
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
}
使⽤组件
<codemirror  ref="myCm"  v-model="t"  :options="cmOptions"  @changes="changes" class="code" ></codemirror>
我的data
options是和codemirror⼀样的配置项
下⾯的API⽂档翻译过来的
value: string|CodeMirror.Doc
编辑器的起始值。可以是字符串，也可以是⽂档对象。
mode: string|object
使⽤的模式。如果没有给出，这将默认为加载的第⼀个模式。它可以是⼀个字符串，可以简单地命名模式，也可以是与模式关联的MIME类型。或者，它可以是包含模式配置选项的对象，具有name命名模式的属性（例如{name: “javascript”, json: true}）。每种模式的演⽰页⾯都包含有关模式⽀持的配置参数的信息。您可以通过检查des 和CodeMirror.mimeModes对象来询问CodeMirror已定义了哪些模式和MIME类型。第⼀个将模式名称映射到它们的构造函数，第⼆个将MIME类型映射到模式规范。
lineSeparator: string|null
显式设置编辑器的⾏分隔符。默认情况下（值null），⽂档将在CRLF以及单独的CR和LF上拆分，并且单个LF将在所有输出中⽤作⾏分隔符（例如getValue）。给定特定字符串时，只会在该字符串上拆分⾏，默认情况下，输出将使⽤相同的分隔符。
theme: string
⽤编辑器设计样式的主题。您必须确保.cm-s-[name] 已加载定义相应样式的CSS⽂件（请参阅theme
分发中的⽬录）。默认值为"default"，包含的颜⾊codemirror.css。它可以使⽤多个主题化班⼀次，例如"foo bar"将同时分配cm-s-foo和cm-s-bar类编辑器。
indentUnit: integer
⼀个块（编辑语⾔中的含义）应缩进多少个空格。默认值为2。
smartIndent: boolean
是否使⽤模式提供的上下⽂相关缩进（或者只是缩进与之前的⾏相同）。默认为true。
tabSize: integer
制表符的宽度。默认为4。
indentWithTabs: boolean
在缩进时，是否tabSize 应该⽤N个制表符替换前N *个空格。默认值为false。
electricChars: boolean
配置编辑器在键⼊可能更改其正确缩进的字符时是否应重新缩进当前⾏（仅在模式⽀持缩进时才有效）。默认为true。
specialChars: RegExp
⽤于确定哪些字符应由特殊占位符替换的正则表达式。⾮常适⽤于⾮打印特殊字符。默认是/[\u0000-\u001f\u007f-
\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/。
specialCharPlaceholder: function(char) → Element
给定由specialChars 选项标识的特殊字符的函数，⽣成⽤于表⽰字符的DOM节点。默认情况下，会显⽰⼀个红点（·），并带有标题⼯具提⽰以指⽰字符代码。
direction: “ltr” | "rtl"
翻转整体布局并选择基本段落⽅向为从左到右或从右到左。默认为“ltr”。CodeMirror将Unicode双向算法应⽤于每⼀⾏，但不⾃动检测基本⽅向 - 它设置为所有⾏的编辑器⽅向。当基本⽅向与⽤户意图不匹配时，⽣成的顺序有时会出错（例如，前导和尾随标点跳转到⾏的错误⼀侧）。因此，允许⽤户切换此选项对多语⾔输⼊很有帮助。
rtlMoveVisually: boolean
确定通过从右到左（阿拉伯语，希伯来语）⽂本的⽔平光标移动是否是可视的（按向左箭头向左移动光标）或逻辑（按向左箭头移动到字符串中的下⼀个较低索引，这在视觉上是正确的从右到左的⽂字）。默认设置false 在Windows上，true在其他平台上。
keyMap: string
配置要使⽤的键映射。默认值是"default"，这是唯⼀定义的键映射codemirror.js。key map⽬录中可以到额外的键映射。有关详细信息，请参阅关键映射部分。
extraKeys: object
可⽤于为编辑器指定额外的键绑定，以及由其定义的绑定keyMap。应为null或有效的键映射值。
configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object
允许您配置⿏标选择和拖动的⾏为。按下⿏标左键时调⽤该函数。返回的对象可能具有以下属性：
unit: “char” | “word” | “line” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos}
python新手代码错了应该怎么改选择的单位。对于⾃定义单元，可以是内置单元之⼀，也可以是⼀个位置并返回其范围的函数。默认设置是返回"word"双击，"line"三次点击，“rectangle"alt-clicks（或Chrome操作系统，元移位点击）等"single” 。
extend: bool
是否扩展现有选择范围或开始新选择范围。默认情况下，单击班次时会启⽤此功能。
addNew: bool
启⽤后，这会为现有选择添加新范围，⽽不是替换它。默认⾏为是在Mac OS上为命令单击启⽤此功能，并在其他平台上按住Control键单击。
moveOnDrag: bool
当⿏标甚⾄拖动编辑器内部的内容时，它控制是复制（false）还是移动（true）。默认情况下，通过在Mac OS上单击⿏标右键并在其他位置按住Ctrl键单击来启⽤此功能。
lineWrapping: boolean
CodeMirror是否应滚动或换⾏以排长⾏。默认为false（滚动）。
lineNumbers: boolean
是否在编辑器左侧显⽰⾏号。
firstLineNumber: integer
在哪个数字开始计数⾏。默认值为1。
lineNumberFormatter: function(line: integer) → string
⽤于格式化⾏号的函数。该函数传递给⾏号，并应返回将在装订线中显⽰的字符串。
gutters: array < string>
可⽤于添加额外的排⽔沟（超出或代替⾏号排⽔沟）。应该是⼀个CSS类名称数组，每个类名称定义⼀个width（和可选的背景），并将⽤于绘制排⽔沟的背景。可以包括CodeMirror-linenumbers类，以便明确设置⾏号装订线的位置（它将默认为所有其他装订线的右侧）。这些类名是传递给的键setGutterMarker。
fixedGutter: boolean
确定装订线是否⽔平滚动内容（false）或在⽔平滚动期间是否保持固定（true，默认值）。
scrollbarStyle: string
选择滚动条实现。默认为"native"，显⽰本机滚动条。核⼼库还提供了"null"完全隐藏滚动条的样式。插件可以实现其他滚动条模型。
coverGutterNextToScrollbar: boolean
当fixedGutter 打开时，并且存在⽔平滚动条，默认情况下，此滚动条左侧将显⽰装订线。如果此选项设置为true，则它将由具有类的元素覆盖CodeMirror-gutter-filler。
inputStyle: string
选择CodeMirror处理输⼊和焦点的⽅式。核⼼库定义"textarea" 和"contenteditable"输⼊模式。在移动浏览器上，默认为"contenteditable"。在桌⾯浏览器上，默认为"textarea"。在"contenteditable"模型中⽀持IME和屏幕阅读器更好。⽬的是使其成为未来现代桌⾯浏览器的默认设置。
readOnly: boolean|string
这会禁⽌⽤户编辑编辑器内容。如果"nocursor"给出特殊值（⽽不是简单true），则不允许对编辑器进⾏聚焦。
showCursorWhenSelecting: boolean
选择是否处于活动状态时是否应绘制光标。默认为false。
lineWiseCopyCut: boolean
启⽤时（默认情况下），在没有选择时执⾏复制或剪切将复制或剪切其上有游标的整⾏。
pasteLinesPerSelection: boolean
当从外部源（⽽不是编辑器本⾝）粘贴某些内容时，如果⾏数与选择的数量相匹配，则CodeMirror将默认为每个选择插⼊⼀⾏。您可以将其设置false为禁⽤该⾏为。
selectionsMayTouch: boolean
确定多个选择是在触摸时（默认值）还是仅在它们重叠时（true）连接。
undoDepth: integer
编辑器存储的最⼤撤消级别数。请注意，这包括选择更改事件。默认为200。
historyEventDelay: integer
键⼊或删除时将导致新历史事件开始的不活动时间（以毫秒为单位）。默认为1250。
tabindex: integer
要分配给编辑器的选项卡索引。如果没有给出，则不会分配选项卡索引。
autofocus: boolean
可⽤于使CodeMirror将焦点集中在初始化上。默认为关闭。当fromTextArea使⽤when时，并且没有给出该选项的显式值，当源textarea 被聚焦时，它将被设置为true，或者它具有autofocus属性⽽没有聚焦其他元素。
phrases: ?object
某些插件通过该phrase ⽅法运⾏⽤户可见的字符串（例如界⾯中的标签）以允许翻译。此选项确定该⽅法的返回值。如果它为null或者没有输⼊字符串命名的属性的对象，则返回该字符串。否则，返回与该字符串对应的属性的值。
下⾯列出了⼀些更专业的低级选项。这些仅在特定情况下有⽤，您可能希望在第⼀次阅读本⼿册时跳过它们。
dragDrop: boolean
控制是否启⽤拖放。默认开启。
allowDropFileTypes: array< string>
设置（默认为null）时，只能将类型在数组中的⽂件放⼊编辑器中。字符串应该是MIME类型，并将根据浏览器报告type 的File对象进⾏检查。
cursorBlinkRate: number
⽤于光标闪烁的半周期（以毫秒为单位）。默认闪烁率为530毫秒。通过将此值设置为零，可以禁⽤闪烁。负值完全隐藏光标。
cursorScrollMargin: number
当接近可滚动⽂档中可见视图的顶部或底部时，总是在光标上⽅和下⽅留出多少额外空间。默认值为0。
cursorHeight: number
确定光标的⾼度。默认值为1，表⽰它跨越线的整个⾼度。对于某些字体（以及某些品味）较⼩的⾼度（例如0.85），导致光标⽆法⼀直到达线的底部，看起来更好
resetSelectionOnContextMenu: boolean
控制当在当前选择之外单击打开上下⽂菜单时，是否将光标移动到单击点。默认为true。
workTime, workDelay: number
突出显⽰由伪背景线程完成，该线程将⼯作workTime毫秒，然后使⽤超时睡眠workDelay毫秒。默认值为200和300，您可以更改这些选项以突出显⽰或多或少的激进。
pollInterval: number
指⽰CodeMirror应该如何快速轮询其输⼊textarea以进⾏更改（聚焦时）。⼤多数输⼊都是由事件捕获的，但某些内容（如某些浏览器上的IME输⼊）不会⽣成允许CodeMirror正确检测它的事件。因此，它民意调查。默认值为100毫秒。
flattenSpans: boolean
默认情况下，如果相邻标记具有相同的类，则它们会将相邻标记合并为单个跨度。这将导致更简单的DOM树，从⽽表现更好。使⽤某些样式（例如圆⾓），这将改变⽂档的外观。您可以将此选项设置为false以禁⽤此⾏为。
addModeClass: boolean
启⽤时（默认情况下为off），将为每个标记添加⼀个额外的CSS类，指⽰⽣成它的（内部）模式，前缀为"cm-m-"。例如，来⾃XML模式的标记将获得cm-m-xml该类。
maxHighlightLength: number
当突出显⽰长⾏时，为了保持响应，编辑器将放弃并简单地将⾏的其余部分设置为纯⽂本，当它到达某个位置时。默认值为10 000.您可以将其设置Infinity为关闭此⾏为。
viewportMargin: integer
指定在当前滚动到视图中的⽂档部分上⽅和下⽅呈现的⾏数。这会影响滚动时所需的更新量以及此类更新所做的⼯作量。您通常应该将其保留为默认值10.可以设置为Infinity确保始终呈现整个⽂档，因此浏览器的⽂本搜索会对其进⾏处理。这将对⼤⽂档的性能产⽣不良影响。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。