荐在vue中最好用的编辑器 —— vue-json-editor

在尝试了好几种编辑器后，终于找到了一款最满意的编辑器，推荐给大家，十分的好用

下面分两个版本，我的项目用的是nuxt.js，是服务端渲染，有时候就会报一下window，document，语法等错误，这些包都需要在nuxt.config.js中配置一下

• 首先 npm install vue-json-editor --save

服务端渲染，建议全局注册

// 在plugins文件夹下创建vue-json-edotor.js
import Vue from 'vue';
import VueJsonEditor from 'vue-json-editor';

Vue.component('vue-json-editor', VueJsonEditor);

export default () => {
  Vue.use(VueJsonEditor);
};

// 在nuxt.config.js中配置，这些包都要在服务端禁用
module.exports = {
  plugins: [
    { src: '@/plugins/ace-builds', ssr: false },
    { src: '@/plugins/vue-json-pretty', ssr: false },
    { src: '@/plugins/vue-json-editor', ssr: false },
  ],
}

// 在vue文件中直接引入组件即可
<div class="flow-container">
  <el-dialog :visible.sync="vueJsonEditorVisible">
    <div class="route-management">
      <vue-json-editor
        v-model="procedure.values" // 放json数据
        :show-btns="true"
        :mode="'code'"
        :key="vueJsonEditorKeys" // 每次点击让key变化，防止数据有误
        lang="zh"
        class="vue-json-editor"
        @json-change="onJsonChange"
        @json-save="onJsonSave"/>
    </div>
  </el-dialog>
</div>

methods: {
  onJsonChange(value) {
    console.log('value:', value);
  },
  onJsonSave(value) {
    console.log('value:', value);
  },
}

// 不要加scoped，不然不生效，但是也不会污染其他地方的样式，要在他的最外面包一层div取一个唯一的类名即可，高度根据自己的需求做调整
<style lang="less">
.flow-container {
  .el-dialog__wrapper {
    height: 100vh !important;

    .el-dialog {
      margin-top: 2vh !important;
      height: 90vh !important;

      .route-management {
        height: 74vh !important;

        .vue-json-editor {
          height: 74vh !important;
        }

        .jsoneditor-vue {
          height: 100% !important;
        }
      }
    }
  }
}
</style>

普通vue，使用起来就方便多了，可以全局注册，也可以组件注册，直接引入，在components中注册即可使用，后面的使用就是一样的，不多赘述。

真的是见过最好的编辑器了，如果大家有更好的，希望留言给我，我去康康，谢谢啦