一、前言

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

二、應(yīng)用

1.下載codemirror

npm install vue-codemirror --save

2.main.js引入：

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

3.頁(yè)面使用

<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'; // 這里引入的是主題樣式，根據(jù)設(shè)置的theme的主題引入，一定要引入?。?
require('codemirror/mode/javascript/javascript'); // 這里引入模式的js，根據(jù)設(shè)置的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 配置項(xiàng)說(shuō)明

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

• value: string|CodeMirror.Doc 編輯器的起始值?？梢允亲址部梢允俏臋n對(duì)象。
• mode: string|object 使用的模式。如果沒(méi)有給出，默認(rèn)為加載第一個(gè)模式。它可以是一個(gè)字符串，可以簡(jiǎn)單地命名模式，也可以是與模式關(guān)聯(lián)的MIME類型?；蛘撸梢允前Ｊ脚渲眠x項(xiàng)的對(duì)象，具有name命名模式的屬性（例如{name: “javascript”, json: true}）。每種模式的演示頁(yè)面都包含有關(guān)模式支持的配置參數(shù)的信息。可以通過(guò)檢查CodeMirror.modes 和CodeMirror.mimeModes對(duì)象來(lái)詢問(wèn)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ǔ)言中的含義）應(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: “ltr” | "rtl" 翻轉(zhuǎn)整體布局并選擇基本段落方向?yàn)閺淖蟮接一驈挠业阶?。默認(rèn)為“ltr”。CodeMirror將Unicode雙向算法應(yīng)用于每一行，但不自動(dòng)檢測(cè)基本方向 - 它設(shè)置為所有行的編輯器方向。當(dāng)基本方向與用戶意圖不匹配時(shí)，生成的順序有時(shí)會(huì)出錯(cuò)（例如，前導(dǎo)和尾隨標(biāo)點(diǎn)跳轉(zhuǎn)到行的錯(cuò)誤一側(cè)）。因此，允許用戶切換此選項(xiàng)對(duì)多語(yǔ)言輸入很有幫助。
• rtlMoveVisually: boolean 確定通過(guò)從右到左（阿拉伯語(yǔ)，希伯來(lái)語(yǔ)）文本的水平光標(biāo)移動(dòng)是否是可視的（按向左箭頭向左移動(dòng)光標(biāo)）或邏輯（按向左箭頭移動(dòng)到字符串中的下一個(gè)較低索引，這在視覺(jué)上是正確的從右到左的文字）。默認(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” | “line” | “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)情況下，通過(guò)在Mac OS上單擊鼠標(biāo)右鍵并在其他位置按住Ctrl鍵單擊來(lái)啟用此功能。
• lineWrapping: boolean CodeMirror是否應(yīng)滾動(dòng)或換行以排長(zhǎ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（和可選的背景），并將用于繪制排水溝的背景?？梢园?code>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)條。核心庫(kù)還提供了"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)的方式。核心庫(kù)定義"textarea" 和"contenteditable"輸入模式。在移動(dòng)瀏覽器上，默認(rèn)為"contenteditable"。在桌面瀏覽器上，默認(rèn)為"textarea"。在"contenteditable"模型中支持IME和屏幕閱讀器更好。目的是使其成為未來(lái)現(xiàn)代桌面瀏覽器的默認(rèn)設(shè)置。
• readOnly: boolean|string 這會(huì)禁止用戶編輯編輯器內(nèi)容。如果"nocursor"給出特殊值（而不是簡(jiǎn)單true），則不允許對(duì)編輯器進(jìn)行聚焦。
• showCursorWhenSelecting: boolean 選擇是否處于活動(dòng)狀態(tài)時(shí)是否應(yīng)繪制光標(biāo)。默認(rèn)為false。
• lineWiseCopyCut: boolean 啟用時(shí)（默認(rèn)情況下），在沒(méi)有選擇時(shí)執(zhí)行復(fù)制或剪切將復(fù)制或剪切其上有游標(biāo)的整行。
• pasteLinesPerSelection: boolean 當(dāng)從外部源（而不是編輯器本身）粘貼某些內(nèi)容時(shí)，如果行數(shù)與選擇的數(shù)量相匹配，則CodeMirror將默認(rèn)為每個(gè)選擇插入一行?？梢詫⑵湓O(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)卡索引。如果沒(méi)有給出，則不會(huì)分配選項(xiàng)卡索引。
• autofocus: boolean 可用于使CodeMirror將焦點(diǎn)集中在初始化上。默認(rèn)為關(guān)閉。當(dāng)fromTextArea使用when時(shí)，并且沒(méi)有給出該選項(xiàng)的顯式值，當(dāng)源textarea被聚焦時(shí)，它將被設(shè)置為true，或者它具有autofocus屬性而沒(méi)有聚焦其他元素。
• phrases: object 某些插件通過(guò)該phrase 方法運(yùn)行用戶可見的字符串（例如界面中的標(biāo)簽）以允許翻譯。此選項(xiàng)確定該方法的返回值。如果它為null或者沒(méi)有輸入字符串命名的屬性的對(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毫秒。通過(guò)將此值設(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)無(wú)法一直到達(dá)線的底部，看起來(lái)更好
• 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正確檢測(cè)它的事件。因此，它民意調(diào)查。默認(rèn)值為100毫秒。
• flattenSpans: boolean 默認(rèn)情況下，如果相鄰標(biāo)記具有相同的類，則它們會(huì)將相鄰標(biāo)記合并為單個(gè)跨度。這將導(dǎo)致更簡(jiǎn)單的DOM樹，從而表現(xiàn)更好。使用某些樣式（例如圓角），這將改變文檔的外觀。您可以將此選項(xiàng)設(shè)置為false以禁用此行為。
• addModeClass: boolean 啟用時(shí)（默認(rèn)情況下為off），將為每個(gè)標(biāo)記添加一個(gè)額外的CSS類，指示生成它的（內(nèi)部）模式，前綴為"cm-m-"。例如，來(lái)自XML模式的標(biāo)記將獲得cm-m-xml該類。
• maxHighlightLength: number 當(dāng)突出顯示長(zhǎng)行時(shí)，為了保持響應(yīng)，編輯器將放棄并簡(jiǎn)單地將行的其余部分設(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)

到此這篇關(guān)于Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)的文章就介紹到這了,更多相關(guān)Vue CodeMirror內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論