走近代碼編輯器——CodeMirror

一、前言

CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語言。能夠做到代碼自動(dòng)補(bǔ)全，代碼折疊，可配置鍵盤事件，支持vim， emacs， sublime text 編碼風(fēng)格、能完成查找替換，括號(hào)匹配，分欄顯示，顯示行號(hào)，自行配置字體大小和風(fēng)格等。

二、應(yīng)用

下載codemirror

npm install vue-codemirror --save

main.js引入：

import VueCodeMirror from 'vue-codemirror'; import 'codemirror/lib/codemirror.css' Vue.use(VueCodeMirror);

頁面使用

三、options 配置項(xiàng)說明

注：vue-codemirror中options配置項(xiàng)和codemirror一樣！

value: string|CodeMirror.Doc

編輯器的起始值。可以是字符串，也可以是文檔對(duì)象。

mode: string|object

使用的模式。如果沒有給出，默認(rèn)為加載第一個(gè)模式。它可以是一個(gè)字符串，可以簡單地命名模式，也可以是與模式關(guān)聯(lián)的MIME類型。或者，它可以是包含模式配置選項(xiàng)的對(duì)象，具有name命名模式的屬性（例如{name: “javascript”, json: true}）。每種模式的演示頁面都包含有關(guān)模式支持的配置參數(shù)的信息。可以通過檢查CodeMirror.modes 和CodeMirror.mimeModes對(duì)象來詢問CodeMirror已定義了哪些模式和MIME類型。第一個(gè)將模式名稱映射到它們的構(gòu)造函數(shù)，第二個(gè)將MIME類型映射到模式規(guī)范。

lineSeparator: string|null

顯式設(shè)置編輯器的行分隔符。默認(rèn)情況下（值null），文檔將在CRLF以及單獨(dú)的CR和LF上拆分，并且單個(gè)LF將在所有輸出中用作行分隔符（例如getValue）。給定特定字符串時(shí)，只會(huì)在該字符串上拆分行，默認(rèn)情況下，輸出將使用相同的分隔符。

theme: string

編輯器設(shè)計(jì)樣式的主題。必須確保.cm-s-[name] 已加載定義相應(yīng)樣式的CSS文件（請(qǐng)參閱theme分發(fā)中的目錄）。默認(rèn)值為"default"，包含的顏色codemirror.css。它可以使用多個(gè)主題化，例如"foo bar"將同時(shí)分配cm-s-foo和cm-s-bar類編輯器。

indentUnit: integer

一個(gè)塊（編輯語言中的含義）應(yīng)縮進(jìn)多少個(gè)空格。默認(rèn)值為2。

smartIndent: boolean

是否使用模式提供的上下文相關(guān)縮進(jìn)（或者只是縮進(jìn)與之前的行相同）。默認(rèn)為true。

tabSize: integer

制表符的寬度。默認(rèn)為4。

indentWithTabs: boolean

在縮進(jìn)時(shí)，是否tabSize 應(yīng)該用N個(gè)制表符替換前N *個(gè)空格。默認(rèn)值為false。

electricChars: boolean

配置編輯器在鍵入可能更改其正確縮進(jìn)的字符時(shí)，是否應(yīng)重新縮進(jìn)當(dāng)前行（僅在模式支持縮進(jìn)時(shí)才有效）。默認(rèn)為true。

specialChars: RegExp

用于確定哪些字符應(yīng)由特殊占位符替換的正則表達(dá)式。非常適用于非打印特殊字符。默認(rèn)是/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/。

specialCharPlaceholder: function(char) → Element

給定由specialChars 選項(xiàng)標(biāo)識(shí)的特殊字符的函數(shù)，生成用于表示字符的DOM節(jié)點(diǎn)。默認(rèn)情況下，會(huì)顯示一個(gè)紅點(diǎn)（?），并帶有標(biāo)題工具提示以指示字符代碼。

direction: “l(fā)tr” | "rtl"

