一、前言

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

二、應用

1.下載codemirror

npm install vue-codemirror --save

2.main.js引入：

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

3.頁面使用

<template>
  <div style="width: 100%; height: 98%">
    <div style="width: 100%; margin-bottom: 10px" class="t_right">
      <el-button type="primary" @click="back">Back</el-button>
    </div>
    <codemirror
      ref="mycode"
      :value="curCode"
      :options="cmOptions"
      class="code"
      style="height: 100%"
      @changes="changes" 
    ></codemirror>
  </div>
</template>
<script>
import ProcessorService from '@/service/processorService';
import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/ambiance.css'; // 這里引入的是主題樣式，根據設置的theme的主題引入，一定要引入??！
require('codemirror/mode/javascript/javascript'); // 這里引入模式的js，根據設置的mode引入，一定要引入??！
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')
export default {
  components: { codemirror },
  data() {
    return {
      curCode: '',
      cmOptions: {
        value: '',
        mode: 'text/javascript',
        theme: 'ambiance',
        readOnly: true
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
  mounted() {
    const { path } = this.$route.query;
    console.log('path---', path);
    ProcessorService.loadScript(path).then(res => {
      console.log('script---', res);
      this.curCode = res;
    });
  }
};
</script>

三、options 配置項說明

注：vue-codemirror中options配置項和codemirror一樣！

• value: string|CodeMirror.Doc 編輯器的起始值?？梢允亲址部梢允俏臋n對象。
• mode: string|object 使用的模式。如果沒有給出，默認為加載第一個模式。它可以是一個字符串，可以簡單地命名模式，也可以是與模式關聯(lián)的MIME類型?；蛘?，它可以是包含模式配置選項的對象，具有name命名模式的屬性（例如{name: “javascript”, json: true}）。每種模式的演示頁面都包含有關模式支持的配置參數的信息。可以通過檢查CodeMirror.modes 和CodeMirror.mimeModes對象來詢問CodeMirror已定義了哪些模式和MIME類型。第一個將模式名稱映射到它們的構造函數，第二個將MIME類型映射到模式規(guī)范。
• lineSeparator: string|null 顯式設置編輯器的行分隔符。默認情況下（值null），文檔將在CRLF以及單獨的CR和LF上拆分，并且單個LF將在所有輸出中用作行分隔符（例如getValue）。給定特定字符串時，只會在該字符串上拆分行，默認情況下，輸出將使用相同的分隔符。
• theme: string 編輯器設計樣式的主題。必須確保.cm-s-[name] 已加載定義相應樣式的CSS文件（請參閱theme分發(fā)中的目錄）。默認值為"default"，包含的顏色codemirror.css。它可以使用多個主題化，例如"foo bar"將同時分配cm-s-foo和cm-s-bar類編輯器。
• indentUnit: integer 一個塊（編輯語言中的含義）應縮進多少個空格。默認值為2。
• smartIndent: boolean 是否使用模式提供的上下文相關縮進（或者只是縮進與之前的行相同）。默認為true。
• tabSize: integer 制表符的寬度。默認為4。
• indentWithTabs: boolean 在縮進時，是否tabSize 應該用N個制表符替換前N *個空格。默認值為false。
• electricChars: boolean 配置編輯器在鍵入可能更改其正確縮進的字符時，是否應重新縮進當前行（僅在模式支持縮進時才有效）。默認為true。
• specialChars: RegExp 用于確定哪些字符應由特殊占位符替換的正則表達式。非常適用于非打印特殊字符。默認是/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/。
• specialCharPlaceholder: function(char) → Element 給定由specialChars 選項標識的特殊字符的函數，生成用于表示字符的DOM節(jié)點。默認情況下，會顯示一個紅點（•），并帶有標題工具提示以指示字符代碼。
• direction: “ltr” | "rtl" 翻轉整體布局并選擇基本段落方向為從左到右或從右到左。默認為“ltr”。CodeMirror將Unicode雙向算法應用于每一行，但不自動檢測基本方向 - 它設置為所有行的編輯器方向。當基本方向與用戶意圖不匹配時，生成的順序有時會出錯（例如，前導和尾隨標點跳轉到行的錯誤一側）。因此，允許用戶切換此選項對多語言輸入很有幫助。
• rtlMoveVisually: boolean 確定通過從右到左（阿拉伯語，希伯來語）文本的水平光標移動是否是可視的（按向左箭頭向左移動光標）或邏輯（按向左箭頭移動到字符串中的下一個較低索引，這在視覺上是正確的從右到左的文字）。默認設置false 在Windows上，true在其他平臺上。
• keyMap: string 配置要使用的鍵映射。默認值是"default"，這是唯一定義的鍵映射codemirror.js。key map目錄中可以找到額外的鍵映射。有關詳細信息，請參閱關鍵映射部分。
• extraKeys: object 可用于為編輯器指定額外的鍵綁定，以及由其定義的綁定keyMap。應為null或有效的鍵映射值。
• configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object 允許您配置鼠標選擇和拖動的行為。按下鼠標左鍵時調用該函數。返回的對象可能具有以下屬性：
• unit: “char” | “word” | “line” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos} 選擇的單位。對于自定義單元，可以是內置單元之一，也可以是一個位置并返回其范圍的函數。默認設置是返回"word"雙擊，"line"三次點擊，“rectangle"alt-clicks（或Chrome操作系統(tǒng)，元移位點擊）等"single” 。
• extend: bool 是否擴展現(xiàn)有選擇范圍或開始新選擇范圍。默認情況下，單擊班次時會啟用此功能。
• addNew: bool 啟用后，這會為現(xiàn)有選擇添加新范圍，而不是替換它。默認行為是在Mac OS上為命令單擊啟用此功能，并在其他平臺上按住Control鍵單擊。
• moveOnDrag: bool 當鼠標甚至拖動編輯器內部的內容時，它控制是復制（false）還是移動（true）。默認情況下，通過在Mac OS上單擊鼠標右鍵并在其他位置按住Ctrl鍵單擊來啟用此功能。
• lineWrapping: boolean CodeMirror是否應滾動或換行以排長行。默認為false（滾動）。
• lineNumbers: boolean 是否在編輯器左側顯示行號。
• firstLineNumber: integer 在哪個數字開始計數行。默認值為1。
• lineNumberFormatter: function(line: integer) → string 用于格式化行號的函數。該函數傳遞給行號，并應返回將在裝訂線中顯示的字符串。
• gutters: array < string> 可用于添加額外的排水溝（超出或代替行號排水溝）。應該是一個CSS類名稱數組，每個類名稱定義一個width（和可選的背景），并將用于繪制排水溝的背景?？梢园?code>CodeMirror-linenumbers類，以便明確設置行號裝訂線的位置（它將默認為所有其他裝訂線的右側）。這些類名是傳遞給的鍵setGutterMarker。
• fixedGutter: boolean 確定裝訂線是否水平滾動內容（false）或在水平滾動期間是否保持固定（true，默認值）。
• scrollbarStyle: string 選擇滾動條實現(xiàn)。默認為"native"，顯示本機滾動條。核心庫還提供了"null"完全隱藏滾動條的樣式。插件可以實現(xiàn)其他滾動條模型。
• coverGutterNextToScrollbar: boolean 當fixedGutter 打開時，并且存在水平滾動條，默認情況下，此滾動條左側將顯示裝訂線。如果此選項設置為true，則它將由具有類的元素覆蓋CodeMirror-gutter-filler。
• inputStyle: string 選擇CodeMirror處理輸入和焦點的方式。核心庫定義"textarea" 和"contenteditable"輸入模式。在移動瀏覽器上，默認為"contenteditable"。在桌面瀏覽器上，默認為"textarea"。在"contenteditable"模型中支持IME和屏幕閱讀器更好。目的是使其成為未來現(xiàn)代桌面瀏覽器的默認設置。
• readOnly: boolean|string 這會禁止用戶編輯編輯器內容。如果"nocursor"給出特殊值（而不是簡單true），則不允許對編輯器進行聚焦。
• showCursorWhenSelecting: boolean 選擇是否處于活動狀態(tài)時是否應繪制光標。默認為false。
• lineWiseCopyCut: boolean 啟用時（默認情況下），在沒有選擇時執(zhí)行復制或剪切將復制或剪切其上有游標的整行。
• pasteLinesPerSelection: boolean 當從外部源（而不是編輯器本身）粘貼某些內容時，如果行數與選擇的數量相匹配，則CodeMirror將默認為每個選擇插入一行?？梢詫⑵湓O置false為禁用該行為。
• selectionsMayTouch: boolean 確定多個選擇是在觸摸時（默認值）還是僅在它們重疊時（true）連接。
• undoDepth: integer 編輯器存儲的最大撤消級別數。請注意，這包括選擇更改事件。默認為200。
• historyEventDelay: integer 鍵入或刪除時將導致新歷史事件開始的不活動時間（以毫秒為單位）。默認為1250。
• tabindex: integer 要分配給編輯器的選項卡索引。如果沒有給出，則不會分配選項卡索引。
• autofocus: boolean 可用于使CodeMirror將焦點集中在初始化上。默認為關閉。當fromTextArea使用when時，并且沒有給出該選項的顯式值，當源textarea被聚焦時，它將被設置為true，或者它具有autofocus屬性而沒有聚焦其他元素。
• phrases: object 某些插件通過該phrase 方法運行用戶可見的字符串（例如界面中的標簽）以允許翻譯。此選項確定該方法的返回值。如果它為null或者沒有輸入字符串命名的屬性的對象，則返回該字符串。否則，返回與該字符串對應的屬性的值。
• dragDrop: boolean 控制是否啟用拖放。默認開啟。
• allowDropFileTypes: array< string> 設置（默認為null）時，只能將類型在數組中的文件放入編輯器中。字符串應該是MIME類型，并將根據瀏覽器報告type 的File對象進行檢查。
• cursorBlinkRate: number 用于光標閃爍的半周期（以毫秒為單位）。默認閃爍率為530毫秒。通過將此值設置為零，可以禁用閃爍。負值完全隱藏光標。
• cursorScrollMargin: number 當接近可滾動文檔中可見視圖的頂部或底部時，總是在光標上方和下方留出多少額外空間。默認值為0。
• cursorHeight: number 確定光標的高度。默認值為1，表示它跨越線的整個高度。對于某些字體（以及某些品味）較小的高度（例如0.85），導致光標無法一直到達線的底部，看起來更好
• resetSelectionOnContextMenu: boolean 控制當在當前選擇之外單擊打開上下文菜單時，是否將光標移動到單擊點。默認為true。
• workTime, workDelay: number 突出顯示由偽背景線程完成，該線程將工作workTime毫秒，然后使用超時睡眠workDelay毫秒。默認值為200和300，您可以更改這些選項以突出顯示或多或少的激進。
• pollInterval: number 指示CodeMirror應該如何快速輪詢其輸入textarea以進行更改（聚焦時）。大多數輸入都是由事件捕獲的，但某些內容（如某些瀏覽器上的IME輸入）不會生成允許CodeMirror正確檢測它的事件。因此，它民意調查。默認值為100毫秒。
• flattenSpans: boolean 默認情況下，如果相鄰標記具有相同的類，則它們會將相鄰標記合并為單個跨度。這將導致更簡單的DOM樹，從而表現(xiàn)更好。使用某些樣式（例如圓角），這將改變文檔的外觀。您可以將此選項設置為false以禁用此行為。
• addModeClass: boolean 啟用時（默認情況下為off），將為每個標記添加一個額外的CSS類，指示生成它的（內部）模式，前綴為"cm-m-"。例如，來自XML模式的標記將獲得cm-m-xml該類。
• maxHighlightLength: number 當突出顯示長行時，為了保持響應，編輯器將放棄并簡單地將行的其余部分設置為純文本，當它到達某個位置時。默認值為10 000.您可以將其設置Infinity為關閉此行為。
• viewportMargin: integer 指定在當前滾動到視圖中的文檔部分上方和下方呈現(xiàn)的行數。這會影響滾動時所需的更新量以及此類更新所做的工作量。您通常應該將其保留為默認值10.可以設置為Infinity確保始終呈現(xiàn)整個文檔，因此瀏覽器的文本搜索會對其進行處理。這將對大文檔的性能產生不良影響。

四、拓展閱讀

官網

到此這篇關于Vue進階之CodeMirror的應用小結的文章就介紹到這了,更多相關Vue CodeMirror內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！