After trying several kinds of editors, I finally found a most satisfactory editor and recommended it to everyone. It is very easy to use
There are two versions below. My project uses Nuxt.js, which is server side rendering, and sometimes I will report window, document, syntax errors, etc. These packages need to be configured in nuxt.config.js
npm install vue-json-editor --save
- Server rendering, global registration is recommended
// Create 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); }; Module. exports = {plugins: [{SRC: '@/plugins/ace-builds', SSR: false}, {SRC: // Buildbuilds-builds = {plugins: [{SRC: '@/plugins/ace-builds', SSR: false}, {SRC: '@/plugins/vue-json-pretty', ssr: false }, { src: '@/plugins/vue-json-editor', ssr: false }, ], <div class="flow-container"> <el-dialog :visible. Sync ="vueJsonEditorVisible"> <div Class ="route-management"> <vue-json-editor v-model="procedure.values" :show-btns="true" :mode=" code" VueJsonEditorKeys :key="vueJsonEditorKeys" Lang =" en "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); },} // do not add scoped, otherwise it won't work, but it won't pollute the style elsewhere. <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>Copy the code- General vUE is much easier to use, can be registered globally, can also be registered in components, directly introduced, registered in components can be used, the use of the following is the same, no further details.