codeMirror配置

介紹

CodeMirror是一款在線的支持語法高亮的代碼編輯器。官網：http://codemirror.net/

下載后，解壓開到的文件夾中，lib下是放的是核心庫和核心css，模式下放的是各種支持語言的語法定義，主題目錄下是支持的主題樣式。一般在開發中，添加lib下的引用和模式下的引用就夠了。

使用示例

首先，要引用是lib目錄下的codemirror.js，還有一個就是同目錄下的codemirror.css文件

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

接下來要引用的就是在mode目錄下編輯器中要編輯的語言對應的js文件，下面以js文件為例：

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

引用的文件用于支持對應語言的語法高亮。

然后，調用腳本以創建編輯器：

var myCodeMirror = CodeMirror(document.body);

這里的調用會在body中添加編輯器，這里因為直接在上面引用了javascript.js，所以這個編輯器會對javascript的關鍵字高亮顯示。

想要高級一點，給編輯器添加一些元素，也可以通過傳入配置參數來實現。

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

這樣，就給編輯器添加了行號。

上面說的是實現編輯器的最簡單的方式，然后在實際項目中，一般都不會直接把body作為編輯器的容器。而最常用的，是使用textarea。

要把 textarea 實現成一個支持高亮的編輯器，CodeMirror 提供了非常簡單的方法：

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

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

簡單例子:

vartextarea = document.getElementById('code');
vareditor = newMirrorFrame(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)。