使用代码镜像创建您自己的带高亮显示的在线代码编辑器

时间：2021-09-01 来源：互联网编辑：宝哥软件园浏览：次

前提

写这个的目的是因为CodeMirror在之前的项目中已经使用过了，我觉得做一个在线代码编辑器挺好的。我也看到一些网站使用在线代码编辑。当然，我不知道他们是做什么的。这里我把公司项目中用到的部分拿出来，单独写一篇博客，把提取的部分代码提交给GitHub(地址)，以防以后可能会再次用到(可能会用到毕业设计中)。

简介

CodeMirror是一个支持语法高亮显示的在线代码编辑器。官方网站：http://codemirror.net/

可能只是看官网，我觉得那些网络编辑第一眼看上去有点丑。不管怎么说，我第一眼看到的感觉就是这样，但是经过我自己的微调，我也可以创建一个漂亮的在线代码编辑器。

官网可以下载。

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

如何使用

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

link rel='样式表' href=' code mirror-5 . 31 . 0/lib/code mirror . CSS ' rel=' external no follow '/script src=' http : code mirror-5 . 31 . 0/lib/code mirror . js '/接下来，脚本将在模式目录下的编辑器中引用与要编辑的语言对应的js文件。以Groovy为例：

！- groovy代码高亮-script src=' http : codemirror-5 . 31 . 0/mode/groovy/groovy . js '/script如果你想让Java代码支持代码高亮，你需要导入我从网上下载的clike.js(我已经把它放在我的GitHub里了)

！- Java代码高亮必须引入-script src=' http : codemirror-5 . 31 . 0/click . js '/script引用的文件支持对应语言的语法高亮。

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

！-引入css文件以支持主题-link rel='样式表' href=' code mirror-5 . 31 . 0/主题/dracula . CSS ' rel=' external nofollow '/如果您仍然希望编辑器支持行折叠，请按照以下步骤操作：

！-支持代码折叠-link rel='样式表' href=' code mirror-5 . 31 . 0/addon/Fold gutter . CSS ' rel=' external no follow '/script src=' http 3360 codemirror-5 . 31 . 0/addon/Fold/Fold code . js '/script script src=' http : codemirror-5 . 31 . 0/addon/Fold/Fold gutter . js '/script script src=' http : codemirror

创建编辑器

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

！- begin code - textarea类=' form-control ' id=' code ' name=' code '/text area！-end code-下一步是创建编辑器。

//根据DOM元素的id，构造一个editor vareditor=code mirror . fromtextrea(document . getelementbyid(' code ')，{})。是不是有点单调？

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

Mode: 'text/groovy '，/，//实现groovy代码高亮模式3360' text/x-Java '，//实现Java代码高亮行号3360 true，//显示行号主题： 'dracula '，//设置主题lineWrapping: true，//代码折叠折叠折叠槽： true，槽3360 ['代码镜像-行号'，'代码镜像-折叠槽']，匹配括号： true，//括号匹配//readOnly3如果需要看更多属性，可以去官网找。目前我只使用这些属性！

以下是一些例子：

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

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

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

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

如果输入可能改变当前缩进，ElectricChars:布尔值默认为真(仅在模式支持缩进时有效)。

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

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

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

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

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

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

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

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

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

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

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

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

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

ReadOnly:布尔值|字符串编辑器是只读的。如果设置为预设值“nocursor”，编辑区除了设置为只读外，无法获得焦点。

选择：布尔值时显示光标。默认值为假。

LineWisecopyCut :当启用布尔时，如果在复制或剪切时没有选择文本，光标所在的整行将被自动操作。

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

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

Tabindex : tabindex:整数编辑器。

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

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

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

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

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

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