手机版

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

时间: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看起来更好。

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

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

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

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

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

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

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

如果要设置代码框的大小,应该怎么做?

editor.setSize('800px ',' 950 px ');//设置代码框的长度和宽度

另外,如果想给代码框赋值,应该怎么做?

editor . setvalue(“”);//给代码框赋值

editor . GetValue();//获取代码框的值

如果要在其他地方设置新属性,可以这样写:

editor.setOption('readOnly ',true);//像这样

摘要

上面大概讲了如何使用Code Mirror,让我们来看看效果

我能感觉到自己!

其中涉及的所有代码都可以在GitHub:https://github.com/zhisheng17/CoderBlog/tree/master/CodeMirror下载

文章为原创,转载时请注明原地址

版权声明:使用代码镜像创建您自己的带高亮显示的在线代码编辑器是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。