阅读 1018

推荐在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中注册即可使用,后面的使用就是一样的,不多赘述。

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

文章分类
前端
文章标签