CodeMirror

CodeMirror是一個(gè)多功能的文本編輯器，使用JavaScript實(shí)現(xiàn)。它被設(shè)計(jì)為易于嵌入網(wǎng)頁(yè)和其他JavaScript應(yīng)用程序。它提供了一個(gè)代碼編輯界面，支持語(yǔ)法高亮顯示、代碼折疊、自動(dòng)完成以及代碼編輯器中常見(jiàn)的其他功能。CodeMirror可用于編輯各種編程和標(biāo)記語(yǔ)言，包括JavaScript、HTML、CSS、Python、Ruby等。它可以在麻省理工學(xué)院的許可下使用，并且有一個(gè)活躍的貢獻(xiàn)者社區(qū)。本文中WinWin7小編給大家分享的是CodeMirror綠色便攜版，使用更方便！

CodeMirror使用方法

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

下面兩個(gè)是使用 Code Mirror 必須引入的：

接下來(lái)要引用的就是在 mode 目錄下編輯器中要編輯的語(yǔ)言對(duì)應(yīng)的 js 文件，這里以 Groovy 為例：

如果你想讓 Java 代碼也支持代碼高亮，則需要引入我從網(wǎng)上下載下來(lái)的 clike.js（我已經(jīng)放到我的 GitHub 去了）

引用的文件用于支持對(duì)應(yīng)語(yǔ)言的語(yǔ)法高亮。

然后前面說(shuō)了第一次進(jìn)入 Code Mirror 官 網(wǎng)，覺(jué)得那些編輯器比較丑，那可能是主題比較丑，我這里推薦一款還不錯(cuò)的主題，只需按照如下引入即可：

如果你還想讓你的編輯器支持代碼行折疊，請(qǐng)按照如下進(jìn)行操作：

是不是這樣引入就好了呢，當(dāng)然不是啦

創(chuàng)建編輯器

在實(shí)際項(xiàng)目中，一般都不會(huì)直接把 body 整個(gè)內(nèi)容作為編輯器的容器。而最常用的，是使用 textarea。這里我在 里使用個(gè) textarea，

接下來(lái)就是創(chuàng)建編輯器了。

//根據(jù)DOM元素的id構(gòu)造出一個(gè)編輯器

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

});

是不是有點(diǎn)單調(diào)？

沒(méi)錯(cuò)，我還可以在里面給他設(shè)置些屬性：（充分利用我一開(kāi)始引入的那些文件）

mode: "text/groovy",    //實(shí)現(xiàn)groovy代碼高亮

mode: "text/x-java", //實(shí)現(xiàn)Java代碼高亮

lineNumbers: true,//顯示行號(hào)

theme: "dracula",//設(shè)置主題

lineWrapping: true,//代碼折疊

foldGutter: true,

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

matchBrackets: true,//括號(hào)匹配

//readO nly: true,        //只讀

如果需要查看更多屬性，可以去官 網(wǎng)查找，目前我只用到這些屬性！

下面也列舉些吧：

indentUnit: integer 縮進(jìn)單位，值為空格數(shù)，默認(rèn)為2 。

smartIndent: boolean 自動(dòng)縮進(jìn)，設(shè)置是否根據(jù)上下文自動(dòng)縮進(jìn)（和上一行相同的縮進(jìn)量）。默認(rèn)為true。

tabSize: integer tab字符的寬度，默認(rèn)為4 。

indentWithTabs: boolean 在縮進(jìn)時(shí)，是否需要把 n*tab寬度個(gè)空格替換成n個(gè)tab字符，默認(rèn)為false 。

electricChars: boolean 在輸入可能改變當(dāng)前的縮進(jìn)時(shí)，是否重新縮進(jìn)，默認(rèn)為true （僅在mode支持縮進(jìn)時(shí)有效）。

specialChars: RegExp 需要被占位符(placeholder)替換的特殊字符的正則表達(dá)式。最常用的是非打印字符。默認(rèn)為：/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。

