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

功能介绍

开箱即用，支持100多种语言。

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

自动完成(XML)

代码折叠

可配置的密钥绑定

Vim、Emacs和Sublime文本绑定系统

搜索和替换界面

括号和标签匹配

支持拆分视图

衬胶机一体化

混合字体大小和样式

各种主题

可调整大小以适合内容

嵌入和阻止小部件

可编程沟

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

双向文本支持

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

施用方式

下载后，在提取的文件夹中，核心库和核心css放在lib下，各种支持语言的语法定义分散在mode下，主题目录下支持主题样式。一般在开发中，在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；

接下来，将引用模式目录编辑器中与要编辑的语言相对应的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；

如果您仍然希望您的编辑器支持代码行折叠，请按照以下步骤操作:

& 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；

这样介绍好吗？当然不是。

创建编辑器

在实际项目中，一般不会直接使用body的全部内容作为编辑器的容器。最常用的是使用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: boolean Auto Indent，设置是否根据上下文自动缩进(与前一行的数量相同)。默认值为true。

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

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

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

SpecialChars: RegExp是需要用占位符替换的特殊字符的正则表达式。最常用的是非印刷字符。默认值为:/[\ u 0000-\ u 0019 \ u00ad \ u00b-\ 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当行很长时，文本是换行还是滚动；默认值是scroll。

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

首行号:整数行号开始计数的编号；默认值为1。

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

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

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

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

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

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

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

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

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

historiyeventdelay:integer在输入或删除时引发历史事件之前的毫秒数。

Tabindex:integer编辑器的tabindex。

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

dragdrop:Boolean是否允许拖放，默认为true。

AllowDropFileTypes:数组默认为null。设置此项时，仅接收该数组中包含的文件类型并将其拖入编辑器。文件类型是MIME名称。

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

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

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

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

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

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

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

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

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

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