翻轉(zhuǎn)整體布局并選擇基本段落方向?yàn)閺淖蟮接一驈挠业阶蟆ＤJ(rèn)為“l(fā)tr”。CodeMirror將Unicode雙向算法應(yīng)用于每一行，但不自動(dòng)檢測基本方向 - 它設(shè)置為所有行的編輯器方向。當(dāng)基本方向與用戶意圖不匹配時(shí)，生成的順序有時(shí)會(huì)出錯(cuò)（例如，前導(dǎo)和尾隨標(biāo)點(diǎn)跳轉(zhuǎn)到行的錯(cuò)誤一側(cè)）。因此，允許用戶切換此選項(xiàng)對(duì)多語言輸入很有幫助。

rtlMoveVisually: boolean

確定通過從右到左（阿拉伯語，希伯來語）文本的水平光標(biāo)移動(dòng)是否是可視的（按向左箭頭向左移動(dòng)光標(biāo)）或邏輯（按向左箭頭移動(dòng)到字符串中的下一個(gè)較低索引，這在視覺上是正確的從右到左的文字）。默認(rèn)設(shè)置false 在Windows上，true在其他平臺(tái)上。

keyMap: string

配置要使用的鍵映射。默認(rèn)值是"default"，這是唯一定義的鍵映射codemirror.js。key map目錄中可以找到額外的鍵映射。有關(guān)詳細(xì)信息，請(qǐng)參閱關(guān)鍵映射部分。

extraKeys: object

可用于為編輯器指定額外的鍵綁定，以及由其定義的綁定keyMap。應(yīng)為null或有效的鍵映射值。

configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object

允許您配置鼠標(biāo)選擇和拖動(dòng)的行為。按下鼠標(biāo)左鍵時(shí)調(diào)用該函數(shù)。返回的對(duì)象可能具有以下屬性：

unit: “char” | “word” | “l(fā)ine” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos}

選擇的單位。對(duì)于自定義單元，可以是內(nèi)置單元之一，也可以是一個(gè)位置并返回其范圍的函數(shù)。默認(rèn)設(shè)置是返回"word“雙擊，”line“三次點(diǎn)擊，“rectangle”alt-clicks（或Chrome操作系統(tǒng)，元移位點(diǎn)擊）等"single” 。

extend: bool

是否擴(kuò)展現(xiàn)有選擇范圍或開始新選擇范圍。默認(rèn)情況下，單擊班次時(shí)會(huì)啟用此功能。

addNew: bool

啟用后，這會(huì)為現(xiàn)有選擇添加新范圍，而不是替換它。默認(rèn)行為是在Mac OS上為命令單擊啟用此功能，并在其他平臺(tái)上按住Control鍵單擊。

moveOnDrag: bool

當(dāng)鼠標(biāo)甚至拖動(dòng)編輯器內(nèi)部的內(nèi)容時(shí)，它控制是復(fù)制（false）還是移動(dòng)（true）。默認(rèn)情況下，通過在Mac OS上單擊鼠標(biāo)右鍵并在其他位置按住Ctrl鍵單擊來啟用此功能。

lineWrapping: boolean

CodeMirror是否應(yīng)滾動(dòng)或換行以排長行。默認(rèn)為false（滾動(dòng)）。

lineNumbers: boolean

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

firstLineNumber: integer

在哪個(gè)數(shù)字開始計(jì)數(shù)行。默認(rèn)值為1。

lineNumberFormatter: function(line: integer) → string

用于格式化行號(hào)的函數(shù)。該函數(shù)傳遞給行號(hào)，并應(yīng)返回將在裝訂線中顯示的字符串。

gutters: array < string>

可用于添加額外的排水溝（超出或代替行號(hào)排水溝）。應(yīng)該是一個(gè)CSS類名稱數(shù)組，每個(gè)類名稱定義一個(gè)width（和可選的背景），并將用于繪制排水溝的背景。可以包括CodeMirror-linenumbers類，以便明確設(shè)置行號(hào)裝訂線的位置（它將默認(rèn)為所有其他裝訂線的右側(cè)）。這些類名是傳遞給的鍵setGutterMarker。

