前提

寫這個的目的是因為之前專案裡用到過 CodeMirror，覺得作為一款線上程式碼編輯器還是不錯，也看到過有些網站用到過線上程式碼編輯，當然我不知道他們是用什麼做的，這裡我把公司專案裡用到的那部分抽出來，單獨寫篇部落格，並把抽出來的那部分程式碼提交到 GitHub 去（地址），以防日後可能會再次用到（沒準畢業設計裡可能用的到）。

簡單介紹

可能光看官網，第一眼覺得那些線上編輯器有點醜，反正第一眼給我的感覺就是這樣子，但是經過自己的細調，也能打造出一款精美的線上程式碼編輯器。

官網可以把它下載下來。

下載後，解壓開得到的資料夾中，lib 下是放的是核心庫和核心 css，mode 下放的是各種支援語言的語法定義，theme 目錄下是支援的主題樣式。一般在開發中，新增 lib 下的引用和 mode 下的引用就夠了。

如何使用

下面兩個是使用 Code Mirror 必須引入的：

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

接下來要引用的就是在 mode 目錄下編輯器中要編輯的語言對應的 js 檔案，這裡以 Groovy 為例：

<!--groovy程式碼高亮-->
<script src="codemirror-5.31.0/mode/groovy/groovy.js"
 
></script>

如果你想讓 Java 程式碼也支援程式碼高亮，則需要引入我從網上下載下來的 clike.js（我已經放到我的 GitHub 去了）

<!--Java程式碼高亮必須引入-->
<script src="codemirror-5.31.0/clike.js"></script>

引用的檔案用於支援對應語言的語法高亮。

然後前面說了第一次進入 Code Mirror 官網，覺得那些編輯器比較醜，那可能是主題比較醜，我這裡推薦一款還不錯的主題，只需按照如下引入即可：

<!--引入css檔案，用以支援主題-->
 

<link rel="stylesheet" href="codemirror-5.31.0/theme/dracula.css"/>

如果你還想讓你的編輯器支援程式碼行摺疊，請按照如下進行操作：

<!--支援程式碼摺疊-->
<link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css"/>
<script src="codemirror-5.31.0/addon/fold/foldcode.js"></script>
<script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>

是不是這樣引入就好了呢，當然不是啦

建立編輯器

在實際專案中，一般都不會直接把 body 整個內容作為編輯器的容器。而最常用的，是使用 textarea。這裡我在 裡使用個 textarea，

<!-- begin code -->
<textarea class="form-control" id="code" name="code"></textarea>
<!-- end code-->

接下來就是建立編輯器了。

//根據DOM元素的id構造出一個編輯器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
});

是不是有點單調？

沒錯，我還可以在裡面給他設定些屬性：（充分利用我一開始引入的那些檔案）

mode: "text/groovy",    //實現groovy程式碼高亮
mode: "text/x-java", //實現Java程式碼高亮
lineNumbers: true,  //顯示行號
theme: "dracula",   //設定主題
lineWrapping: true, //程式碼摺疊
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true,    //括號匹配
//readOnly: true,        //只讀

如果需要檢視更多屬性，可以去官網查詢，目前我只用到這些屬性！

下面也列舉些吧：

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始終渲染整個文件。注意：這樣設定在處理大文件時會影響效能。

如果你要設定程式碼框的大小該怎麼做呢？

editor.setSize('800px', '950px');     //設定程式碼框的長寬

另外，如果你想給程式碼框賦值，該怎麼辦呢？

editor.setValue("");    //給程式碼框賦值
editor.getValue();    //獲取程式碼框的值

如果你再想在其他地方設定新的屬性，可以像下面這樣寫：

editor.setOption("readOnly", true); //類似這種

總結

上面就大概講了下 Code Mirror 怎麼使用，那麼我們來看看效果吧

我自我感覺還是可以的哈！

最後

fuck 無腦的推酷爬蟲，竟然把我所有文章最後的原創連結都給去掉了，這是我現在想到的一種對策方法。任何其他形式的轉載，也必須把我文章所有內容加上，不得做任何修改，否則請別轉載了！