在vue里使用codemirror遇到的問題

前提小結：

第一次用codemirror，而且是在vue里面使用，看了官方文檔，一大串都是英文，翻譯后大概了解了這個插件，然后在項目中使用時出現過好幾個問題：

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

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

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

2.在vue里面使用codemirror，動態創建編輯器，在關閉的時候會產生一種鬼知道是什么的錯誤，就是比如我新建了a，b兩個編輯器，a在左，b在右，當我關閉a時，想要顯示b的文檔內容，卻顯示的是b的，肯呢個這是動態數據改變產生的錯誤，可是當關閉b，不關閉a時，就能顯示a的文本內容。

3.路由跳轉的時候，當打開的編輯器代碼顯示最頂層的內容的時候，切換到其他路由再切換回來還是能顯示緩存的編輯器文本，當我把編輯器拉到最底層，顯示最底層的文本內容，再切換到其他路由再切回來時，編輯器一片空白，鼠標點擊編輯器或者鼠標滑輪滾動，文本內容出現，而且顯示的內容是頂層的內容。

基于以上幾點，我選擇用vue-codemirror組件來實現。

實現

1.首先要先安裝vue-codemirror

在npm的官網我找到了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')

當然組件需要先聲明

components:{
    codemirror
   }

html代碼這樣寫：

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

options是和codemirror一樣的配置項

value: string | CodeMirror.Doc

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

mode: string | object

通用的或者在CodeMirror中使用的與mode相關聯的mime，當不設置這個值的時候，會默認使用第一個載入的mode定義文件。一般地，會使用關聯的mime類型來設置這個值；除此之外，也可以使用一個帶有name屬性的對象來作為值（如：{name: “javascript”,

 json: true}）。可以通過訪問CodeMirror.modes和CodeMirror.mimeModes獲取定義的mode和MIME。

lineSeparator: string|null

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

theme: string

配置編輯器的主題樣式。要使用主題，必須保證名稱為 .cm-s-[name] (name是設置的theme的值)的樣式是加載上了的。當然，你也可以一次加載多個主題樣式，使用方法和html和使用類一樣，如： theme: foo bar，那么此時需要cm-s-foo cm-s-bar這兩個樣式都已經被加載上了。

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<string>

用來添加額外的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<string>

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

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

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

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

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

codemirror的方法在官網有很詳細的解釋，我在這里就列幾個常用的
(     

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

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

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

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

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

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

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

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

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

到此，用法已經說完，開頭我提到的三個問題第一第二個已經解決，第三個解決不了，應該是codemirror內部有自動刷新的程序，解決頁面切換編輯器空白的方法可以在options加一個配置viewportMargin：Infinity不過這樣會影響性能。

總結

以上所述是小編給大家介紹的在vue里使用codemirror，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！