JustYeh的前端博客

web代码编辑器CodeMirror

这两天有个项目需要使用在线代码编辑器,要求支持语法高亮、自动缩进、可切换高亮语法框架等要求。最终我选择了CodeMirror,发现这个插件确实不错,将其记录在我的博客中。

本文有部分内容参考自知乎网友var dump的文章。连接:[https://zhuanlan.zhihu.com/p/22163474](https://zhuanlan.zhihu.com/p/22163474

在线DEMO

关于CodeMirror

CodeMirror是一个用于在浏览器编辑代码的javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,CodeMirror提供丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求。

CodeMirror支持大量语言的语法高亮,包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等,以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外,CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。

CodeMirror采用MIT开源许可协议,目前已经被集成到各种应用程序中,如Adobe Brackets、CoDev、Light Table等开发环境,还被作为各种SQL、Haxe、JavaScript在线编辑器的基础库来使用。

今天(2017-02-23)到git下载代码的时候,发现里面的demo调不通,原来是lib文件夹缺少了codemirror.js文件,所以大家在使用的时候还是到官网下载比较好。

特性

下面是CodeMirror的主要特性:

  • 语法高亮
  • 支持超过100中语言
  • 动态、可组合的语法提示模块
  • 代码自动完成
  • 代码折叠
  • 可配置快捷键
  • Vim、Emacs和Sublime Text键盘映射绑定
  • 文本搜索和替换
  • 括号和标签匹配
  • 支持更改主题
  • 显示行号
  • 支持拆分视图
  • 插件支持和丰富的API
  • 支持各种现代浏览器、IE7以上

使用

下面是我在项目里面使用CodeMirror的代码,通过这个demo,你可以了解到以下内容:

  1. 切换主题
  2. 设置获取内容
  3. 多实例支持
  4. 切换语言
  5. ...

引入文件

CodeMirror的语言和主题文件成模块化组织,可能会引入比较多的文件:

<!--核心代码和样式-->
<link rel="stylesheet" href="js/codemirror-5.24.2/lib/codemirror.css"> 
<script src="js/codemirror-5.24.2/lib/codemirror.js"></script> 

<!--语言高亮支持文件:语言放在mode文件件中-->
<script src="js/codemirror-5.24.2/mode/clike/clike.js"></script>
<script src="js/codemirror-5.24.2/mode/xml/xml.js"></script>
<script src="js/codemirror-5.24.2/mode/javascript/javascript.js"></script>
<script src="js/codemirror-5.24.2/mode/vbscript/vbscript.js"></script>
<script src="js/codemirror-5.24.2/mode/css/css.js"></script>
<script src="js/codemirror-5.24.2/mode/sql/sql.js"></script>
<script src="js/codemirror-5.24.2/mode/htmlmixed/htmlmixed.js"></script>

<!--主题文件:主题放在theme文件件中-->
<link rel="stylesheet" href="js/codemirror-5.24.2/theme/icecoder.css">
<link rel="stylesheet" href="js/codemirror-5.24.2/theme/eclipse.css">

另外,下面这些文件也是比较常用的(本文中没有使用):

<!--引入js,绑定Vim-->
<link rel="stylesheet" href="codemirror-5.12/addon/dialog/dialog.css">
<script src="codemirror-5.12/keymap/vim.js"></script>
<script src="codemirror-5.12/addon/search/searchcursor.js"></script>
<!--改善vim输入命令时的样式-->
<script src="codemirror-5.12/addon/dialog/dialog.js"></script>

<!--支持代码折叠-->
<link rel="stylesheet" href="codemirror-5.12/addon/fold/foldgutter.css"/>
<script src="codemirror-5.12/addon/fold/foldcode.js"></script>
<script src="codemirror-5.12/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.12/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.12/addon/fold/comment-fold.js"></script>

<!--全屏模式-->
<link rel="stylesheet" href="codemirror-5.12/addon/display/fullscreen.css">
<script src="codemirror-5.12/addon/display/fullscreen.js"></script>

<!--括号匹配-->
<script src="codemirror-5.12/addon/edit/matchbrackets.js"></script>

<!--自动补全-->
<link rel="stylesheet" href="codemirror-5.12/addon/hint/show-hint.css">
<script src="codemirror-5.12/addon/hint/show-hint.js"></script>
<script src="codemirror-5.12/addon/hint/anyword-hint.js"></script>

页面

<div class="container">
<div class="codeEditor">
<div class="editor">
<textarea id="code"></textarea>
</div>
<div class="editor-seleteor">
<label>语言</label>
<select class="selector" onchange="selectLanguage(this)">
<option value="java">java</option>
<option value="html">html</option>
<option value="javascript">javascript</option>
<option value="css">css</option>
<option value="sql">sql</option>
<option value="c/c++">c/c++</option>
</select>
<label>主题</label>
<select class="selector" onchange="selectTheme(this)">
<option value="java">deault</option>
<option value="html">eclipse</option>
<option value="javascript">icecoder</option>
<option value="css">css</option>
<option value="sql">sql</option>
<option value="c/c++">c/c++</option>
</select>
</div>
</div>

调用

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: "text/x-c"
        width: "100%",
        height: "100%",
        keyMap: "default",
        lineWrapping: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        indentUnit: 4,
        showCursorWhenSelecting: true,
        extraKeys: {
            "Shift-Alt-Enter": function (cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
            "Ctrl-Space": "autocomplete",
            "Ctrl-F7": function () {
                $('#code_submit').click();
            }
        }
});
</script>

