const placeholder = {
string: 'hello world!',
boolean: true,
color: '#6c928c',
number: 123,
null: null,
array: [1, 2, 3],
object: {a: 'b', c: 'd', e: 'f'}
};
const json_editor = new JSONEditor(document.getElementById("json_editor"), {mode: 'code'}, placeholder);
const tree_editor = new JSONEditor(document.getElementById("tree_editor"), null, placeholder);
tree_editor.expandAll(); function toTree() {
tree_editor.set(JSON.parse(json_editor.getText()));
tree_editor.expandAll();
} function toJson() {
json_editor.setText(JSON.stringify(tree_editor.get(), null, 2))
}

  实现效果

~~~

在线DEMO(https://oktools.net/json)

JSON在线格式化 jsoneditor使用的更多相关文章

  1. json在线格式化校验

    推荐个在线工具箱,json在线格式化转换编码,挺好用的 https://www.codejson.com/

  2. 在线代码格式化,在线JSON校验格式化

    在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具

  3. 推荐一个在线json数据格式化网站

    json数据非常友好方便的处理: 推荐一个在线json数据格式化网站 http://json.parser.online.fr/

  4. JSON在线解析及格式化校验工具 jsonin.com

    JSON在线解析及格式化校验工具 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.它是基 ...

  5. JSon 事件格式化

    JS~json日期格式化   起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,需要格式化时间 实现 function ChangeDateFormat(js ...

  6. PHP json数据格式化方法

    php 的json_encode能把数组转换为json格式的字符串.字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4.人阅读比较困难.现在这个方法在json_encode的基 ...

  7. json在线编辑器

    今天搭建了一个json在线的编辑器. 这个主要的功能就是解析和检查json的语法是不是有错误.在使用json的时候,最担心的就是语法的问题了.尤其是自己手动去拼json格式的输出时候. 如图所示,左边 ...

  8. JSON在线解析,新版本JSON在线解析

    SOJSON,出了新版本的JSON在线解析,真的很好用,可以上下版本.左右版本.效果图如下.它的网址是:http://www.sojson.com/simple_json.html SOJSON集成了 ...

  9. json在线工具

    1.json在线格式化工具 http://www.choujone.com/json/ 2.json在线比较工具 http://tlrobinson.net/projects/javascript-f ...

随机推荐

  1. 阿里云服务器CentOS7.5安装RabbitMQ

    RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台框架上的. 为什么 ...

  2. Codeforces 776C:Molly's Chemicals(思维)

    http://codeforces.com/problemset/problem/776/C 题意:给出一个有n个数的序列,还有一个k,问在这个序列中有多少个子序列使得sum[l, r] = k^0, ...

  3. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  4. umeditor 上传图片 相对路径的设置和保存

    此篇文章仅献给已实现百度富文本编辑器,想要设置相对路径并保存到数据库,方便以后项目迁移. 使用的版本为1.2.3,适用图片上传中点击以及拖拽功能. //保存图片相对地址的设置        //1.请 ...

  5. os.path.dirname(__file__)

    os.path.dirname(__file__) 返回脚本的路径 描述: 必须实际存在的.py文件,如果直接在命令行执行,则会引发异常NameError: name 'file' is not de ...

  6. scrapy基础知识之scrapy自动下载图片pipelines

    需要在settings.py配置: ITEM_PIPELINES = { 'scrapy.pipelines.images.ImagesPipeline': 1, }import os IMAGES_ ...

  7. Java面试题 equals()与"=="的区别?

    面试官:请问 equals() 和 "==" 有什么区别? 应聘者: equals()方法用来比较的是两个对象的内容是否相等,由于所有的类都是继承自java.lang.Object ...

  8. Java项目实例之---学生选课(面向对象复习)

    学生选课(面向对象复习) 设计一个学生选课的程序,分别有学生类(Student)和课程类(Course) 学生类的属性有:学号(String),姓名(String),性别(char),所选科目(Cou ...

  9. Neo4j电影关系图Cypher

    , tagline:'Welcome to the Real World'}) }) }) }) }) }) }) }) CREATE (Keanu)-[:ACTED_IN {roles:['Neo' ...

  10. redux、react-redux、redux-thunk、redux-saga使用及dva对比

    一.redux使用 Redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree ...