codeMirror配置

今天药忘吃喽~ 2021-07-04 17:44 553阅读 0赞

## 介绍 ##

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

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

## 使用示例 ##

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

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

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

然后，调用脚本以创建编辑器：

var myCodeMirror = CodeMirror(document.body);

这里的调用会在`body`中添加编辑器，这里因为直接在上面引用了`javascript.js`，所以这个编辑器会对`javascript`的关键字高亮显示。

想要高级一点，给编辑器添加一些元素，也可以通过传入配置参数来实现。

var myCodeMirror = CodeMirror(document.body,{ 
                    lineNumbers:true
    
            });

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

上面说的是实现编辑器的最简单的方式，然后在实际项目中，一般都不会直接把`body`作为编辑器的容器。而最常用的，是使用`textarea`。

要把 `textarea` 实现成一个支持高亮的编辑器，`CodeMirror` 提供了非常简单的方法：

var myTextarea = document.getElementById('editor');
    
    var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, { 
    
        mode:"text/javascript",
        lineNumbers:true
    
        });

简单例子:

var textarea = document.getElementById('code');
    var editor = new MirrorFrame(CodeMirror.replace(textarea), { 
        height: "350px",//设置初始化高度
        content: textarea.value,//设置需要初始化的代码内容
        parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
        stylesheet: "css/jscolors.css",
        path: "js/",
        autoMatchParens: true
    });

例子2:

var textarea = document.getElementById('code'); 
    var editor = new MirrorFrame(CodeMirror.replace(textarea), {  
            height: "350px", 
            content: textarea.value, 
            parserfile: ["tokenizejavascript.js", "parsejavascript.js"], 
            stylesheet: "css/jscolors.css", 
            path: "js/", 
            autoMatchParens: true 
    });

## 配置说明 ##

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

var myCodeMirror = CodeMirror(el, { 
    
        //
     options...
    
    });

或者:

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。

**abSize: 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节点。默认情况下，显示一个红点（•），这个红点有一个带有前面特殊字符编码的提示框。

**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 。