fixedGutter: boolean

確定裝訂線是否水平滾動(dòng)內(nèi)容（false）或在水平滾動(dòng)期間是否保持固定（true，默認(rèn)值）。

scrollbarStyle: string

選擇滾動(dòng)條實(shí)現(xiàn)。默認(rèn)為"native"，顯示本機(jī)滾動(dòng)條。核心庫還提供了"null"完全隱藏滾動(dòng)條的樣式。插件可以實(shí)現(xiàn)其他滾動(dòng)條模型。

coverGutterNextToScrollbar: boolean

當(dāng)fixedGutter 打開時(shí)，并且存在水平滾動(dòng)條，默認(rèn)情況下，此滾動(dòng)條左側(cè)將顯示裝訂線。如果此選項(xiàng)設(shè)置為true，則它將由具有類的元素覆蓋CodeMirror-gutter-filler。

inputStyle: string

選擇CodeMirror處理輸入和焦點(diǎn)的方式。核心庫定義"textarea" 和"contenteditable“輸入模式。在移動(dòng)瀏覽器上，默認(rèn)為”contenteditable"。在桌面瀏覽器上，默認(rèn)為"textarea"。在"contenteditable"模型中支持IME和屏幕閱讀器更好。目的是使其成為未來現(xiàn)代桌面瀏覽器的默認(rèn)設(shè)置。

readOnly: boolean|string

這會(huì)禁止用戶編輯編輯器內(nèi)容。如果"nocursor"給出特殊值（而不是簡單true），則不允許對(duì)編輯器進(jìn)行聚焦。

showCursorWhenSelecting: boolean

選擇是否處于活動(dòng)狀態(tài)時(shí)是否應(yīng)繪制光標(biāo)。默認(rèn)為false。

lineWiseCopyCut: boolean

啟用時(shí)（默認(rèn)情況下），在沒有選擇時(shí)執(zhí)行復(fù)制或剪切將復(fù)制或剪切其上有游標(biāo)的整行。

pasteLinesPerSelection: boolean

當(dāng)從外部源（而不是編輯器本身）粘貼某些內(nèi)容時(shí)，如果行數(shù)與選擇的數(shù)量相匹配，則CodeMirror將默認(rèn)為每個(gè)選擇插入一行。可以將其設(shè)置false為禁用該行為。

selectionsMayTouch: boolean

確定多個(gè)選擇是在觸摸時(shí)（默認(rèn)值）還是僅在它們重疊時(shí)（true）連接。

undoDepth: integer

編輯器存儲(chǔ)的最大撤消級(jí)別數(shù)。請(qǐng)注意，這包括選擇更改事件。默認(rèn)為200。

historyEventDelay: integer

鍵入或刪除時(shí)將導(dǎo)致新歷史事件開始的不活動(dòng)時(shí)間（以毫秒為單位）。默認(rèn)為1250。

tabindex: integer

要分配給編輯器的選項(xiàng)卡索引。如果沒有給出，則不會(huì)分配選項(xiàng)卡索引。

autofocus: boolean

可用于使CodeMirror將焦點(diǎn)集中在初始化上。默認(rèn)為關(guān)閉。當(dāng)fromTextArea使用when時(shí)，并且沒有給出該選項(xiàng)的顯式值，當(dāng)源textarea被聚焦時(shí)，它將被設(shè)置為true，或者它具有autofocus屬性而沒有聚焦其他元素。

phrases: object

某些插件通過該phrase 方法運(yùn)行用戶可見的字符串（例如界面中的標(biāo)簽）以允許翻譯。此選項(xiàng)確定該方法的返回值。如果它為null或者沒有輸入字符串命名的屬性的對(duì)象，則返回該字符串。否則，返回與該字符串對(duì)應(yīng)的屬性的值。

