CodeMirror(在線代碼編輯器)v5.54.0

CodeMirror(在線代碼編輯器)是一款“Online Source Editor”，基於Javascript，短小精悍，實時在線代碼高亮顯示，他不是某個富文本編輯器的附屬產品，他是許多大名鼎鼎的在線代碼編輯器的基礎庫。

【功能介紹】

開箱即用，支持超過100種語言

強大的、可組合的語言模式係統

自動完成 (XML)

代碼折疊

可配置的按鍵綁定

Vim、Emacs和Sublime文本裝訂係統

搜索和替換界麵

托架和標簽匹配

支持分割視圖

襯膠機整合

混合字體大小和風格

各種主題

可調整大小以適應內容

內嵌式和塊狀小部件

可編程水溝

使文本範圍具有風格化的、隻讀或原子化的文本範圍

雙向文字支持

許多其他方法和附加組件.....

【軟件特征】

完整解析

推薦的為CodeMirror 6編寫語言集成的方法包括完整的分析樹，這使代碼分析更容易，更強大。

無障礙

這個版本留給瀏覽器使用，而不是“偽造” JavaScript中的編輯過程。這使得它對於屏幕閱讀器和其他輔助工具更加透明。

觸摸屏支持

通過使用本機可編輯控件，您可以將手機或平板電腦上的編輯器用於平台的本機選擇和編輯行為。

可擴展的

更加結構化的擴展接口使您能夠以健壯的方式實現複雜的擴展，而不會出現舊係統所涉及的競爭條件和複雜性。

模塊化的

係統的核心是非常通用的，甚至將語法高亮和行號槽等基本功能都實現為擴展，允許您在需要時省略或替換它們。

快速

通過仔細地僅完成需要完成的工作，即使在巨大的文檔和冗長的行中，該圖書館也能保持快速。

【使用方法】

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

如何使用

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

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

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

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

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

如果你還想讓你的編輯器支持代碼行折疊，請按照如下進行操作：

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

創建編輯器

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

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

//根據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,//括號匹配

//readO nly: 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和屏幕閱讀器支持更好。

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