开篇小啰嗦

前端开发页面中，有些需求是要求，把json格式和xml格式展现在前端页面，如果只是单纯的美观展示，那么就用一个vue的插件就行---vue-json-view，但是这个插件只能满足展示的需求，如果要求的是返回json数据格式展示，同时还要要求，能在里面编辑。并且还能时刻监听获取到你监听的值，再传给后端，就稍微复杂些。vue-json-view这个插件就不能完成工作了，这个时候出来个神器。CodeMirror就能做到

一、CodeMirror介绍

CodeMirror可以直接嵌入Web页面，提供在线代码编辑器的特性；支持100多种现有编程语言，并可以根据需要实现自定义的Mode；提供丰富的API，以便开发者实现完整的IDE特性。（知道很厉害就行了）

二、怎么使用

1.vue组件引用

如果使用vue引用CodeMirror，直接引用vue-codemirror这个npm包。这个是结合了vue,开发的组件，集成比较好，

npm install vue-codemirror --save

2.单独下载CodeMirror插件

单独下载的话，自己修改基本配置，适用于任何框架，不局限于框架，这里还是使用vue来实现一个框架单独使用插件格式化显示一个json，怎么实现

用脚手架安装配置一个vue的基本框子，
下载codemirror需要的插件

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

3.完整的代码

<template>
  <div class="json-editor">
    <textarea ref="textarea" />
  </div>
</template>

<script>
import CodeMirror from "codemirror";
import "codemirror/addon/lint/lint.css";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/rubyblue.css"; // 主题显示，可以百度搜索其他的主题
require("script-loader!jsonlint");
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";

export default {
  name: "JsonEditor",
  /* eslint-disable vue/require-prop-types */
  //   props: ['value'],
  data() {
    return {
      value: "",
      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));
      }
    },
    immediate: true,
    deep: true
  },
  mounted() {
     // 模拟数据接口
    this.value = [
      {
        items: [
          { market_type: "forexdata", symbol: "XAUUSD" },
          { market_type: "forexdata", symbol: "UKOIL" },
          { market_type: "forexdata", symbol: "CORN" }
        ],
        name: ""
      }
    ];
    // CodeMirror的配置项，搜官网看这里的配置项配置
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      lineNumbers: true, // 是否显示行数
      mode: "application/json",  // 接受的类型，json xml....
      gutters: ["CodeMirror-lint-markers"], // 样式的宽度
      theme: "rubyblue", // 主题
      lint: true
    });

    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
    this.jsonEditor.on("change", cm => {
    //   this.$emit("changed", 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;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}
</style>