specialCharPlaceholder: function(char) → Element 這是一個(gè)接收由specialChars選項(xiàng)指定的字符作為參數(shù)的函數(shù)，此函數(shù)會(huì)產(chǎn)生一個(gè)用來(lái)顯示指定字符的DOM節(jié)點(diǎn)。默認(rèn)情況下，顯示一個(gè)紅點(diǎn)（?），這個(gè)紅點(diǎn)有一個(gè)帶有前面特殊字符編碼的提示框。

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 配置快捷鍵。默認(rèn)值為default，即 codemorrir.js 內(nèi)部定義。其它在key map目錄下。

extraKeys: object 給編輯器綁定與前面keyMap配置不同的快捷鍵。

lineWrapping: boolean 在長(zhǎng)行時(shí)文字是換行(wrap)還是滾動(dòng)(scroll)，默認(rèn)為滾動(dòng)(scroll)。

lineNumbers: boolean 是否在編輯器左側(cè)顯示行號(hào)。

firstLineNumber: integer 行號(hào)從哪個(gè)數(shù)開(kāi)始計(jì)數(shù)，默認(rèn)為1 。

lineNumberFormatter: function(line: integer) → string 使用一個(gè)函數(shù)設(shè)置行號(hào)。

gutters: array 用來(lái)添加額外的gutter（在行號(hào)gutter前或代替行號(hào)gutter）。值應(yīng)該是CSS名稱數(shù)組，每一項(xiàng)定義了用于繪制gutter背景的寬度（還有可選的背景）。為了能明確設(shè)置行號(hào)gutter的位置（默認(rèn)在所有其它gutter的右邊），也可以包含CodeMirror-linenumbers類。類名是用于傳給setGutterMarker的鍵名(keys)。

fixedGutter: boolean 設(shè)置gutter跟隨編輯器內(nèi)容水平滾動(dòng)（false）還是固定在左側(cè)（true或默認(rèn)）。

scrollbarStyle: string 設(shè)置滾動(dòng)條。默認(rèn)為”native”，顯示原生的滾動(dòng)條。核心庫(kù)還提供了”null”樣式，此樣式會(huì)完全隱藏滾動(dòng)條。Addons可以設(shè)置更多的滾動(dòng)條模式。

coverGutterNextToScrollbar: boolean 當(dāng)fixedGutter啟用，并且存在水平滾動(dòng)條時(shí)，在滾動(dòng)條最左側(cè)默認(rèn)會(huì)顯示gutter，當(dāng)此項(xiàng)設(shè)置為true時(shí)，gutter會(huì)被帶有CodeMirror-gutter-filler類的元素遮擋。 inputStyle: string 選擇CodeMirror處理輸入和焦點(diǎn)的方式。核心庫(kù)定義了textarea和contenteditable輸入模式。在移動(dòng)瀏覽器上，默認(rèn)是contenteditable，在桌面瀏覽器上，默認(rèn)是textarea。在contenteditable模式下對(duì)IME和屏幕閱讀器支持更好。

read Only: boolean|string 編輯器是否只讀。如果設(shè)置為預(yù)設(shè)的值 “nocursor”，那么除了設(shè)置只讀外，編輯區(qū)域還不能獲得焦點(diǎn)。

showCursorWhenSelecting: boolean 在選擇時(shí)是否顯示光標(biāo)，默認(rèn)為false。

lineWiseCopyCut: boolean 啟用時(shí)，如果在復(fù)制或剪切時(shí)沒(méi)有選擇文本，那么就會(huì)自動(dòng)操作光標(biāo)所在的整行。

undoDepth: integer 最大撤消次數(shù)，默認(rèn)為200（包括選中內(nèi)容改變事件） 。

historyEventDelay: integer 在輸入或刪除時(shí)引發(fā)歷史事件前的毫秒數(shù)。

tabindex: integer 編輯器的tabindex。

autofocus: boolean 是否在初始化時(shí)自動(dòng)獲取焦點(diǎn)。默認(rèn)情況是關(guān)閉的。但是，在使用textarea并且沒(méi)有明確指定值的時(shí)候會(huì)被自動(dòng)設(shè)置為true。

dragDrop: boolean 是否允許拖放，默認(rèn)為true。

allowDropFileTypes: array 默認(rèn)為null。當(dāng)設(shè)置此項(xiàng)時(shí)，只接收包含在此數(shù)組內(nèi)的文件類型拖入編輯器。文件類型為MIME名稱。

