Vue2中使用CodeMirror 實現JSON編輯器

將如下代碼封裝成JsonEditor組件

<template>
  <div class="json-editor">
    <el-row style="height: 100%;overflow-y: auto;">
      <textarea ref="codemirror"/>
    </el-row>
    <slot></slot>
  </div>
</template>

<script>
// 引入CodeMirror和基礎樣式
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
// JSON代碼高亮需要由JavaScript插件支持
import "codemirror/mode/javascript/javascript.js";
// 選擇IDEA主題樣式，還有其他很多主題可選
import "codemirror/theme/idea.css";
// 支持使用Sublime快捷鍵
import "codemirror/keymap/sublime.js";
// 搜索功能的依賴
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
// 支持搜索功能
import "codemirror/addon/search/search";
import "codemirror/addon/search/searchcursor.js";
// 支持各種代碼折疊
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
// 支持代碼區域全屏功能
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/display/fullscreen.js";
// 支持括號自動匹配
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/edit/closebrackets.js";
// 支持代碼自動補全
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
// 行注釋
import "codemirror/addon/comment/comment.js";
// JSON錯誤檢查
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
// 需要依賴全局的jsonlint，不是很優雅
import "codemirror/addon/lint/json-lint.js";
//及時自動更新，配置里面也需要設置autoRefresh為true
import 'codemirror/addon/display/autorefresh';
// 引入jsonlint
import jsonlint from "jsonlint-mod";
window.jsonlint = jsonlint;

export default {
  name: "JsonEditor",
  /* eslint-disable vue/require-prop-types */
  props: {
    value: [String, Number, Object, Array],
    readOnly: [Boolean],
  },
  data() {
    return {
      jsonEditor: false
    };
  },
  // 監聽是否數據改變，隨時更新json數據
  watch: {
    value(value) {
      // console.log(value);
      const editorValue = this.jsonEditor.getValue();
      if (value !== editorValue) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
      }
      this.jsonEditor.refresh()
    },
  },
  mounted() {
    // CodeMirror的配置項，搜官網看這里的配置項配置
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.codemirror, {
      mode: "application/json",  // 接受的類型，json xml....
      smartIndent: true, // 是否智能縮進
      styleActiveLine: true, // 當前行高亮
      lineNumbers: true, // 是否顯示行數
      indentUnit: 2, // 縮進單位，默認2
      gutters: [
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
        "CodeMirror-lint-markers",      // CodeMirror-lint-markers是實現語法報錯功能
      ],
      lint: true,
      //lineWrapping: true, // 自動換行
      matchBrackets: true, // 括號匹配顯示
      autoCloseBrackets: true, // 輸入和退格時成對
      readOnly: this.readonly, // 只讀
      foldGutter: true,
      autoRefresh: true
    });

    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
    this.jsonEditor.on("change", cm => {
      this.$emit("changed", cm.getValue());
      // this.$emit('input', cm.getValue())
      // 編輯json框里面的內容可以時刻監聽到值，通過cm.getValue()獲取到
    });
  },
  methods: {
    getValue() {
      return this.jsonEditor.getValue();
    },
  }
};
</script>

<style scoped>
.json-editor {
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll {
  min-height: 300px;
}
</style>

可以使用如下方式調用

<JsonEditor ref="jsonEditor" v-model="jsonValue">
  <el-row type="flex" justify="center" style="margin-top: 10px">
    <el-button type="primary" @click="onJsonSave" size="mini">保存</el-button>
  </el-row>
</JsonEditor>

通過定義的getValue獲取json值

onJsonSave(){
  let value = this.$refs.jsonEditor.getValue()
  if (this.jsonValue !== value) {
    this.jsonValue = value;
  }
}