在线代码编辑器 CODEMIRROR 配置说明

转自:http://www.hyjiacan.com/codemirror-config/

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网: http://codemirror.net/

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

使用示例

首先,要引用是 lib 目录下的 codemirror.js,还有一个就是同目录下的codemirror.css 文件


1

2

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

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

接下来要引用的就是在mode目录下编辑器中要编辑的语言对应的js文件,下面以js文件为例:


1

<script src="mode/javascript/javascript.js"></script>

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

然后,调用脚本以创建编辑器:


1

var myCodeMirror = CodeMirror(document.body);

这里的调用会在body中添加编辑器,这里因为直接在上面引用了javascript.js,所以这个编辑器会对javascript的关键字高亮显示。
想要高级一点,给编辑器添加一些元素,也可以通过传入配置参数来实现。


1

2

3

var myCodeMirror = CodeMirror(document.body,{

lineNumbers: true

});

这样,就给编辑器添加了行号。

上面说的是实现编辑器的最简单的方式,然后在实际项目中,一般都不会直接把body作为编辑器的容器。而最常用的,是使用textarea。
要把 textarea 实现成一个支持高亮的编辑器,CodeMirror 提供了非常简单的方法:


1

<textarea id="editor" name="editor"></textarea>


1

2

3

4

5

var myTextarea = document.getElementById(‘editor‘);

var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {

    mode: "text/javascript",

lineNumbers: true

});

配置说明

在使用CodeMirror的时候,不管是直接使用 CodeMirror() 还是使用 fromTextArea() ,都可以通过传递第二个参数来配置编辑器。
使用方法如下:


1

2

3

var myCodeMirror = CodeMirror(el, {

    // options...

});

或者


1

2

3

var myCodeMirror = CodeMirror.fromTextArea(el, {

    // options...

});

options 可以使用的参数

CodeMirror函数和它的fromTextArea方法都可以使用一个配置对象作为第二个参数。

value: string | CodeMirror.Doc
编辑器的初始值(文本),可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。

mode: string | object
通用的或者在CodeMirror中使用的与mode相关联的mime,当不设置这个值的时候,会默认使用第一个载入的mode定义文件。一般地,会使用关联的mime类型来设置这个值;除此之外,也可以使用一个带有name属性的对象来作为值(如:{name: “javascript”, json: true})。可以通过访问CodeMirror.modes和CodeMirror.mimeModes获取定义的mode和MIME。

lineSeparator: string|null
明确指定编辑器使用的行分割符(换行符)。默认(值为null)情况下,文档会被 CRLF(以及单独的CR, LF)分割,单独的LF会在所有的输出中用作换行符(如:getValue)。当指定了换行字符串,行就只会被指定的串分割。

theme: string
配置编辑器的主题样式。要使用主题,必须保证名称为 .cm-s-[name] (name是设置的theme的值)的样式是加载上了的。当然,你也可以一次加载多个主题样式,使用方法和html和使用类一样,如: theme: foo bar,那么此时需要cm-s-foo cm-s-bar这两个样式都已经被加载上了。

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<string>
用来添加额外的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和屏幕阅读器支持更好。

readOnly: 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<string>
默认为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始终渲染整个文档。注意:这样设置在处理大文档时会影响性能。

时间: 2024-12-14 05:55:04

在线代码编辑器 CODEMIRROR 配置说明的相关文章

在线代码编辑器CodeMirror简介

1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便.如果想看效果图,可移步到这里----CodeOnline,这是我做的一个小项目,其中代码编辑器的就是用Code Mirror实现的. 2.使用Code Mirror 下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器,并对其常

在线代码编辑器---codemirror插件

1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. instance是一个当前的codemirror对象,changeObj是一个{from,to,text[,removed][,origin]}对象.其中from,to分别表示起始行对象和结束行对象,行对象包括ch:改变位置距离行头的间隔字符,line:改变的行数.text是一个字符串数组表示被修改的

20个最强的基于浏览器的在线代码编辑器

20个最强的基于浏览器的在线代码编辑器,你听过或者用过吗? 1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabblet 跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题.为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧.于是,jsFiddle.JSBin等前端代码的在线测试工具应

简要揭秘在线代码编辑器

前言 好像园里没啥帖子介绍在线代码编辑器,网上也多少相关资料,我做在线代码编辑器http://www.wcodei.com/的时候走了一堆的弯路,现在分享一下经验吧,我记性很差,就只能想到哪儿写到哪儿了,希望大家别介意. 一.所见即所得编辑器与代码编辑器的技术对比 两者看上去貌似很相似,都不是传统的editarea,都需要编辑器中显示的内容能够支持带颜色. 所见即所得编辑器的技术核心就是contenteditable="true"属性,只要在一个html容器中使用该属性,则该html容

多语言在线代码编辑器,可运行程序

在线代码编辑器,网址:http://www.mcqyy.com/RunCode/c/ 可支持的语言有: php5.3.php5.4.php5.6.php7.python2.7.python3.C#.java.shell.c语言.c++.go.lua.perl.ruby.nodejs.Objective-C.erlang.rust.R语言.scala.haskell.D语言 如下图: 也可以在首页上找到链接,首先打开首页http://www.mcqyy.com/,然后在页面的最下面的“实用工具”中

CodeMirror:基于JavaScript的代码编辑器

官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionalit

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.2.5+ mybaits3.3  SSM 普通java we

java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

[HTML5]网页代码编辑器

本文介绍18款极具价值的网页代码编辑器.过两天筹备好了开始我的那个小项目,其中要用到下面的东东,觉得特别不错,特此记录下! 1.Codeanywhere Codeanywhere是运行在浏览器上的代码编辑器,内嵌一个强大的FTP客户端.目前支持多数流行的网页格式(HTML.PHP.JavaScript.CSS和XML). Codeanywhere支持编辑多种类型的文件,集成了桌面编辑器中所有好的特征:高亮显示语法.自动填充代码.智能缩进.支持无限次的撤销和重做.无数个tabs. 2.CodeRu