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>源文注释
/**
* @constructor JSONEditor
* @param {Element} container Container element
* @param {Object} [options] Object with options. available options:
* {String} mode Editor mode. Available values:
* 'tree' (default), 'view',
* 'form', 'text', and 'code'.
* {function} onChange Callback method, triggered
* on change of contents.
* Does not pass the contents itself.
* See also `onChangeJSON` and
* `onChangeText`.
* {function} onChangeJSON Callback method, triggered
* in modes on change of contents,
* passing the changed contents
* as JSON.
* Only applicable for modes
* 'tree', 'view', and 'form'.
* {function} onChangeText Callback method, triggered
* in modes on change of contents,
* passing the changed contents
* as stringified JSON.
* {function} onError Callback method, triggered
* when an error occurs
* {Boolean} search Enable search box.
* True by default
* Only applicable for modes
* 'tree', 'view', and 'form'
* {Boolean} history Enable history (undo/redo).
* True by default
* Only applicable for modes
* 'tree', 'view', and 'form'
* {String} name Field name for the root node.
* Only applicable for modes
* 'tree', 'view', and 'form'
* {Number} indentation Number of indentation
* spaces. 4 by default.
* Only applicable for
* modes 'text' and 'code'
* {boolean} escapeUnicode If true, unicode
* characters are escaped.
* false by default.
* {boolean} sortObjectKeys If true, object keys are
* sorted before display.
* false by default.
* {function} onSelectionChange Callback method,
* triggered on node selection change
* Only applicable for modes
* 'tree', 'view', and 'form'
* {function} onTextSelectionChange Callback method,
* triggered on text selection change
* Only applicable for modes
* {HTMLElement} modalAnchor The anchor element to apply an
* overlay and display the modals in a
* centered location.
* Defaults to document.body
* 'text' and 'code'
* {function} onEvent Callback method, triggered
* when an event occurs in
* a JSON field or value.
* Only applicable for
* modes 'form', 'tree' and
* 'view'
* {function} onFocus Callback method, triggered
* when the editor comes into focus,
* passing an object {type, target},
* Applicable for all modes
* {function} onBlur Callback method, triggered
* when the editor goes out of focus,
* passing an object {type, target},
* Applicable for all modes
* {function} onClassName Callback method, triggered
* when a Node DOM is rendered. Function returns
* a css class name to be set on a node.
* Only applicable for
* modes 'form', 'tree' and
* 'view'
* {Number} maxVisibleChilds Number of children allowed for a node
* in 'tree', 'view', or 'form' mode before
* the "show more/show all" buttons appear.
* 100 by default.
*
* @param {Object | undefined} json JSON object
*/