CodeMirror(在线代码编辑器) v5.59.2官方版

CodeMirror(在线代码编辑器),CodeMirror在线代码编辑器，使用JavaScript开发，CodeMirror用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法突出显示，以帮助阅读和编辑复杂的代码,您可以免费下载。

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

功能介绍

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

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

自动完成

代码折叠

可配置的密钥绑定。

Vim、Emacs和崇高的文本绑定系统。

搜索和替换界面。

匹配括号和标签。

支持拆分视图。

橡胶衬里机集成。

混合字体大小和样式。

各种主题。

调整大小以适合内容。

嵌入式和块状小部件。

可编程沟渠

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

双向文本支持

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

施用方式

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

如何使用

要使用代码镜像，必须引入以下两项：

link rel='样式表' href=' code mirror-5 . 31 . 0/lib/code mirror . CSS '/

脚本src=' code mirror-5 . 31 . 0/lib/code mirror . js '/脚本

接下来，我们将在模式目录下的编辑器中参考与要编辑的语言相对应的js文件。这里，以Groovy为例：

！- groovy代码亮点-

脚本src=' code mirror-5 . 31 . 0/mode/groovy/groovy . js '/脚本

如果你想让Java代码支持代码高亮显示，你需要导入我从网上下载的clike.js(我已经把它放在我的GitHub里了)。

！-必须引入Java代码亮点-

脚本src=' code mirror-5 . 31 . 0/clike . js '/脚本

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

然后就像前面说的，第一次进入代码镜像官网，觉得那些编辑很丑，可能是主题丑。我在这里推荐一个好的主题，就介绍如下：

！-引入css文件来支持主题-

link rel='样式表' href=' code mirror-5 . 31 . 0/主题/dracula.css'/

如果您仍然希望编辑器支持折线，请按照以下步骤操作：

！-支持代码折叠-

link rel='样式表' href=' code mirror-5 . 31 . 0/addon/fold/fold gutter . CSS '/

脚本src=' code mirror-5 . 31 . 0/addon/fold/fold code . js '/脚本

脚本src=' code mirror-5 . 31 . 0/addon/fold/fold gutter . js '/脚本

脚本src=' code mirror-5 . 31 . 0/addon/fold/brake-fold . js '/脚本

脚本src=' code mirror-5 . 31 . 0/addon/fold/comment-fold . js '/脚本

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

创建编辑器

在实际项目中，body的整个内容一般不会直接作为编辑器的容器。最常见的是使用textarea。我在这里使用了文本区。

！开始编码

textarea类=' form-control ' id=' code ' name=' code '/text area

！-结束代码-

下一步是创建一个编辑器。

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

var editor=codemirror . fromtextarea(document . getelementbyid(' code ')，{ 0

});

是不是有点单调？

是的，我也可以在上面设置一些属性：(充分利用我一开始介绍的文件)。

Mode: 'text/groovy '，//实现groovy代码高亮显示。

Mode: 'text/x-java '，//实现java代码高亮显示。

LineNumbers: true，//显示行号。

主题：《德古拉》//设置主题。

换行：为真。//代码折叠。

foldGutter: true，

gutters :[' CodeMirror-行号'，' CodeMirror-foldgutter']，

匹配括号：为真。//括号匹配。

//readO nly: true，//只读。

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

以下是一些例子：

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

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

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

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

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

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

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

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

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

extraKeys:对象使用不同于以前的键映射配置的快捷键绑定编辑器。

lineWrapping:布尔值是当行很长时文本是换行还是滚动，默认值是滚动。

行号3360布尔值是否在编辑器的左侧显示行号。

第一个行号：整数行号从哪个数字开始，默认值为1。

行号格式化程序：函数(第：行整数)字符串使用函数设置行号。

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

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

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

Covertnextrollbar:布尔值当启用fixedgutter并且有水平滚动条时，默认情况下，装订线将显示在滚动条的最左侧。当该项设置为真时，装订线将被具有代码镜像-装订线-填充类的元素阻挡。InputStyle:字符串选择CodeMirror如何处理输入和焦点。Textarea和contenteditable输入模式在核心库中定义。在移动浏览器上，默认值为contenteditable，在桌面浏览器上，默认值为textarea。在内容可编辑模式下，更好地支持IME和屏幕阅读器。

只读：布尔值|字符串编辑器是只读的。如果设置为预设值“nocursor”，除非设置为只读，否则编辑区域不会获得焦点。

Showcursorwhenselecting :布尔值选择时是否显示光标，默认值为false。

Wisecopycut:当boolean被启用时，如果在复制或剪切过程中没有选择任何文本，光标所在的整行将被自动操作。

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

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

Tabindex : tabindex:整数编辑器。

自动对焦：布尔型是否在初始化期间自动对焦。默认情况下，它是关闭的。但是，当使用textarea并且没有显式指定值时，它将自动设置为true。

DragDrop:默认情况下，布尔值是否允许拖放为真。

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

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

光标滚动边界：数字当光标靠近可见区域的边界时，光标上下的距离。默认值为0。

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

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

WorkTime，workDelay:数字通过一个假的后台线程突出显示工作时长，然后使用超时来休息workDelay时长。默认值为200和300。(我不知道这个函数在说什么。)

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

FlattenSpans:布尔值默认情况下，CodeMirror将两个具有相同类的Spans合并为一个。通过将此项设置为false来禁用此功能。

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

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

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