前提小結(jié)：

第一次用codemirror，而且是在vue里面使用，看了官方文檔，一大串都是英文，翻譯后大概了解了這個(gè)插件，然后在項(xiàng)目中使用時(shí)出現(xiàn)過(guò)好幾個(gè)問(wèn)題：

1.新版的codemirror在lib目錄下沒(méi)有codemirror.js文件，舊版的有，所以網(wǎng)上的很多文章都是直接這樣引：

 <scriptsrc="lib/codemirror.js"></script>
 <linkrel="stylesheet"href="../lib/codemirror.css" rel="external nofollow" >
<scriptsrc="mode/javascript/javascript.js"></script>

然而新手在新版的codemirror怎么引都報(bào)錯(cuò)，新版的codemirror把codemirror.js放到了src目錄下，當(dāng)然src目錄下的codemirror.js文件如果你要移到lib目錄下是要改變里面的路徑的。

2.在vue里面使用codemirror，動(dòng)態(tài)創(chuàng)建編輯器，在關(guān)閉的時(shí)候會(huì)產(chǎn)生一種鬼知道是什么的錯(cuò)誤，就是比如我新建了a，b兩個(gè)編輯器，a在左，b在右，當(dāng)我關(guān)閉a時(shí)，想要顯示b的文檔內(nèi)容，卻顯示的是b的，肯呢個(gè)這是動(dòng)態(tài)數(shù)據(jù)改變產(chǎn)生的錯(cuò)誤，可是當(dāng)關(guān)閉b，不關(guān)閉a時(shí)，就能顯示a的文本內(nèi)容。

3.路由跳轉(zhuǎn)的時(shí)候，當(dāng)打開(kāi)的編輯器代碼顯示最頂層的內(nèi)容的時(shí)候，切換到其他路由再切換回來(lái)還是能顯示緩存的編輯器文本，當(dāng)我把編輯器拉到最底層，顯示最底層的文本內(nèi)容，再切換到其他路由再切回來(lái)時(shí)，編輯器一片空白，鼠標(biāo)點(diǎn)擊編輯器或者鼠標(biāo)滑輪滾動(dòng)，文本內(nèi)容出現(xiàn)，而且顯示的內(nèi)容是頂層的內(nèi)容。

基于以上幾點(diǎn)，我選擇用vue-codemirror組件來(lái)實(shí)現(xiàn)。

實(shí)現(xiàn)

1.首先要先安裝vue-codemirror

在npm的官網(wǎng)我找到了vue-codemirror

https://www.npmjs.com/package/vue-codemirror
npm install vue-codemirror --save

接著在main.js里使用

import { codemirror } from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

再到組件中使用

 import { codemirror } from 'vue-codemirror'
 require("codemirror/mode/python/python.js")
 require('codemirror/addon/fold/foldcode.js')
 require('codemirror/addon/fold/foldgutter.js')
 require('codemirror/addon/fold/brace-fold.js')
 require('codemirror/addon/fold/xml-fold.js')
 require('codemirror/addon/fold/indent-fold.js')
 require('codemirror/addon/fold/markdown-fold.js')
 require('codemirror/addon/fold/comment-fold.js')

當(dāng)然組件需要先聲明

components:{
    codemirror
   }

html代碼這樣寫：

 <codemirror
    ref="myCm"
    :value="item.content"
    :options="cmOptions"
    @changes="changes"
     class="code"
    ></codemirror>

options是和codemirror一樣的配置項(xiàng)

value: string | CodeMirror.Doc

編輯器的初始值（文本），可以是字符串或者CodeMirror文檔對(duì)象(不同于HTML文檔對(duì)象)。

mode: string | object

通用的或者在CodeMirror中使用的與mode相關(guān)聯(lián)的mime，當(dāng)不設(shè)置這個(gè)值的時(shí)候，會(huì)默認(rèn)使用第一個(gè)載入的mode定義文件。一般地，會(huì)使用關(guān)聯(lián)的mime類型來(lái)設(shè)置這個(gè)值；除此之外，也可以使用一個(gè)帶有name屬性的對(duì)象來(lái)作為值（如：{name: “javascript”,

 json: true}）。可以通過(guò)訪問(wèn)CodeMirror.modes和CodeMirror.mimeModes獲取定義的mode和MIME。

lineSeparator: string|null

明確指定編輯器使用的行分割符（換行符）。默認(rèn)（值為null）情況下，文檔會(huì)被 CRLF(以及單獨(dú)的CR, LF)分割，單獨(dú)的LF會(huì)在所有的輸出中用作換行符（如：getValue）。當(dāng)指定了換行字符串，行就只會(huì)被指定的串分割。

theme: string

配置編輯器的主題樣式。要使用主題，必須保證名稱為 .cm-s-[name] (name是設(shè)置的theme的值)的樣式是加載上了的。當(dāng)然，你也可以一次加載多個(gè)主題樣式，使用方法和html和使用類一樣，如： theme: foo bar，那么此時(shí)需要cm-s-foo cm-s-bar這兩個(gè)樣式都已經(jī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<string>

用來(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和屏幕閱讀器支持更好。

readOnly: 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。

低級(jí)選項(xiàng)

下面的選項(xiàng)僅用于一些特殊情況。

dragDrop: boolean

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

allowDropFileTypes: array<string>

默認(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ì)影響性能。

vue-codemirror還提供了一些使用的方法

• scroll
• changes
• beforeChange
• cursorActivity
• keyHandled
• inputRead
• electricInput
• beforeSelectionChange
• viewportChange
• swapDoc
• gutterClick
• gutterContextMenu
• focus
• blur
• refresh
• optionChange
• scrollCursorIntoView
• update

我英語(yǔ)不好就步翻譯了，不過(guò)用到的基本就這幾個(gè)changes，update，refresh，focus，blur，其他的看你們的需要而定。代碼編輯后的保存還是要用到codemirror的方法，而使用codemirror的方法就是在計(jì)算屬性使用：

computed: {
  codemirror() {
   return this.$refs.myCm.codemirror
  }
 },

codemirror的方法在官網(wǎng)有很詳細(xì)的解釋，我在這里就列幾個(gè)常用的
(     

（1)getValue():獲取編輯器文本

        (2)setValue(textString):設(shè)置編輯器文本

        (3)undo():撤銷一個(gè)編輯器

        (4)redo():重做一個(gè)編輯器

        (5)setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});設(shè)置一個(gè)新的編輯器

        (6)getLine(Integer):獲取第n行的文本內(nèi)容

        (7)replaceRange(str1,{line,ch},{line,ch},str2):替換str1中一部分代碼為str2

        (8)lineCount():獲取編輯器總行數(shù)

        (9)replaceSelection(str1,str2):替換所選內(nèi)容

到此，用法已經(jīng)說(shuō)完，開(kāi)頭我提到的三個(gè)問(wèn)題第一第二個(gè)已經(jīng)解決，第三個(gè)解決不了，應(yīng)該是codemirror內(nèi)部有自動(dòng)刷新的程序，解決頁(yè)面切換編輯器空白的方法可以在options加一個(gè)配置viewportMargin：Infinity不過(guò)這樣會(huì)影響性能。

總結(jié)

以上所述是小編給大家介紹的在vue里使用codemirror，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論