CodeMirror(在线代码编辑器)，用JavaScript开发，CodeMirror用于编辑代码，拥有100多种语言模式和各种插件，实现更高级的编辑功能。每种语言都突出显示了功能完整代码和语法，以帮助您阅读和编辑复杂代码。

功能介绍

对100多种语言的现成支持

一个强大的可组合的语言模式系统

自动完成(XML)

代码折叠

可配置的密钥绑定

Vim、Emacs和Sublime文本绑定系统

搜索和替换界面

匹配支架和标签。

支持拆分视图

衬胶机一体化

混合字体大小和样式

各种主题

调整大小以适应内容。

嵌入和阻止小部件

可编程沟

使文本范围成为风格化、只读或原子化的文本范围。

双向文本支持

许多其他方法和附加组件.....

施用方式

下载后解压文件夹，核心库和核心css放在lib下，支持的各种语言的语法定义放在mode下，支持的主题样式放在theme目录下。一般在开发中，在lib和mode下添加引用就够了。

如何使用

使用代码镜像时，必须介绍以下两项:

& ltlink rel = & quot样式表& quothref = & quotcodemirror-5 . 31 . 0/lib/codemirror . CSS & quot；/& gt；

& lt脚本src = & quotcodemirror-5 . 31 . 0/lib/codemirror . js & quot；& gt& lt/script & gt；

接下来要参考的是mode目录下编辑器中要编辑的语言对应的js文件。这里，以Groovy为例:

& lt！-groovy代码highlight-& gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/mode/groovy/groovy . js & quot；& gt& lt/script & gt；

如果想让Java 代码支持代码高亮，需要介绍一下我从网上下载的clike.js(我已经放在我的GitHub里了)

& lt！-必须引入Java代码亮点-& gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/clike . js & quot；& gt& lt/script & gt；

引用的文件用于支持相应语言的语法高亮显示。

然后，前面说了，第一次进Code Mirror官网，觉得那些编辑器很丑。那可能是因为主题很丑。我在这里推荐一个不错的题材，简单介绍如下:

& lt！-引入css文件来支持主题->:

& ltlink rel = & quot样式表& quothref = & quotcode mirror-5 . 31 . 0/theme/dracula . CSS & quot；/& gt；

如果您仍想折叠编辑器 support 代码线，请按照以下步骤操作:

& lt！-支持代码折叠-& gt；

& ltlink rel = & quot样式表& quothref = & quotcode mirror-5 . 31 . 0/addon/fold/fold gutter . CSS & quot；/& gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/addon/fold/fold code . js & quot；& gt& lt/script & gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/addon/fold/fold gutter . js & quot；& gt& lt/script & gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/addon/fold/brace-fold . js & quot；& gt& lt/script & gt；

& lt脚本src = & quotcode mirror-5 . 31 . 0/addon/fold/comment-fold . js & quot；& gt& lt/script & gt；

要是当初是这样推出的就好了，当然不是。

创建编辑器

在实际项目中，一般不会直接使用全身内容作为编辑器的容器。最常用的方法是使用textarea。这里我在房间里使用了一个文本区域，

& lt！-开始代码-& gt；

& lttextarea class = & quot表单控制& quotid = & quot代码& quotname = & quot代码& quot& gt& lt/textarea & gt；

& lt！-结束代码-& gt；

下一步是创建编辑器。

//根据DOM元素的id构造一个编辑器

var editor = code mirror . fromtextarea(document . getelementbyid(& quot；代码& quot), {

});

是不是有点单调？

可以，我还可以在里面给他设置一些属性:(充分利用我开头介绍的文件)

模式:& quottext/groovy & quot；，

模式:& quottext/x-Java & quot；，//实现Java代码高亮显示

LineNumbers: true，//显示行号

主题:& quot德古拉& quot，//设置主题

换行:true，/代码折叠

foldGutter:没错，

水槽:[& quot；CodeMirror-line numbers & quot；，& quotcode mirror-fold gutter & quot；],

MatchBrackets: true，//括号匹配。

//readonly: true，

如果需要查看更多属性，可以去官网找。目前我只用这些属性！

以下是一些例子:

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

SmartIndent:布尔自动缩进，设置是否根据上下文自动缩进(与上一行缩进量相同)。默认值为true。

