jsonEditor API介绍 JSON编辑器

jsoneditor编辑器是一个基于 Web 的工具，用于查看、编辑、格式化和验证JSON，它可以作为CommonJS模块，AMD模块或常规javascript文件加载。

支持的浏览器：Chrome，Firefox，Safari，Opera，Edge，Internet Explorer 11。

官网地址

https://jsoneditoronline.org/

CND文件地址

https://www.bootcdn.cn/jsoneditor/

JSONEditor具有多种模式，具有以下功能

modes: 'code', 'form', 'text', 'tree', 'view', 'preview'

tree:更改、添加、移动、删除和复制字段和值

code:可编辑所有内容

form:只能修改value值

preview:可以支持大型JSON文档

JSON编辑器示例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" rel="stylesheet">
    <style>
    #jsoneditor {
        width: 360px;
        height: 400px;
        margin-bottom: 20px;
    }
    </style>
</head>
 
<body>
    <div id="jsoneditor"></div>
    <button onclick="getText()">获取修改后的JSON文本数据</button>
    <script>
    // 创建 editor
    var container = document.getElementById("jsoneditor");
    // 参数信息
    const options = {
        mode: 'form',
        onChange() {
            // 加载完成，JSON数据发生变化触发的函数
        },
        onChangeJSON(json) {
            // 数据发生变化，改变之后的json
        },
        onChangeText(text) {
            // 数据发生变化，改变之后的字符串
        },
        onError(error) {
            // 主动的修改已触发发生错误时
        },
        history: false
    }
    // 配置参数
    var editor = new JSONEditor(container, options);
    // 显示的数据
    var initialJson = {
        "Array": [1, 2, 3],
        "Boolean": true,
        "Null": null,
        "Number": 123,
        "Object": { "a": "b", "c": "d" },
        "String": "Hello World"
    }
 
    editor.set(initialJson)
 
    function getText() {
        //获得修改之后的文本数据
        var getText = editor.getText();
        alert(getText);
    }
    </script>
</body>
 
</html>

参考地址：https://blog.csdn.net/chuyang11/article/details/129040090

附：

options参数列表：

this.options = {
search: true,
history: true,
mode: 'tree',
name: undefined,
// field name of root node
schema: null,
schemaRefs: null,
autocomplete: null,
navigationBar: true,
mainMenuBar: true,
limitDragging: false,
onSelectionChange: null,
colorPicker: true,
onColorPicker: function onColorPicker(parent, color, onChange) {
if ((vanilla_picker_default())) {
// we'll render the color picker on top
// when there is not enough space below, and there is enough space above
var pickerHeight = 300; // estimated height of the color picker

var top = parent.getBoundingClientRect().top;
var windowHeight = (0,util.getWindow)(parent).innerHeight;
var showOnTop = windowHeight - top < pickerHeight && top > pickerHeight;
new (vanilla_picker_default())({
parent: parent,
color: color,
popup: showOnTop ? 'top' : 'bottom',
onDone: function onDone(color) {
var alpha = color.rgba[3];
var hex = alpha === 1 ? color.hex.substr(0, 7) // return #RRGGBB
: color.hex; // return #RRGGBBAA

onChange(hex);
}
}).show();
} else {
console.warn('Cannot open color picker: the `vanilla-picker` library is not included in the bundle. ' + 'Either use the full bundle or implement your own color picker using `onColorPicker`.');
}
},
timestampTag: true,
timestampFormat: null,
createQuery: jmespathQuery/* createQuery */.r,
executeQuery: jmespathQuery/* executeQuery */.J,
onEvent: null,
enableSort: true,
enableTransform: true
}; // copy all options

posted @ 2023-12-21 21:10 八方鱼阅读(1463) 评论(0) 收藏举报

八方鱼

jsonEditor API介绍 JSON编辑器

公告