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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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

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