CodeMirror在线代码编辑器，使用JavaScript开发，CodeMirror用于编辑代码，拥有100多种语言模式和各种插件，提供更高级的编辑功能。每种语言都附带功能齐全的代码和语法突出显示，以帮助阅读和编辑复杂的代码。

CodeMirror（在线代码编辑器），使用JavaScript开发，CodeMirror用于编辑代码，拥有100多种语言模式和各种插件来实现更高级的编辑功能。每种语言都附带功能齐全的代码和语法突出显示，以帮助阅读和编辑复杂的代码。

特征

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

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

自动完成(XML)

代码折叠

可配置的按键绑定

Vim、Emacs 和Sublime 文本绑定系统

搜索替换界面

括号和标签匹配

支持分割视图

涂胶衬胶机一体化

混合字体大小和样式

各种主题

可调整大小以适应内容

内联和块小部件

可编程沟渠

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

双向文本支持

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

指示

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

如何使用

使用Code Mirror必须引入以下两个：

链接rel='stylesheet' href='codemirror-5.31.0/lib/codemirror.css'/

脚本src='codemirror-5.31.0/lib/codemirror.js'/script

接下来要引用的是mode目录下编辑器中要编辑的语言对应的js文件。下面以Groovy 为例：

!--groovy 代码高亮--

脚本src='codemirror-5.31.0/mode/groovy/groovy.js'/script

如果想让Java代码也支持代码高亮，需要引入我从网上下载的clike.js（我已经放在我的GitHub上了）

!--Java代码高亮必须引入--

脚本src='codemirror-5.31.0/clike.js'/script

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

然后就像前面提到的，当我第一次进入Code Mirror官方网站时，我感觉那些编辑器很丑。这可能是因为主题很丑。我在这里推荐一个非常好的主题。简单介绍如下：

!--引入css文件支持主题--

链接rel='stylesheet' href='codemirror-5.31.0/theme/dracula.css'/

如果您还希望编辑器支持代码行折叠，请按以下步骤操作：

!--支持代码折叠--

链接rel='stylesheet' href='codemirror-5.31.0/addon/fold/foldgutter.css'/

脚本src='codemirror-5.31.0/addon/fold/foldcode.js'/script

脚本src='codemirror-5.31.0/addon/fold/foldgutter.js'/script

脚本src='codemirror-5.31.0/addon/fold/brace-fold.js'/script

脚本src='codemirror-5.31.0/addon/fold/comment-fold.js'/script

就这样介绍一下就好了吗？当然不是

创建编辑器

在实际项目中，一般不会直接将body的全部内容作为编辑器的容器。最常用的是使用textarea。这里我在里面使用了一个textarea，

!-- 开始代码--

textarea class='form-control' id='code' name='code'/textarea

!-- 结束代码--

下一步是创建编辑器。

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

var editor=CodeMirror.fromTextArea(document.getElementById('code'), {

});

是不是有点单调呢？

是的，我还可以在里面给他设置一些属性：（充分利用我一开始介绍的文件）

mode: 'text/groovy', //实现groovy代码高亮

mode: 'text/x-java', //实现Java代码高亮

lineNumbers: true,//显示行号

theme: 'dracula',//设置主题

lineWrapping: true,//代码折叠

FoldGutter：正确，

装订线：['CodeMirror-linenumbers'，'CodeMirror-foldgutter']，

matchBrackets: true,//括号匹配

//readO nly: true, //只读

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

下面我们列出一些：

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

smartIndent: boolean 自动缩进，设置是否根据上下文自动缩进（与上一行相同的缩进量）。默认为true。

tabSize：整数制表符的宽度，默认为4。

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

electricChars: boolean 当输入可能改变当前缩进时是否重新缩进，默认为true（仅当模式支持缩进时有效）。

SpecialChars: RegExp 需要用占位符替换的特殊字符的正则表达式。最常用的是非打印字符。默认为：/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。

SpecialCharPlaceholder: function(char) Element 这是一个接收specialChars 选项指定的字符作为参数的函数。该函数将生成一个DOM节点用于显示指定的字符。默认情况下，会显示一个红点(?)。这个红点有一个提示框，上面有特殊字符编码。

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

keyMap: string 配置快捷键。默认值是default，它是在codemorrir.js内部定义的。其他的在按键映射目录中。

extraKeys：对象将快捷键绑定到编辑器，与之前的keyMap配置不同。

lineWrapping: boolean 在长行中，文本是否换行或滚动，默认为滚动。

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

firstLineNumber: 整数行号开始计数的数字，默认为1。

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

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

fixedGutter：布尔值设置装订线是跟随编辑器内容水平滚动（false）还是固定在左侧（true或默认）。

scrollbarStyle：字符串设置滚动条。默认为“native”，显示本机滚动条。核心库还提供了“null”样式，它完全隐藏滚动条。插件可以设置更多滚动条模式。

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

read Only: boolean|string 编辑器是否为只读。如果设置为默认值“nocursor”，除了被设置为只读之外，编辑区域将不会获得焦点。

showCursorWhenSelecting: boolean 选择时是否显示光标，默认为false。

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

undoDepth：整数撤消的最大次数，默认为200（包括选定的内容更改事件）。

HistoryEventDelay：整数输入或删除时引发历史事件之前的毫秒数。

tabindex: 整数编辑器的tabindex。

autofocus: boolean 初始化时是否自动获取焦点。默认关闭。但是，当使用文本区域并且没有显式指定值时，它将自动设置为true。

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

allowedDropFileTypes：数组默认为null。设置此值后，编辑器将仅接受此数组中包含的文件类型。文件类型是MIME 名称。

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

cursorScrollMargin: number 当光标接近可见区域边界时光标上方和下方的距离。默认值为0。

光标高度：数字光标高度。默认为1，表示行高被填充。对于某些字体，设置0.85 看起来会更好。

resetSelectionOnContextMenu: boolean 设置在选定文本外部单击以打开上下文菜单时是否将光标移动到单击的位置。默认为true。

workTime, workDelay: number 通过假后台线程突出显示workTime，然后使用timeout 休息workDelay。默认为200 和300。（我不知道这个函数在说什么）

pollInterval：数字表示CodeMirror滚动（写入数据）到相应文本区域（获得焦点时）的速度。大多数输入是通过事件捕获的，但某些输入法（例如IME）在某些浏览器上不会生成事件，因此使用数据滚动。默认值为100 毫秒。

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

addModeClass: boolean 启用（默认禁用）时，将以cm-m 开头的附加CSS 样式类将添加到每个标记，指示生成标记的模式。例如，XML模式生成的标记将添加cm-m-xml类。

maxHighlightLength: number 当需要突出显示很长的行时，为了保持响应能力，编辑器会在到达某些位置时直接将其他行设置为纯文本。默认值为10000，可以设置为Infinity 来关闭此功能。

viewportMargin: 整数指定要在当前滚动到视图中的内容上方和下方呈现的行数。这会影响滚动时更新的行数。通常应使用默认值10。您可以将该值设置为“Infinity”以始终渲染整个文档。注意：此设置会影响处理大型文档时的性能。