cursorBlinkRate: number 光標(biāo)閃動(dòng)的間隔，單位為毫秒。默認(rèn)為530。當(dāng)設(shè)置為0時(shí)，會(huì)禁用光標(biāo)閃動(dòng)。負(fù)數(shù)會(huì)隱藏光標(biāo)。

cursorScrollMargin: number 當(dāng)光標(biāo)靠近可視區(qū)域邊界時(shí)，光標(biāo)距離上方和下方的距離。默認(rèn)為0 。

cursorHeight: number 光標(biāo)高度。默認(rèn)為1，也就是撐滿行高。對(duì)一些字體，設(shè)置0.85看起來(lái)會(huì)更好。

resetSelectionOnContextMenu: boolean 設(shè)置在選擇文本外點(diǎn)擊打開(kāi)上下文菜單時(shí)，是否將光標(biāo)移動(dòng)到點(diǎn)擊處。默認(rèn)為true。

workTime, workDelay: number 通過(guò)一個(gè)假的后臺(tái)線程高亮 workTime 時(shí)長(zhǎng)，然后使用 timeout 休息 workDelay 時(shí)長(zhǎng)。默認(rèn)為200和300 。（完全不懂這個(gè)功能是在說(shuō)啥）

pollInterval: number 指明CodeMirror向?qū)?yīng)的textarea滾動(dòng)（寫數(shù)據(jù)）的速度（獲得焦點(diǎn)時(shí)）。大多數(shù)的輸入都是通過(guò)事件捕獲，但是有的輸入法（如IME）在某些瀏覽器上并不會(huì)生成事件，所以使用數(shù)據(jù)滾動(dòng)。默認(rèn)為100毫秒。

flattenSpans: boolean 默認(rèn)情況下，CodeMirror會(huì)將使用相同class的兩個(gè)span合并成一個(gè)。通過(guò)設(shè)置此項(xiàng)為false禁用此功能。

addModeClass: boolean 當(dāng)啟用時(shí)（默認(rèn)禁用），會(huì)給每個(gè)標(biāo)記添加額外的表示生成標(biāo)記的mode的以cm-m開(kāi)頭的CSS樣式類。例如，XML mode產(chǎn)生的標(biāo)記，會(huì)添加cm-m-xml類。

maxHighlightLength: number 當(dāng)需要高亮很長(zhǎng)的行時(shí)，為了保持響應(yīng)性能，當(dāng)?shù)竭_(dá)某些位置時(shí)，編輯器會(huì)直接將其他行設(shè)置為純文本(plain text)。默認(rèn)為10000，可以設(shè)置為Infinity來(lái)關(guān)閉此功能。

viewportMargin: integer 指定當(dāng)前滾動(dòng)到視圖中內(nèi)容上方和下方要渲染的行數(shù)。這會(huì)影響到滾動(dòng)時(shí)要更新的行數(shù)。通常情況下應(yīng)該使用默認(rèn)值10?？梢栽O(shè)置值為Infinity始終渲染整個(gè)文檔。注意：這樣設(shè)置在處理大文檔時(shí)會(huì)影響性能。

CodeMirror功能

開(kāi)箱即用，支持超出100種語(yǔ)言
強(qiáng)悍的、可組合語(yǔ)言方式系統(tǒng)軟件
自動(dòng)執(zhí)行(XML)
編碼伸縮
可設(shè)置的功能鍵關(guān)聯(lián)
Vim、Emacs和Sublime文本打印裝訂系統(tǒng)軟件
搜索和更換頁(yè)面
固定支架和標(biāo)識(shí)配對(duì)
支持切分主視圖
襯膠管道機(jī)融合
混和文字大小風(fēng)格特點(diǎn)
各種各樣主題
可修改尺寸以滿足具體內(nèi)容
嵌入式和小塊小組件
可編排水溝
使文本范疇具備風(fēng)格化的、寫保護(hù)或原子化的文本范疇
雙重文本支持
很多其他方式和附加組件...

以上便是WinWin7下載站給大家?guī)?lái)的CodeMirror代碼編輯器！