dragDrop: boolean

控制是否啟用拖放。默認(rèn)開啟。

allowDropFileTypes: array< string>

設(shè)置（默認(rèn)為null）時(shí)，只能將類型在數(shù)組中的文件放入編輯器中。字符串應(yīng)該是MIME類型，并將根據(jù)瀏覽器報(bào)告type 的File對(duì)象進(jìn)行檢查。

cursorBlinkRate: number

用于光標(biāo)閃爍的半周期（以毫秒為單位）。默認(rèn)閃爍率為530毫秒。通過將此值設(shè)置為零，可以禁用閃爍。負(fù)值完全隱藏光標(biāo)。

cursorScrollMargin: number

當(dāng)接近可滾動(dòng)文檔中可見視圖的頂部或底部時(shí)，總是在光標(biāo)上方和下方留出多少額外空間。默認(rèn)值為0。

cursorHeight: number

確定光標(biāo)的高度。默認(rèn)值為1，表示它跨越線的整個(gè)高度。對(duì)于某些字體（以及某些品味）較小的高度（例如0.85），導(dǎo)致光標(biāo)無法一直到達(dá)線的底部，看起來更好

resetSelectionOnContextMenu: boolean

控制當(dāng)在當(dāng)前選擇之外單擊打開上下文菜單時(shí)，是否將光標(biāo)移動(dòng)到單擊點(diǎn)。默認(rèn)為true。

workTime, workDelay: number

突出顯示由偽背景線程完成，該線程將工作workTime毫秒，然后使用超時(shí)睡眠workDelay毫秒。默認(rèn)值為200和300，您可以更改這些選項(xiàng)以突出顯示或多或少的激進(jìn)。

pollInterval: number

指示CodeMirror應(yīng)該如何快速輪詢其輸入textarea以進(jìn)行更改（聚焦時(shí)）。大多數(shù)輸入都是由事件捕獲的，但某些內(nèi)容（如某些瀏覽器上的IME輸入）不會(huì)生成允許CodeMirror正確檢測它的事件。因此，它民意調(diào)查。默認(rèn)值為100毫秒。

flattenSpans: boolean

默認(rèn)情況下，如果相鄰標(biāo)記具有相同的類，則它們會(huì)將相鄰標(biāo)記合并為單個(gè)跨度。這將導(dǎo)致更簡單的DOM樹，從而表現(xiàn)更好。使用某些樣式（例如圓角），這將改變文檔的外觀。您可以將此選項(xiàng)設(shè)置為false以禁用此行為。

addModeClass: boolean

啟用時(shí)（默認(rèn)情況下為off），將為每個(gè)標(biāo)記添加一個(gè)額外的CSS類，指示生成它的（內(nèi)部）模式，前綴為"cm-m-"。例如，來自XML模式的標(biāo)記將獲得cm-m-xml該類。

maxHighlightLength: number

當(dāng)突出顯示長行時(shí)，為了保持響應(yīng)，編輯器將放棄并簡單地將行的其余部分設(shè)置為純文本，當(dāng)它到達(dá)某個(gè)位置時(shí)。默認(rèn)值為10 000.您可以將其設(shè)置Infinity為關(guān)閉此行為。

viewportMargin: integer

指定在當(dāng)前滾動(dòng)到視圖中的文檔部分上方和下方呈現(xiàn)的行數(shù)。這會(huì)影響滾動(dòng)時(shí)所需的更新量以及此類更新所做的工作量。您通常應(yīng)該將其保留為默認(rèn)值10.可以設(shè)置為Infinity確保始終呈現(xiàn)整個(gè)文檔，因此瀏覽器的文本搜索會(huì)對(duì)其進(jìn)行處理。這將對(duì)大文檔的性能產(chǎn)生不良影響。

四、拓展閱讀

官網(wǎng)

網(wǎng)絡(luò)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。