常见问题

设置/获取内容

//该方法得到的结果是经过转义的数据
editor.getValue();
//该方法得到的结果是未经过转义的数据
editor.toTextArea();
editor.getTextArea().value;

//如果是通过 JS 进行表单提交,可以在提交的 JS 代码中这样使用:
//将 Codemirror 的内容赋值给 Textarea
$("#content").text(editor.getValue());

//Codemirror赋值
editor.setValue('为codemirror赋值');

设置/获取属性值 在构造editor时相关的属性大多数都可以动态的指定。如设置显示行号可以不在构造editor时指出,只需构造出editor之后,调用setOption方法:

editor.setOption("lineNumbers",true);//是否显示行号
editor.setOption("theme","seti");//设置主题

获取属性值,也有对应的setOption方法,可以用:editor.getOption("属性名")来获取editor某属性的值,在本例中:

editor.getOption("theme")

将返回"seti"。

更改外观

可以自定义编辑器的大小,只需设置如下样式即可:

<style type="text/css">
     .CodeMirror{border:1px solid black;font-   size:15px;width:100px;height:100px}
</style>

快捷键绑定

在extra中可绑定函数到按键上,例如:

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
    mode:"text/x-java",
    extraKeys:{
        "Ctrl-Space":"autocomplete",
        "Ctrl-F7":function () {
                    alert("绑定了Ctrl-F7");
                  },
        "Shift-Alt-Enter": function (cm) {
                   cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                  }
    }
});

需要注意的是,如果将esc键绑定了某函数,那么Vim可能无法正常工作。

配置项

Code Mirror非常强大,上面的例子说明了其基本的使用方法,足够应付大多数使用场景,当然还有很多功能未能一一说明。如要深入学习,请阅读其官方文档。下面是部分内容:

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

用来添加额外的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

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

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />ame="renderer" content="webkit">
<title>轻量级web富文本编辑器wangEditor介绍</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eaebec;}
.container{
width: 800px;
background: #fff;
margin: 0 auto;
padding: 15px 15px 45px 15px;
}
.codeEditor{
position: relative;
}
.codeEditor .editor{
border: solid 1px #c2c2c2;
height: 300px;
}
.codeEditor .editor-seleteor{
position: absolute;
bottom: 15px;
left: 15px;
}
.codeEditor .editor-seleteor select{
display:inline-block;
width:100px;
height:20px;
height: 20px;
border: solid 1px #c2c2c2;
width: 100px;
}
.btns{
padding-top:100px;
text-align:right;
}
.btns button{
display:inline-block;
margin-left:10px;
padding:3px 6px;
}
</style>
<!--核心样式-->
<link rel="stylesheet" href="js/codemirror-5.24.2/lib/codemirror.css"> 
<!--引入css文件,用以支持主题-->
<link rel="stylesheet" href="js/codemirror-5.24.2/theme/icecoder.css">k rel="stylesheet" href="js/codemirror-5.24.2/theme/eclipse.css">

<!--核心库文件-->
<script src="js/codemirror-5.24.2/lib/codemirror.js"></script> 

<!--语法文件:加入高亮支持-->
<script src="js/codemirror-5.24.2/mode/clike/clike.js"></script>
<script src="js/codemirror-5.24.2/mode/xml/xml.js"></script>
<script src="js/codemirror-5.24.2/mode/javascript/javascript.js"></script>
<script src="js/codemirror-5.24.2/mode/vbscript/vbscript.js"></script>
<script src="js/codemirror-5.24.2/mode/css/css.js"></script>
<script src="js/codemirror-5.24.2/mode/sql/sql.js"></script>
<script src="js/codemirror-5.24.2/mode/htmlmixed/htmlmixed.js"></script>


</head>
<body>
<div class="container">
<div class="codeEditor">
<div class="editor">
<textarea id="code"></textarea>
</div>
<div class="editor-seleteor">
<label>语言</label>
<select class="selector" onchange="selectLanguage(this)">
<option value="java">java</option>
<option value="html">html</option>
<option value="javascript">javascript</option>
<option value="css">css</option>
<option value="sql">sql</option>
<option value="c/c++">c/c++</option>
</select>
<label>主题</label>
<select class="selector" onchange="selectTheme(this)">
<option value="java">deault</option>
<option value="html">eclipse</option>
<option value="javascript">icecoder</option>
<option value="css">css</option>
<option value="sql">sql</option>
<option value="c/c++">c/c++</option>
</select>
</div>
</div>
<div class="btns">
<button onclick="getVal()">getVal</button> onclick="setVal()">setVal</button>
</div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: {name: "text/x-java"},
        width: "100%",
        height: "100%",
        theme:"icecoder",
        keyMap: "default",
        lineWrapping: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        indentUnit: 4,
        showCursorWhenSelecting: true,
        extraKeys: {
            "Shift-Alt-Enter": function (cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
            "Ctrl-Space": "autocomplete",
            "Ctrl-F7": function () {
                $('#code_submit').click();
            }
        }
    });

    function selectLanguage(obj) {
    var lang = obj.value;
    var mode = '';
    switch (lang){
    'htmlmixed';break;
    l': mode='text/x-sql'; break;
    gth != ''){
    ('mode',mode)
    }

    function getVal(){
    console.log($(".CodeMirror-sizer").html())
    var val = editor.getValue();
    console.log(val)
    }
</script>
</body>
</html>