制表符大小:整数制表符的宽度，默认为4。

IndentWithTabs: boolean，缩进时，n *制表符宽度空格是否需要用n个制表符替换。默认值为false。

ElectricChars: boolean当输入可能改变当前缩进时是否再次缩进。默认值为true(仅当mode支持缩进时有效)。

SpecialChars: RegExp是需要用占位符替换的特殊字符的正则表达式。最常用的字符是非印刷字符。默认为:/[\ u 0000-\ u 0019 \ u00ad \ u200b-\ u200f \ u 2028 \ u 2029 \ u efff]/。

SpecialCharplaceholder:function(char)→element这是一个接收由specialChars选项指定的字符作为参数的函数。这个函数将生成一个DOM节点，用来显示指定的字符。默认情况下，红点(？)，这个红点有一个提示框，前面有一个特殊的字符码。

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

KeyMap:字符串配置快捷键。默认值为default，由codemorrir.js在其他键映射目录下内部定义。

extra keys:object bind编辑器一个不同于以前的键映射配置的快捷键。

LineWrapping: boolean当行很长时，文本是换行还是滚动。默认为滚动。

LineNumbers: boolean是否在编辑器的左侧显示行号。

首行号:整数行号从哪个号开始，默认值为1。

line formatter:function(line:integer)→String使用函数设置行号。

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

Fixedgutter: boolean设置装订线是水平跟随编辑器内容(false)还是固定在左侧(true或default)。

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

CoverterNextScrollBar: Boolean当启用了fixedgutter并且有水平滚动条时，默认情况下，gutter将显示在滚动条的最左侧。当此项设置为true时，Gutter将被具有CodeMirror-gutter-filler类的元素遮挡。InputStyle: string选择CodeMirror如何处理输入和焦点。核心库定义了textarea和contenteditable输入模式。在移动浏览器上，默认为contenteditable，在桌面浏览器上，默认为textarea。更好地支持内容可编辑模式下的IME和屏幕阅读器。

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

ShowCursorWhenselecting:Boolean选择时是否显示光标；默认值为false。

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

撤销深度:整数撤销次数的最大值，默认为200(包括选中的内容变化事件)。

HistoryEventDelay:整数在输入或删除期间引发历史事件之前的毫秒数。

Tabindex:integer编辑器的Tabindex。

auto focus:boolean是否在初始化时自动获得焦点。这种情况默认是关闭的。但是，当使用textarea并且没有显式指定该值时，它将自动设置为true。

DragDrop: boolean是否允许拖放，默认值为true。

AllowDropFileTypes:默认情况下，数组为空。设置此项时，只有该数组中包含的文件类型才会被拖入编辑器。文件类型是MIME名称。

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

CursorScrollMargin:当光标位于可视区域边界附近时的数字，即光标与顶部和底部之间的距离。默认值为0。

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

ReselectionContextMenu: Boolean设置在选定文本外部单击以打开上下文菜单时，是否将光标移动到单击点。默认值为true。

WorkTime，workDelay: number通过一个假的后台线程突出显示工作时间持续时间，然后使用timeout来休息workDelay持续时间。默认值为200和300。(我完全不知道这个功能在说什么)

PollInterval: number表示CodeMirror滚动(写入数据)到相应textarea的速度(获得焦点时)。大部分输入是由事件捕获的，但有些输入法(如IME)在某些浏览器中不生成事件，所以使用数据滚动。默认值为100毫秒。

默认情况下，CodeMirror会将两个使用相同类的span合并为一个。通过将此设置为false来禁用此功能。

AddModeClass: boolean启用时(默认禁用)，一个以cm-m开头的额外CSS样式类(代表生成标签的模式)将被添加到每个标签中。例如，XML模式生成的标记将添加cm-m-xml类。

MaxHighlightLength:需要突出显示一长行时的数字，为了保持响应性，编辑器在到达某些位置时会直接将其他行设置为纯文本。默认为10000，可以设置为无穷大来关闭这个功能。

ViewportMargin: integer指定当前在视图内容上下滚动的要呈现的行数。这会影响滚动时要更新的行数。通常，应该使用默认值10。您可以将该值设置为无穷大，以便始终呈现整个文档。注意:此设置会影响处理大型文档时的性能。