一、介紹
CodeMirror是基於JavaScript設計的一款文本編輯器，提供豐富的api，具有實時在線代碼編輯、代碼高亮顯示、代碼自動補全等多種功能，支持C、C++、C#、Java等多種編程語言。
二、下載
https://codemirror.net/codemirror.zip
三、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./lib/codemirror.css"> <link rel="stylesheet" href="theme/monokai.css"> <style> .CodeMirror { border: 1px solid black; font-size: 13px } </style> </head> <body> <textarea id="code" name="code"> function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1"); } </textarea> </body> <script src="lib/codemirror.js"></script> <script src="addon/edit/matchbrackets.js"></script> <script src="addon/selection/active-line.js"></script> <script src="keymap/sublime.js"></script> <script src="mode/javascript/javascript.js"></script> <script> let editor = CodeMirror.fromTextArea(document.getElementById("code"), { mode: 'javascript', //設置編譯器編程語言關聯內容，需要引入mode/javascript/javascript.js lineNumbers: true, //顯示行號 smartIndent: true, //自動縮進是否開啟 indentUnit: 4, //縮進單位 theme: 'monokai', //設置主題 styleActiveLine: true, //設置光標所在行高亮，需要引入addon/selection/active-line.js keyMap: 'sublime', // 快捷鍵，default使用默認快捷鍵，除此之外包括emacs，sublime，vim快捷鍵，使用需引入工具,keymap/sublime.js extraKeys: {'Ctrl-Q': 'autocomplete'}, //設置快捷鍵 }); </script> </html>
四、說明
初始化編譯器時可設置屬性：
- value:初始內容
- Mode:設置編譯器編程語言關聯內容，對應的mine值
- Theme:編譯器的主題，需要引入對應的包
- tabSize：tab的空格寬度
- lineNumbers：是否使用行號
- smartIndent：自動縮進是否開啟
- indentUnit：縮進單位
- keyMap：快捷鍵，default使用默認快捷鍵，除此之外包括emacs，sublime，vim快捷鍵，使用需引入工具
- extraKeys 快捷鍵,例如 {“Ctrl-Q”: “autocomplete”}：自動補全使用需要引入工具：
- extraKeys的快捷鍵綁定命令：
- selectAllCtrl-A ：選擇編輯器的全部內容。
- killLine:Emacs式的清除行。用於刪除行內光標后的內容。如果只包含空白字符，行尾的新行(應該是指換行 字符)也會被刪除。
- deleteLine :刪除光標所在整行，包括行尾的新行。
- delLineLeft:刪除行內光標前的內容。
- delWrappedLineLeft:刪除光標所在可見行左邊到光標處的部分。（這里是針對在行內有換行顯示的情況，也就是說可能不是一行全部處理，而是只處理行的一部分）
- delWrappedLineRight：刪除光標所在可見行光標處到右邊的部分。（同上）
- undo：撤消最后一次更改。
- redo:重做最后一次撤消更改。
- undoSelection:撤消最后一次選擇的更改，如果沒有選擇更改，那么就撤消最后一次文本更改。
- redoSelection:重做最后一次選擇的更改，如果沒有選擇更改，那么就重做最后一次文本更改。
- goDocStart:移動光標到文檔開始處。
- goDocEnd:移動光標到文檔結束處。
- goLineStart:移動光標到行開始處。
- goLineStartSmartHome:移動光標到行文字開始處，如果光標已經在那，那么就移動到行的真正開始處。
- goLineEnd:移動光標到行結束處。
- goLineRight:移動光標到可見行右邊。
- goLineLeft：移動光標到可見行左邊。如果行內有換行，那么可能不會移動到行開始處。
- goLineLeftSmart：移動光標到行文字開始處，如果光標已經在那，那么就移動到行的真正開始處。
- goLineUp：移動光標到上一行。
- goLineDown：移動光標到下一行。
- goPageUp：移動光標到上一屏，（每次）向上滾動相同距離。
- goPageDown：移動光標到下一屏，（每次）向下滾動相同距離。
- goCharLeft：光標向左移動一個字符，如果在光標行首，那么移動到前一行。
- goCharRight：光標向右移動一個字符，如果在光標行尾，那么移動到后一行。
- goColumnLeft:光標向左移動一個字符，但是不會超過行邊界。
- goColumnRight：光標向右移動一個字符，但是不會超過行邊界。
- goWordLeft:光標移動到前一個詞開始處。
- goWordRight：光標移動到后一個詞結束處。
- goGroupLeft：移動光標到光標前的組的左邊。組是詞的擴展，擴展到標點符號，新行或者是多個空白字符。
- goGroupRight：移動光標到光標后的組的右邊。組是詞的擴展，擴展到標點符號，新行或者是多個空白字符。
- delCharBefore:刪除光標前的一個字符。
- delCharAfter:刪除光標后的一個字符。
- delWordBefore:刪除光標前的一個詞。
- delWordAfter:刪除光標后的一個詞。
- delGroupBefore：刪除光標前的一個組。
- delGroupAfter：刪除光標后的一個組。
- indentAuto：自動縮進當前行或選中行。
- indentMore：縮進當前行或選中行一個縮進單位。
- indentLess：反縮進當前行或選中行一個縮進單位。（移除一個縮進單元）
- insertTab：在光標處插入Tab字符。
- insertSoftTab：在光標處插入與Tab字符等寬的空格字符。
- defaultTabTab：如果有選中行，則縮進一個縮進單位；如果沒有選擇行，則插入一個Tab字符。
- transposeChars：交換光標前后的字符。
- newlineAndIndentEnter：插入新行並且自動縮進。
- toggleOverwriteInsert：反轉overwrite標志。
- save：只存在快捷鍵中，核心庫未定義。這是為了給用戶編碼提供一個簡單的方法來定義保存命令。
- find：查找。
- findNext:向前查找。
- findPrev:向后查找。
- replace:替換。
- replaceAll:全部替換。
- readOnly：設置為只讀true/false;也可設置為"nocursor"失去焦點
- Autofocus：初始時是否自動獲取焦點boolean
- styleActiveLine: 設置光標所在行高亮true/false
- scrollbarStyle: 設置滾動條,默認為"null"為不顯示的滾動條，可以使用提供的其他滾動條：“simple”,"overlay"選擇內側與外側的滾動條
動態設置CodeMirror屬性：(以設置支持語言mode為例)
- editor.setOption("mode"，"javascript")
編譯器的事件觸發器：
- editor.on("change",function(){ //事件觸發后執行事件 alert("change") });
觸發器事件：
- “changes”：每次編輯器內容更改時觸發
- “beforeChange”：事件在更改生效前觸發
- “cursorActivity”：當光標或選中(內容)發生變化，或者編輯器的內容發生了更改的時候觸發。
- “keyHandled”:快捷鍵映射(key map)中的快捷鍵被處理(handle)后觸發
- “inputRead”:當用戶輸入或粘貼時編輯器時觸發。
- “electrictInput”:收到指定的electrict輸入時觸發
- “beforeSelectionChange”:此事件在選中內容變化前觸發
- “viewportChange”：編輯器的視口( view port )改變（滾動，編輯或其它動作）時觸發
- “gutterClick”：編輯器的gutter(行號區域)點擊時觸發
- “focus”：編輯器收到焦點時觸發
- “blur”:編輯器失去焦點時觸發
- “scroll”:編輯器滾動條滾動時觸發
- “keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件觸發器
方法：
- editor.setValue(“Hello Kitty”)：設置編輯器內容
- editor.getValue()：獲取編輯器內容
- editor.getLine(n):獲取第n行的內容
- editor.lineCount()：獲取當前行數
- editor.lastLine()：獲取最后一行的行號
- editor.isClean():boolean類型判斷編譯器是否是clean的
- editor.getSelection()：獲取選中內容
- editor.getSelections():返回array類型選中內容
- editor.replaceSelection(“替換后的內容”):替換選中的內容
- editor.getCursor():獲取光標位置,返回{line,char}
- editor.setOption("",""):設置編譯器屬性
- editor.getOption(""):獲取編譯器屬性
- editor.addKeyMap("",""):添加key-map鍵值，該鍵值具有比原來鍵值更高的優先級
- editor.removeKeyMap（""）:移除key-map
- editor.addOverlay(""):Enable a highlighting overlay…沒試出效果
- editor.removeOverlay（""）:移除Overlay
- editor.setSize(width,height):設置編譯器大小
- editor.scrollTo(x,y):設置scroll到position位置
- editor.refresh():刷新編輯器
- editor.execCommand(“命令”):執行命令
注意：mode問價夾中有設置各語言的示例