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>// 创建 editorvar 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

*/

jsonEditor API介绍 JSON编辑器相关推荐

  1. antd picker 使用 如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...

    前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...

  2. 一个好用的 JSON 编辑器 JsonEditor V1.03.2

    一个好用的 JSON 编辑器 JsonEditor V1.03.2 点击打开 JsonEditor V1.03.2 JSON 因为其它简单易用,被广泛应用的 web 程序上.JSON的良好结构性,使得 ...

  3. 使用jsonEditor打造一个复杂json编辑器

    最近研究一个web版的json编辑器,在github中搜索,发现了这个利器. https://github.com/jdorn/json-editor 几经研究,终于把该控件的大部分功能研究透彻. 发 ...

  4. html代码编辑器jason,GitHub - 2947721120/jsoneditor: json编辑器

    JSON 编辑器 描述 JSON编辑器是一个基于网络的工具来查看.编辑和格式JSON. 这模式如树有各种编辑器,代码编辑器和一个纯文本 . 编辑可以作为你自己的Web应用程序的一个组成部分.图书馆可以 ...

  5. VUE3使用JSON编辑器

    1.先看看效果图,可以自行选择展示效果 2.这是我在vue3项目中使用的JSON编辑器,首先引入第三方插件 npm install json-editor-vue3yarn add json-edit ...

  6. tinymce系列（三） tinymce 常用API介绍

    文章目录 tinymce 常用 API 介绍 引入模块 注册插件 获取编辑器传入的参数 事件监听与派发 tinymce 内置请求 动态添加资源 获取和操作 dom 节点 和 操作 html 获取光标选 ...

  7. 51js 的json编辑器

    无忧JSON编辑器[辅助工具] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. 【Go API 开发实战 2】RESTful API 介绍

    RESTful API 介绍 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数或者接口,目的是提供应用程序与开发人员基于某软件或硬件得 ...

  9. elasticsearch 6.x (五) 单一文档 API 介绍和使用 update和delete API

    大家好,我是烤鸭: 今天分享的是官网6.x    单一文档(Single document APIs)APIs. 本文这是部分翻译,如果想看全部的,还是建议阅读官方api.链接: https://ww ...

最新文章

  1. python运行错误怎么查找_求助，python的二分法查找，按照视频上的代码写下来，结果运行错误...
  2. TeraTerm设定（窗体大小，字体字号）保存为默认值
  3. SICC大会发布银行、保险用户报告——详解C2B下的服务创新
  4. Vue文件的缩进改为4个空格
  5. maven中snapshot快照库与maven-metadata.xml
  6. 【CCF】201803-1 跳一跳
  7. NTLDR is missing Press any key to restart
  8. genymotion集成eclipse插件安装教程
  9. 安卓端gis_微图手机版下载-微图(GIS软件工具)下载v2.1.7安卓版-西西软件下载
  10. 关于多媒体编解码器和音视频格式
  11. 二阶魔方万能还原公式_二阶魔方复原公式
  12. 【ACWing】1402. 星空之夜
  13. 东进的语音卡编程：最简单的电话外呼程序
  14. 搭建简易客户端从tftp服务器中下载文件
  15. 面试官问我 RabbitMQ 消息如何插队？
  16. 【参赛作品37】openGauss/MogDB数据库函数创建的两种风格
  17. Postman使用技巧之三：用Postman生成Request代码
  18. 虚拟机与MySQL的安装及配置
  19. 温度传感器Pt100 热电阻的原理
  20. sap成本流怎么看_SAP成本计算过程

热门文章

  1. qprocess终止其它程序
  2. 大智慧公式系统：条件选股之技术指标选股
  3. 给Mac安装Win10,windows支持软件未能存储到所选驱动器解决方案，万能方法。
  4. 智能体脂秤方案——基于4位单片机体脂秤方案设计_西城微科
  5. 使用Nero 8刻录CentOS启动盘
  6. Python源代码保密、加密、混淆
  7. AvAudioPlayer可以播放下载中的mp3文件吗？
  8. web三件套（经验贴）Google里，video标签播放mkv视频文件
  9. 已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组。注：参赛球队列表见附录注2：使用Math.random 来产生随机数。（也可以使用其它方法）
  10. 数学建模——派出所选址