CodeMirror(在线代码编辑器)

　　亲宝软件园为您提供CodeMirror(在线代码编辑器)的高速下载服务，当前页面下载的版本为5.54.0官方版，如需查看所有版本，可点击这里查看： 编译工具 代码编辑器

CodeMirror(在线代码编辑器)，运用JavaScript开发，CodeMirror用于编辑代码，并具有100多种言语形式和各种插件，可完成更高级的编辑功用。每种言语都带有功用齐全的代码和语法突出显现，以协助阅读和编辑复杂的代码。

功用引见

　　开箱即用，支持超越100种言语

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

　　自动完成 (XML)

　　代码折叠

　　可配置的按键绑定

　　Vim、Emacs和Sublime文本装订系统

　　搜索和交换界面

　　托架和标签匹配

　　支持分割视图

　　衬胶机整合

　　混合字体大小微风格

　　各种主题

　　可调整大小以顺应内容

　　内嵌式和块状小部件

　　可编程水沟

　　使文本范围具有作风化的、只读或原子化的文本范围

　　双向文字支持

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

运用办法

　　下载后，解压开得到的文件夹中，lib 下是放的是中心库和中心 css，mode 下放的是各种支持言语的语法定义，theme 目录下是支持的主题款式。普通在开发中，添加 lib 下的援用和 mode 下的援用就够了。

　　如何运用

　　下面两个是运用 Code Mirror 必需引入的：

　　<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css"/>

　　<script src="codemirror-5.31.0/lib/codemirror.js"></script>

　　接下来要援用的就是在 mode 目录下编辑器中要编辑的言语对应的 js 文件，这里以 Groovy 为例：

　　<!--groovy代码高亮-->

　　<script src="codemirror-5.31.0/mode/groovy/groovy.js"></script>

　　假如你想让 Java 代码也支持代码高亮，则需求引入我从网上下载下来的 clike.js（我曾经放到我的 GitHub 去了）

　　<!--Java代码高亮必需引入-->

　　<script src="codemirror-5.31.0/clike.js"></script>

　　援用的文件用于支持对应言语的语法高亮。

　　然后前面说了第一次进入 Code Mirror 官 网，觉得那些编辑器比拟丑，那可能是主题比拟丑，我这里引荐一款还不错的主题，只需依照如下引入即可：

　　<!--引入css文件，用以支持主题-->

　　<link rel="stylesheet" href="codemirror-5.31.0/themehttps://img.qb5200.com/download-x/dracula.css"/>

　　假如你还想让你的编辑器支持代码行折叠，请依照如下停止操作：

　　<!--支持代码折叠-->

　　<link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css"/>

　　<script src="codemirror-5.31.0/addon/fold/foldcode.js"></script>

　　<script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script>

　　<script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script>

　　<script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>

　　是不是这样引入就好了呢，当然不是啦

　　创立编辑器

　　在实践项目中，普通都不会直接把 body 整个内容作为编辑器的容器。而最常用的，是运用 textarea。这里我在 里运用个 textarea，

　　<!-- begin code -->

　　<textarea class="form-control" id="code" name="code"></textarea>

　　<!-- end code-->

　　接下来就是创立编辑器了。

　　//依据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: true,

　　gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

　　matchBrackets: true,//括号匹配

　　//readO nly: true, //只读

　　假如需求查看更多属性，能够去官 网查找，目前我只用到这些属性！

　　下面也罗列些吧：

　　indentUnit: integer 缩进单位，值为空格数，默许为2 。

　　smartIndent: boolean 自动缩进，设置能否依据上下文自动缩进（和上一行相同的缩进量）。默许为true。

　　tabSize: integer tab字符的宽度，默许为4 。

　　indentWithTabs: boolean 在缩进时，能否需求把 n*tab宽度个空格交换成n个tab字符，默许为false 。

　　electricChars: boolean 在输入可能改动当前的缩进时，能否重新缩进，默许为true （仅在mode支持缩进时有效）。

　　specialChars: RegExp 需求被占位符(placeholder)交换的特殊字符的正则表达式。最常用的是非打印字符。默许为：/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。

　　specialCharPlaceholder: function(char) → Element 这是一个接纳由specialChars选项指定的字符作为参数的函数，此函数会产生一个用来显现指定字符的DOM节点。默许状况下，显现一个红点（?），这个红点有一个带有前面特殊字符编码的提示框。

　　rtlMoveVisually: boolean Determines whether horizontal cursor movement through right-to-left (Arabic, Hebrew) text is visual (pressing the left arrow moves the cursor left) or logical (pressing the left arrow moves to the next lower index in the string, which is visually right in right-to-left text). The default is false on Windows, and true on other platforms.（这段完整不知道搞啥子鬼）

