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

浅浅的花香味﹌ 2022-12-27 14:04 247阅读 0赞

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

**下面分两个版本，我的项目用的是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中注册即可使用，后面的使用就是一样的，不多赘述。 ####

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