`

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

    博客分类:
  • Ajax
阅读更多
工作中经常要查看一些无格式化的json数据, 下载了几个桌面的json应用, 都不是很理想. 以前常用的都是一些在线的json viewer. 比如这个. 不过有时候受到网络的限制, 在github上找到一个不错的jsoneditor组件, 改造一下, 自用更方便
<!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>
分享到:
评论
3 楼 1366079959 2016-05-27  
能不能直接弄个demo
2 楼 yangsxy 2015-05-05  
大神能直接上传您的完整包么?谢谢
1 楼 draem0507 2014-12-01  
本地化工具

相关推荐

    HTML版JsonViewer

    4. **基于JsonEditor组件**:JsonViewer的实现依赖于JsonEditor组件,这是一个强大的JavaScript库,它提供了丰富的API和配置选项,允许用户自定义视图样式、编辑功能等,以满足不同的需求。 5. **交互性**:Json...

    JsonEditor编辑器

    2. **实时验证**:JsonSchema是一个JSON格式的规范,用于定义JSON数据的结构和约束。JsonEditor可以结合JsonSchema进行实时验证,确保用户输入的数据符合预设的规则,避免了无效或错误的数据。 3. **可定制性**:...

    jsoneditor_javascript_JSON_jsoneditor9.1.4_json-editorjs_

    JSONEditor9.1.4是该工具的一个特定版本,可能包含了性能优化、新功能或bug修复。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Web开发中,...

    jsoneditor-1.7.0 jsoneditor.js中文提示版

    JSONEditor是一款强大的在线JSON编辑器,它为用户提供了一个直观、易用的界面来查看、编辑和格式化JSON数据。在1.7.0版本中,它包含了一个中文提示版,使得中文用户在使用过程中能够更好地理解和操作。JSONEditor的...

    JSONEditor格式化

    JSONEditor提供了一个清晰的树形视图,使得复杂的数据结构一目了然。用户可以通过点击加减号展开或折叠键值对,快速定位到所需信息。此外,它还支持文本编辑模式,可以像编辑普通文本一样编辑JSON数据,便于进行...

    jsonEditor Editor json

    `jsonEditor` 是一个强大的JSON数据编辑器,它为用户提供了可视化的界面来创建、查看和编辑JSON数据。这个编辑器支持多种功能,如颜色编码、错误检测、树形视图和代码视图切换,使得处理JSON数据变得更加直观和便捷...

    jsoneditor 离线版

    总的来说,JSONEditor离线版提供了一个便捷的本地环境来管理和编辑JSON数据,对于开发人员和数据分析师来说,是一个非常实用的工具。其简洁的界面和强大的功能使得JSON数据的处理变得更加简单和快捷。

    jsoneditor 后台管理展示Json数据的专用模板 (html + js +css)

    通过理解这些关键点,你可以充分利用JSONEditor模板,创建一个高效、用户友好的后台管理系统,用于展示和编辑JSON数据。在实际开发中,根据项目需求进行适当的定制和优化,可以进一步提升其功能和用户体验。

    json-editor

    JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行的CSS 框架,例如bootstrap, ...jsoneditor.* filereader.js FileSaver.js

    jsoneditor.rar

    总的来说,JSONEditor是一个非常实用的工具,无论你是初学者还是经验丰富的开发者,都能帮助你更好地管理和编辑JSON数据。有了本地版,你可以在离线环境下工作,避免网络延迟,提高效率。只需简单几步,你就能拥有一...

    JSON Editor.zip

    `JSON Editor Online` 是一个在线工具,提供了一个友好的界面来处理JSON数据。离线版的`JSON Editor`允许用户在没有网络连接的情况下也能进行JSON数据的编辑工作,这对于开发和调试过程非常有用。 在该压缩包"JSON ...

    【非常漂亮,开源】jsoneditor

    为了方便用户,JSONEditor还提供了一个在线版本,无需下载安装即可直接在浏览器中使用,这对于需要临时处理JSON数据或者在不同设备间切换工作的用户来说,无疑增加了极大的便利性。 总结来说,JSONEditor是一个强大...

    jsonEditor离线版

    在“jsonEditor离线版”中,我们可以将这个功能带到本地,无需互联网连接即可进行JSON数据的管理工作。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛应用于Web服务和API接口,因为它易于人...

    《Json Editor》 delphi下Json Editor 单元,有测试例子.

    cxTL是一个Delphi组件库,可能为Json Editor提供了丰富的控件和界面元素支持。而SuperObject是一个流行的、高性能的JSON解析和生成库,使得Json Editor能够高效地处理JSON数据,包括读取、写入、验证和转换JSON格式...

    JSON Viewer

    这款应用提供了一个直观的界面,使得非编程背景的人员也能理解JSON数据的结构。 使用JSON Viewer,你可以将包含JSON数据的字符串简单地复制并粘贴到文本区域。工具会自动识别并解析JSON文本,然后在新的标签页中以...

    jsoneditor/JSON编辑器 、html + script

    JSON编辑器是一个基于web的工具,用于查看、编辑、格式化和验证JSON。它有各种模式,如树编辑器、代码编辑器和纯文本编辑器。编辑器可以用作您自己的web应用程序中的组件。它可以作为CommonJS模块、AMD模块或常规...

    MAC下Json编辑器Json Editor

    在MAC操作系统上,对于JSON数据的处理,一个直观且高效的工具——"MAC下Json编辑器Json Editor"显得尤为重要。这款编辑器提供了一个图形化的用户界面,使得查看和编辑JSON对象变得轻松快捷。 在JSON Editor中,你...

    JsonViewer 一款很好的JSON排版软件

    - **学习理解**:对于初学者来说,通过可视化的方式了解JSON结构,JsonViewer是一个非常有用的辅助工具。 总之,JsonViewer作为一款实用的JSON查看和排版工具,它简化了JSON数据的解析过程,提高了工作效率,是...

    一款免费轻量级JSON Editor For Mac

    在标签中,“json”和“jsoneditor”进一步明确了这个软件的核心功能,即专注于JSON数据的处理和编辑。用户可以通过这款编辑器进行数据格式验证,确保符合JSON规范,避免因格式错误导致的问题。 根据提供的压缩包子...

    JSON Editor Online 2.3.4.zip

    JSON Editor Online是一个简单的,灵活的,可视化的JSON编辑器。在一个简洁的界面,它使您能够快速创建,查看、编辑和格式化你的JSON文件。 JSON Editor Online 2.3.4 更新日志:2013-11-19 - 对IE8的支持,清理...

Global site tag (gtag.js) - Google Analytics