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. Ubuntu18.04安装postgresql-10

    Ubuntu18安装postgresql-10 最近切换Ubuntu作为办公系统,所有软件安装都要重来一遍. 官方文档: https://www.postgresql.org/download/lin ...

  2. JAVA写入大文件DEMO

    /**     * 读取filePath的文件     * @param filePath    文件的路径     * @return     List集合       文件中一行一行的数据     ...

  3. redux和react-redux做简单组件控制

    这次我们用两种方式实现以下要求 1.三个组件 2.第一个组件有两个按钮 分别控制第二和第三个组件年龄和姓名的改变 3第二个组件展示姓名,第三个组件展示年龄 用到哪些插件 store  redux 一 ...

  4. 如何提高Sprint Review的质量?

    Sprint Review不是回顾,其目标是演示这个Sprint中自己的工作成果,参会人员包括设计师.开发人员和Product Owner.在Worktile,我们尽量保持Sprint评审会的轻松随意 ...

  5. VUE-CLI3.0安装和使用echart方法

    在Vue中使用echarts的两种方式 npm webpack vue-cli echarts vue.js   准备:使用vue-cli脚手架 如果你已经有自己的项目,可以跳过这一步. npm下载v ...

  6. [NOI2014]魔法森林题解

    这道题正解其实是LCT,然而貌似SPFA也可以成功水过,所以根本不知道LCT的我只能说SPFA了. 这道题最大的限制是两种精灵就意味着一条道可能有两个权值,因此我们需要去将其中一个固定,然后再推另一个 ...

  7. jekyll搭建个人博客2

    目录 个性化 jekyll目录结构 修改个人信息 修改头像 修改背景颜色 关于头像的效果 图片问题 域名 个性化 jekyll目录结构 个性化就是要对文件内容作出修改,使得博客外观发生变化,在修改文件 ...

  8. 洛谷P4304 [TJOI2013]攻击装置 题解

    题目链接: https://www.luogu.org/problemnew/show/P4304 分析: 最大独立集 最大独立集=总点数-最大匹配数 独立集:点集,图中选一堆点,这堆点两两之间没有连 ...

  9. C++小游戏——井字棋

    #include<cstdio> #include<windows.h> #include<ctime> int main() { srand(time(NULL) ...

  10. svg文字描边动画

    svg动画在网页中是经常见到的,svg动画使得网页看起来清新美观 任何不规则图形都可以由svg绘制完成,当然也包括文字,文字本身就可以看作一个不规则图形