Vue JSON校验格式化编辑框 -- jsoneditor

项目要求编辑框要 字体高亮、可编辑、可格式化、可实时检验，这些jsoneditor都可满足，并且还可以一键修复错误

1，安装

第一种方式：

npm install jsoneditor --save

第二种方式：

（当然可以使用cnpm，但当时用了cnpm，但在main.js中引入文件名时不是官方名称，别人在根据package.json文件install后启动项目会报错，需要自己手动改）

直接去package.json文件中，在dependencies中手动添加，然后npm install （可能会需要删除node_modules）即可

2，使用

2.1  main.js 中

import jsoneditor from 'jsoneditor'

Vue.prototype.$jsoneditor = jsoneditor

2.2 对应文件中

<template>
  <div class="hello">
    <div id="jsoneditor" style="width: 600px;height: 400px;"></div>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          
        }
      },
      mounted: function () {
        let container = document.getElementById('jsoneditor')
        let json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World",
        };
        let jsons = [
            {
                "name":"Header Parameters",
                "children":
                    [
                        {
                            "name":"Accept",
                            "dataType":"string",
                            "required":true,
                            "defaultValue":"*/*",
                            "description":"允许接受的类型"
                        }
                    ]
            },
            {
                "name":"Body Parameters",
                "children":[
                    {
                        "name":"username",
                        "dataType":"string",
                        "required":true,
                        "defaultValue":"zhangsan",
                        "description":"用户名"
                    },{
                        "name":"duixiang",
                        "dataType":"object",
                        "required":true,
                        "defaultValue":"",
                        "description":"对象",
                        "children":[
                            {
                                "name":"childName",
                                "dataType":"string",
                                "required":true,
                                "defaultValue":"lisi",
                                "description":"孩子名"
                            },
                            {
                                "name":"childAge",
                                "dataType":"int",
                                "required":true,
                                "defaultValue":"10",
                                "description":"密码"
                            }
                        ]
                      },{
                          "name":"shuzu",
                          "dataType":"array",
                          "required":true,
                          "defaultValue":"",
                          "description":"数组",
                          "children":[
                            {
                                "name":"childNumber",
                                "dataType":"int",
                                "required":true,
                                "defaultValue":"10",
                                "description":"孩子号"
                            }
                          ]
                      }
                  ]
              }
          ]
        let options = {
            mode: 'code',
            modes: ['code'],
            onError: function(err) {
                alert(err.toString());
            }
        }
        var codeEditor = new this.$jsoneditor(container, options);
        codeEditor.set(json)
      },
      methods: {
          
      },
      computed: {
          
      }
    }
</script>
<style>
    
</style>

2-3  获取编辑框中的内容，先初始化声明 this.codeEditorR = {}，再调用方法 getText()

this.codeEditorR.getText()

2-4 需要销毁时，先初始化声明 this.codeEditorR = {}，调用方法 destroy()

this.codeEditorP.destroy()

3，jsoneditor.js 有各种方法的详细说明，需要时自行查阅即可

4，效果图如下