codemirror 使用總結

在開發vue專案的程序中，需要一個可以自定義規則的代碼編輯器，最終選用了Vue-Codemirror來進行開發，Vue-Codemirror是基于Codemirror，并適用于Vue的代碼編輯器，

• 官方檔案
• npm
  • Codemirror
  • Vue-Codemirror
• demo

功能介紹

1. 多種主題支持
2. 多種語言支持（json、yaml、xml、jsx、sql、css、c、c++等）
3. 語法校驗
4. 代碼折疊
5. 代碼比對以及合并
6. 代碼補全
7. … 等功能

Install

• npm

npm install vue-codemirror --save

引入

import 'codemirror/lib/codemirror.css'
import VueCodemirror from 'vue-codemirror';

-cdn

<link rel="stylesheet" href=".../codemirror/5.59.1/lib/codemirror.css">

<script type="text/javascript" src=".../codemirror/5.59.1/lib/codemirror.js></script>
<script type="text/javascript" src=".../vue-codemirror/4.0.6/dist/vue-codemirror.js"></script>

Mount

• global

 import Vue from 'vue';
 import VueCodemirror from 'vue-codemirror';

 Vue.use(VueCodemirror，{...options}）

• component

  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { codemirror } from 'vue-codemirror';
  
   @Component({
        name: 'Demo',
        components: {
            codemirror
        }
    })

Create

<template>
   <codemirror
      ref="myCm"
      :value="info.content"
      :options="cmOptions"
      @input="changes">
   </codemirror>
</template>


<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import { codemirror } from 'vue-codemirror'

@Component({
  name: 'Demo',
  components: {
    codemirror
  }
})

export default class Demo extends Vue {
  cmOptions = {
    mode: 'application/json', // 模式
    theme: '3024-day', // 主題
    indentUnit: 4, // 縮進多少個空格
    tabSize: 4, // 制表符寬度
    lineNumbers: true, // 是否顯示行號
    lineWrapping: true, // 是否默認換行
    firstLineNumber: 3, // 在哪個數字開始計數行，默認值為1
    readOnly: false, // 禁止用戶編輯編輯器內容
    line: true,
    smartIndent: true // 智能縮進
  }
}
</script>
    

當設定mode的時候，需要引入相應mode.js，同樣的，設定theme的時候，也需要引入相應的theme.css，由于json屬于JavaScript的一種，所以也得引入JavaScript，

• cdn

<link rel="stylesheet" href=".../codemirror/5.59.1/theme/3024-day.css">
    
<script type="text/javascript" src=".../codemirror/5.59.1/mode/javascript/javascript.js"></script>

• npm

import 'codemirror/theme/3024-day.css'
import 'codemirror/mode/javascript/javascript.js'

如果mode需要支持yaml,則需要引入yaml.js

import 'codemirror/mode/yaml/yaml.js'

Codemirror lint

json需要引入json-lint.js，如果是yaml，則需要引入yaml-lint.js，但是，Codemirror支持的語法校驗型別比較少，只支持css、html、javascript、json、yaml、coffeescript

<link rel="stylesheet" href=".../codemirror/5.59.1/addon/lint/lint.css">

<script src=".../codemirror/5.59.1/addon/lint/lint.js"></script>
<script src=".../codemirror/5.59.1/addon/lint/json-lint.js"></script>
<script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>

同時還需要在options進行相應配置

this.cmOptions = {
    lineNumbers: true,
    mode: "application/json",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-I0YLac9A-1612262704998)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d83a4cf97aa94e198cba41d98e26cbee~tplv-k3u1fbpfcp-watermark.image)]

Codemirror Merge

首先，需要引入diff_math_patch，然后引入codemirror相應的merge.js以及merge.css

  <link rel="stylesheet" href=".../codemirror/5.59.1/addon/merge/merge.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
  <script src=".../codemirror/5.59.1/addon/merge/merge.js"></script>

然后，需要去配置options

mergeOptions = {
    mode: 'application/json', // 模式
    theme: 'yeti', // 主題
    lineNumbers: true, // 是否顯示行號
    origLeft: null,
    showDifferences: true, // 當為true(默認值)時, 更改的文本片段將高亮顯示
    collapseIdentical: false, // 當為true(默認為false)時，未修改的文本段將被折疊，
    connect: 'center', // 設定用于連接更改的代碼塊的樣式
    value: '{\n    "k1":"v1",\n    "k2":"v2",\n    "k3":"v3",\n    "k4":"v4",\n    "k5":"v5",\n    "k6":"v6",\n    "k7":"v7"\n}', // 左側老檔案
    orig: '{\n    "k1":"v1",\n    "k3":"v3",\n    "k4":"v4",\n    "k7":"v7"\n}' // 右側新檔案
  }

Codemirror Fold

首先，需要去引相關折疊功能的相關包

 <link rel="stylesheet" href=".../codemirror/addon/fold/foldgutter.css">
 
<script src=".../codemirror/addon/fold/foldcode.js"></script>
<script src=".../codemirror/addon/fold/foldgutter.js"></script>
<script src=".../codemirror/addon/fold/xml-fold.js"></script>

其次，需要去配置options

foldOptions = {
    mode: 'text/html', // 模式
    theme: 'mdn-like', // 主題
    lineNumbers: true, // 是否顯示行號
    lineWrapping: true,
    foldGutter: true, // 支持折疊
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
 }

折疊前的展示

折疊后的展示

codemirror具體的一些屬性方法，大家有需要了解的可以查閱其相應的官方檔案以及github，