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

最新推荐文章于 2024-06-02 09:45:21 发布

iteye_14294

最新推荐文章于 2024-06-02 09:45:21 发布

阅读量1.8k

点赞数 1

分类专栏： Ajax 文章标签： json JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_14294/article/details/82584280

版权

Ajax 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

工作中经常要查看一些无格式化的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>

iteye_14294

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用JsonEditor开源组件写了一个Json Viewer

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

扫一扫

专栏目录