vue中使用Json编辑器-------jsoneditor

Install

npm install jsoneditor --save

Use

# main.js

import jsoneditor from 'jsoneditor'

Vue.prototype.$jsoneditor = jsoneditor

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 options = {
          mode: 'text',
          indentation: 2,
          search: true
        }
let editor = new this.$jsoneditor(container, options)
editor.set(json)

languages

All available fields for translation can be found in the source file src/js/i18n.js.
所有可用的翻译字段都可以在源文件SRC/JS/I18N.JS中找到。

set Mode

# text,view,form,code,tree
editor .setMode('text')

set json

let json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
		};
editor .set(json)

get json

editor .get()

文档地址

jsoneditor：https://github.com/josdejong/jsoneditor/blob/master/docs/api.md