　　keyMap: string 配置快捷键。默许值为default，即 codemorrir.js 内部定义。其它在key map目录下。

　　extraKeys: object 给编辑器绑定与前面keyMap配置不同的快捷键。

　　lineWrapping: boolean 在长行时文字是换行(wrap)还是滚动(scroll)，默许为滚动(scroll)。

　　lineNumbers: boolean 能否在编辑器左侧显现行号。

　　firstLineNumber: integer 行号从哪个数开端计数，默许为1 。

　　lineNumberFormatter: function(line: integer) → string 运用一个函数设置行号。

　　gutters: array 用来添加额外的gutter（在行号gutter前或替代行号gutter）。值应该是CSS称号数组，每一项定义了用于绘制gutter背景的宽度（还有可选的背景）。为了能明白设置行号gutter的位置（默许在一切其它gutter的右边），也能够包含CodeMirror-linenumbers类。类名是用于传给setGutterMarker的键名(keys)。

　　fixedGutter: boolean 设置gutter跟随编辑器内容程度滚动（false）还是固定在左侧（true或默许）。

　　scrollbarStyle: string 设置滚动条。默许为”native”，显现原生的滚动条。中心库还提供了”null”款式，此款式会完整躲藏滚动条。Addons能够设置更多的滚动条形式。

　　coverGutterNextToScrollbar: boolean 当fixedGutter启用，并且存在程度滚动条时，在滚动条最左侧默许会显现gutter，当此项设置为true时，gutter会被带有CodeMirror-gutter-filler类的元素遮挡。 inputStyle: string 选择CodeMirror处置输入和焦点的方式。中心库定义了textarea和contenteditable输入形式。在挪动阅读器上，默许是contenteditable，在桌面阅读器上，默许是textarea。在contenteditable形式下对IME和屏幕阅读器支持更好。

　　read Only: boolean|string 编辑器能否只读。假如设置为预设的值 “nocursor”，那么除了设置只读外，编辑区域还不能取得焦点。

　　showCursorWhenSelecting: boolean 在选择时能否显现光标，默许为false。

　　lineWiseCopyCut: boolean 启用时，假如在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行。

　　undoDepth: integer 最大吊销次数，默许为200（包括选中内容改动事情） 。

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

　　tabindex: integer 编辑器的tabindex。

　　autofocus: boolean 能否在初始化时自动获取焦点。默许状况是关闭的。但是，在运用textarea并且没有明白指定值的时分会被自动设置为true。

　　dragDrop: boolean 能否允许拖放，默许为true。

　　allowDropFileTypes: array 默许为null。当设置此项时，只接纳包含在此数组内的文件类型拖入编辑器。文件类型为MIME称号。

　　cursorBlinkRate: number 光标闪动的距离，单位为毫秒。默许为530。当设置为0时，会禁用光标闪动。负数会躲藏光标。

　　cursorScrollMargin: number 当光标靠近可视区域边境时，光标间隔上方和下方的间隔。默许为0 。

　　cursorHeight: number 光标高度。默许为1，也就是撑满行高。对一些字体，设置0.85看起来会更好。

　　resetSelectionOnContextMenu: boolean 设置在选择文本外点击翻开上下文菜单时，能否将光标挪动到点击处。默许为true。

　　workTime, workDelay: number 经过一个假的后台线程高亮 workTime 时长，然后运用 timeout 休息 workDelay 时长。默许为200和300 。（完整不懂这个功用是在说啥）

　　pollInterval: number 指明CodeMirror向对应的textarea滚动（写数据）的速度（取得焦点时）。大多数的输入都是经过事情捕获，但是有的输入法（如IME）在某些阅读器上并不会生成事情，所以运用数据滚动。默许为100毫秒。

　　flattenSpans: boolean 默许状况下，CodeMirror会将运用相同class的两个span兼并成一个。经过设置此项为false禁用此功用。

　　addModeClass: boolean 当启用时（默许禁用），会给每个标志添加额外的表示生成标志的mode的以cm-m开头的CSS款式类。例如，XML mode产生的标志，会添加cm-m-xml类。

　　maxHighlightLength: number 当需求高亮很长的行时，为了坚持响应性能，当抵达某些位置时，编辑器会直接将其他行设置为纯文本(plain text)。默许为10000，能够设置为Infinity来关闭此功用。

　　viewportMargin: integer 指定当前滚动到视图中内容上方和下方要渲染的行数。这会影响到滚动时要更新的行数。通常状况下应该运用默许值10。能够设置值为Infinity一直渲染整个文档。留意：这样设置在处置大文档时会影响性能。

　　Apifox(接口调试工具)