使用JsonEditor开源组件写了一个Json Viewer

工作中经常要查看一些无格式化的json数据, 下载了几个桌面的json应用, 都不是很理想. 以前常用的都是一些在线的json viewer. 比如[url=http://json.parser.online.fr/]这个[/url]. 不过有时候受到网络的限制, 在github上找到一个不错的[url=https://github.com/josdejong/jsoneditor]jsoneditor[/url]组件, 改造一下, 自用更方便

<!DOCTYPE HTML><html><head>  <title>JSONEditor | Switch mode</title>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <!-- json editor -->  <link rel="stylesheet" type="text/css" href="../jsoneditor.css">  <script type="text/javascript" src="../jsoneditor.js"></script>

  <!-- ace editor -->  <script type="text/javascript" src="../asset/ace/ace.js"></script>

  <!-- json lint -->  <script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>

  <style type="text/css">    body {      font: 10.5pt arial;      color: #4d4d4d;      line-height: 150%;      width: 500px;    }

    code {      background-color: #f5f5f5;    }

    #container1 {      width: 500px;      height: 800px;    }

    #container2 {      width: 900px;      height: 800px;    }  </style></head><body><table>  <tbody>    <tr>      <td><div id="container1"></div></td>      <td><div id="container2"></div></td>    </tr>  </tbody></table>

<script type="text/javascript" >

  var container1 = document.getElementById('container1');  var options1 = {    mode: 'text',    error: function (err) {      alert(err.toString());    },    change: function(){      if (editor1 != null){        editor2.setText(editor1.getText());        editor2.expandAll();      }    }  };  var editor1 = new JSONEditor(container1, options1, null);

  var container2 = document.getElementById('container2');  var options2 = {    mode:"view",    error: function(err){      alert(err.toString());    }  };  var editor2 = new JSONEditor(container2, options2, null);

  editor1.setText("");  editor1.textarea.focus();

</script></body></html>

使用JsonEditor开源组件写了一个Json Viewer相关推荐

如何用开源组件“攒”出一个大数据建模平台？
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
金融行业开源技术应用社区（FINOC）研讨实录：开源组件安全问题与升级方式
科技云报道原创. 在开源成为全球趋势的今天,抢跑科技创新的金融机构成为开源技术的重度用户.然而,由于我国金融机构对开源软件的管理尚不完善,不具备较成熟的开源治理体系,金融机构在引入和管理开源软件时总会 ...
用 Go 手写一个 JSON 序列化器
用 Go 手写一个 JSON 序列化器方案实现字符串转义忽略类型序列化器主体数字和逻辑类型字符串类型数组类型字典类型自定义结构类型指针类型 API 使用安装调用测试开源和 ...
我写了一个微信排版编辑器（已开源）
一个好用的排版编辑器目录前言使用 Markdown 的痛点实现一个编辑器功能介绍体验地址开源前言哈喽,大家好,我是小马,去年年底,我开通了微信公众号"JS 酷", ...
写了一个puppet web 管理界面，打算开源
2019独角兽企业重金招聘Python工程师标准>>> 写了一个puppet web 管理界面,打算开源大家觉得怎么样 ? 转载于:https://my.oschina.net/u ...
如何写出一个confirm组件
前言一直都想写一个组件库,作为一个前端的我一直都有这么一个梦想,在写项目的过程中一直都在引用别人的组件库长久而言自己也开始想写一个组件库.什么是组件呢?这里不再过的赘述,下面我们先谈一谈confir ...
java json帮助类_java 写一个JSON解析的工具类
上面是一个标准的json的响应内容截图,第一个红圈"per_page"是一个json对象,我们可以根据"per_page"来找到对应值是3,而第二个红圈&quo ...
C++写的一个聊天室代码，用于XEIM开源即时通讯软件上的
// C++写的一个聊天室代码,用于XEIM开源即时通讯软件上的,欢迎大家一起交流. // XEIM_ChatroomDlg.cpp : implementation file // [即时通讯软件] ...
@bean 什么时候执行_写好一个Spring组件的实现步骤是什么？
这篇文章主要介绍了如何写好一个Spring组件的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,希望可以帮助到大家! 本文详细的介绍了Spring组件的实现步骤, ...

使用JsonEditor开源组件写了一个Json Viewer

使用JsonEditor开源组件写了一个Json Viewer相关推荐

最新文章

热门文章