CodeMirror(在线代码编辑器) v5.59.2 中文版 免费版

CodeMirror是一款功能强大的代码编辑软件。CodeMirror采用功能强大、可组合的语言模式系统，提供100多种语言模式和各种插件，为用户实现更高级的代码编辑功能。

功能介绍

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

自动完成(XML)

代码折叠

可配置的密钥绑定

Vim、Emacs和Sublime文本绑定系统

搜索和替换界面

匹配支架和标签。

支持拆分视图

衬胶机一体化

混合字体大小和样式

各种主题

调整大小以适应内容。

嵌入和阻止小部件

可编程沟

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

双向文本支持

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

格式教程

npm安装-保存SQL-格式化程序

2.然后介绍sql-formatter.js文件。

从“sql-formatter”导入sqlFormatter

3.接下来，对需要格式化的代码调用这个方法就可以了。

/*代码格式*/

format()& # 123；

/*获取文本编辑器内容*/

让sqlContent =

sqlContent = this . editor . getvalue()；

/*格式化sql内容并将其放入编辑器*/

this . editor . setvalue(SQL formatter . format(sqlContent))；

}

4.以下截图是格式化前后的区别。

使用方法

如何使用

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

下一个引用是对应于mode目录下的编辑器中要编辑的语言的js文件。这里，以Groovy为例:

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

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

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

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

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

创建编辑器

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

下一步是创建编辑器。

Http://根据DOM元素的id构造编辑器

var editor = code mirror . fromtextarea(document . getelementbyid(" code ")，& # 123；

});

是不是有点单调？

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

模式:“text/groovy”，http://实现groovy代码高亮

模式:“text/x-java”，http://实现java代码高亮

LineNumbers: true，http://显示行号

主题:《德古拉》，http://设置主题

换行:true，http:// code folding

foldGutter:没错，

gutters:[" code mirror-line numbers "，" CodeMirror-foldgutter"]，

match括号:true，http://括号匹配。

Http://readO nly: true，http:// read-only

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

以下是一些例子:

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在其他键映射目录下内部定义。

ExtraKeys: object用一个不同于以前的键映射配置的快捷键绑定编辑器。

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和屏幕阅读器。

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

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

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

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

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

Tabindex:整数编辑器的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: number当一个很长的行需要突出显示时，为了保持响应性，编辑器在到达某些位置时会直接将其他行设置为纯文本。默认值为10000，可以设置为无穷大来关闭该功能。

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