codemirror使用記錄

1、背景

因爲項目須要用到 json 編輯功能，嘗試使用過 v-jsoneditor, vue-json-editor 和 vue-codemirror, 使用都不盡人意，一番嘗試以後，用 codemirror 成功知足需求，小記錄一下。

2、codemirror介紹

CodeMirror 是使用 JavaScript 爲瀏覽器實現的多功能文本編輯器。它專門用於編輯代碼，並具備實現更高級編輯功能的多種語言模式 (language mode)和附加組件(addon)。
CodeMirror 具備豐富的 API 和 CSS 主題系統，方便用戶爲其應用程序做定製化，而且易於擴展。本文主要聚焦於在 vue 工程中 json 的編輯功能。

3、codemirror使用

1. 所需依賴

npm install --save codemirror
npm install --save jsonlint

沒有使用 vue-codemirror，直接在 vue 中使用 codemirror 。
此外，須要安裝一個開發依賴 script-loader，方便引入 jsonlint。

npm install --save-dev script-loader

我安裝的版本以下：

"codemirror": "^5.59.2",
"jsonlint": "^1.6.3",
"script-loader": "^0.7.2",

2. JsonEditor 組件

直接封裝好 JsonEditor 組件，在 src/components 新建 JsonEditor.vue 文件，以下

直接上代碼

<template>
  <div class="json-editor">
    <textarea ref="textarea"></textarea>
  </div>
</template>
<script>
// 核心文件
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript' // 代碼高亮必須引入

// 代碼錯誤檢查
// eslint-disable-next-line import/no-webpack-loader-syntax
require('script-loader!jsonlint')
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'

// 主題樣式
import 'codemirror/theme/rubyblue.css'
// 括號顯示匹配
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
// 括號、引號編輯和刪除時成對出現
import 'codemirror/addon/edit/closebrackets'


export default {
  name: 'JsonEditor',
  props: {
    json: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      jsonEditor: null,
    }
  },
  watch: {
    json(val) {
      const editorValue = this.jsonEditor.getValue()
      if (val !== editorValue) {
        this.jsonEditor.setValue(this.json)
      }
    },
  },
  mounted() {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      mode: 'application/json',
      theme: 'rubyblue', // 主日樣式
      lint: true,
      tabSize: 2,
      smartIndent: true, // 是否智能縮進
      styleActiveLine: true, // 當前行高亮
      lineNumbers: true, // 顯示行號
      gutters: ['CodeMirror-lint-markers'],
      lineWrapping: true, // 自動換行
      matchBrackets: true, // 括號匹配顯示
      autoCloseBrackets: true, // 輸入和退格時成對
      autoRefresh: true, // 自動刷新
    })
    this.jsonEditor.on('change', cm => {
      this.$emit('change', cm.getValue())
    })
  },
  methods: {
    refresh() {
      /*
       * refresh: Fires when the editor is refreshed or resized.
       * Mostly useful to invalidate cached values that depend on the editor or character size. 
       */ 
      this.jsonEditor && this.jsonEditor.refresh()
    },
  },
}
</script>
<style scoped>
  .json-editor {
    height: 100%;
    position: relative;
  }
  .json-editor >>> .CodeMirror {
    height: auto;
    min-height: 250px;
  }
  .json-editor >>> .CodeMirror-scroll {
     min-height: 250px;
  }
  .json-editor >>> .cm-s-rubyblue span.cm-string {
    color: #f08047;
  }
</style>

其中，須要注意的是代碼主題樣式能夠根據本身的喜愛去官網選擇，並引入相應的 css 文件便可，我選擇的是 rubyblue 這個主題

還有個坑就是當編輯器隱藏和顯示時，容易出現樣式錯亂

解決方法是將 autoRefresh 設爲 true，而且加上 refresh 函數，每次打開編輯器時刷新一下編輯器，具體能夠參考一下這篇文章 https://www.cnblogs.com/wenru...。

3. 使用

使用起來很方便，須要的地方直接引入 JsonEditor 組件，直接上代碼

<template>
  <div>
    <json-editor
      ref="jsonEditor"
      :json="json"
      @change="handleJsonChange"
    />
  </div>
</template>
<script>
import JsonEditor from '@/components/JsonEditor'
export default {
  components: {
    JsonEditor,
  },
  data() {
    json: '',
  },
  mounted() {
    // 刷新jsonEditor
    this.$nextTick(() => {
      this.$refs.jsonEditor.refresh()
    })
  },
  methods: {
    handleJsonChange(val) {
      if (this.json !== val) {
        this.json = val
      }
    },
  }
}
</script>

這樣就能夠愉快地編寫 json 代碼了

也會提示格式錯誤。若是輸入的 json 是須要提交的，能夠經過 JSON.parse 來進行校驗，阻止提交

// ...
// 判斷表達式是否符合要求
if (this.json) {
  try {
    JSON.parse(this.json)
  } catch (e) {
    this.$message.warning('請輸入正確的 json')
    return
  }
}
// ...

CodeMirror 功能很是強大，如代碼自動補全、代碼摺疊、綁定 vim 和 設置快捷鍵等功能，能夠官網上查找，本文只記錄了筆者所用到的一些簡單的功能。