介紹
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)。
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始終渲染整個文檔。注意：這樣設置在處理大文檔時會影響性能。