vue中使用json-editor个人总结_vue-json-editor

jdorn/json-edior在线体验

json编辑器有很多种,这边为了呈现给用户看,所以无法使用原始的json编辑器,于是使用的是jdorn/json-editor

相比较而言,这款编辑器更适合用户操作,之前考虑过 jsoneditor 和vue-json-viewer,发现这两款更适合有代码基础的人来使用,于是没有使用这两款json编辑器.

使用json-editor时参考了以下两篇博客

JSON Editor 中文文档
Vue 项目使用 json-editor (一)

不过按照上叙博客中的搭建方法会发现this上没有挂载到JSONEdior方法,于是根据import '@json-editor/json-editor'找到了这个js文件,发现这个日期有点感人,比我还先出生.

然后拉了官方实例,将官方实例中的js文件拷贝到assets或者plugins文件夹下,在需要使用的地方import "@/plugins/jsoneditor.js";引入即可,然后打印this或者window,就会发现挂载到了JSONEditor方法.就可以正常调用了,最后把这个整理成了一个组件,按需调用

此处采用的foundation5主题,如果要使用,需要下载相关css文件,不然可能显示有问题
组件

<template>
    <div class="json_editor">
        <div id="editor_holder"></div>
        <div class="editor-button">
            <el-button type="success">提交</el-button>
            <el-button type="danger">取消</el-button>
        </div>
    </div>
</template>
<script>
//根据自己的相关文件位置找到对应路径
import "@/plugins/jsoneditor.js";  
import "@/assets/css/foundation.min.css";
import "@/assets/css/font-awesome.css";

export default {
    props: {
        jsonData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {};
    },
    mounted() {
        let schema = {
            title: "Person",
            type: "object",
            properties: {},
        };
        let element = window.document.getElementById("editor_holder");
        let config = {
            schema: {},
            theme: "foundation5",       //设置主题,可以是bootstrap或者jqueryUI等
            iconlib: "fontawesome4",    //设置字体
            disable_properties: true,   //如果设置为 true, 将隐藏编辑属性按钮.
            // required_by_default: true,
            // disable_edit_json: true, //如果设置为 true, 将隐藏 Edit JSON 按钮.
            object_layout: "grid",      //属性为object时,属性默认normal,设置grid可以一排多个
            disable_collapse: true,     //如果设置为 true, 对象和数组不再显示“折叠”按钮.
        };
        config["schema"] = schema;
        this.editor = new window.JSONEditor(element, config);
        let data = this.jsonData
        this.editor.setValue({ data });
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
.json_editor {
    .editor-button {
        width: 1170px;
        margin: auto;
    }
}
</style>

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

调用处

<template>
    <div class="pratice">
        <JsonEditor :jsonData="jsonData"/>
    </div>
</template>
<script>
import JsonEditor from "@/components/JsonEditor";
export default {
    data() {
        return {
            jsonData: {
                amf: {
                    sbi: [
                        {
                            addr: "127.0.0.5",
                            port: 7777,
                        },
                    ],
                    ngap: [
                        {
                            addr: "10.88.120.1",
                        },
                    ],
                },
                parameter: null,
                max: null,
                pool: null,
                time: null,
            },
        };
    },
    mounted() {},
    components: {
        JsonEditor,
    },
    methods: {},
};
</script>
<style lang="scss" scoped></style>

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

汉化问题

如果要将英文换成中文,需要去jsoneditor.js文件中将对应英文改成中文即可,样式自己慢慢调吧