线上 JSON 编辑工具

Feb 18th, 2011 Translate Leave a comment Go to comments

这是一个译文, 文中谈及的 JSON 编辑工具和原文已经是 2007 年的产物. 浏览器兼容也是很老的版本, 但工具在新型浏览器中使用正常. 今日看到一个网友的博客提到这个 JSON 编辑器, 试用了一下感觉不错, 起码可以满足我的需求, 所以顺便翻译一下分享出来. 译文如下:

过去数个星期我一直在寻找一款包括树形视图的 JSON 编辑工具. 你可以通过这么个工具获得满意的 JSON 结构综述, 并且能够轻松地对结构作出修改.

是的, 我[1]知道那中表现形式有点像 Firebug, 而事实上找到了 Calm_Pear 的 promising attempt. 但我觉得两个都不足以满足我最初的需求, 所以我写了自己的工具.

JSON 编辑器

你可以线上试用或者下载源代码 (zip 文件, 26 KB).

如何使用

源代码中包含一个 HTML 示例文件. 作为作者我认为例子中的用户界面是相当直接了当的, 但我还是会做一些解释的. 你需要引入脚本, 并在 HTML 内创建两个包括 id 的 div, 一个用于放置树形结构, 另一个将用来显示编辑表单. 页面加载是, 你会通过下面的方法来激活整个事件: 

1

JSONeditor.start (treeDivName,formDivName,JSONobject,ShowExampleList)

JSONeditor 是一个 JavaScript 对象, 其中 JSONobject (JSON 结构代码) 和 ShowExampleList 两个参数用于控制默认的显示内容和示例列表显示与否. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
<script src="JSONeditor.js"></script>
<script>
onload=function(){
     JSONeditor.start('tree','jform',{},true)
}
</script>
</head>
<body>
<div style="position:absolute;top:10px;left:10px" id="tree"></div>
<div style="position:absolute;top:10px;left:400px" id="jform"></div>
</body>
</html>

使用树形视图

所有对象和数组, 包括他们的子节点都会以文件夹形式显示. 使用的规则如下:

  • 点击加好展开文件夹, 点击减号折叠文件夹. 点击一个节点将在编辑器中加载节点对应的结构.

Label, Value 和 Data type 区域

  • Label 区域显示的是选中节点的 JSON 路径. 在保存之前你可以随意修改对应的路径和 Label.
  • Value 区域显示的是 JSON 的表达式. 唯一的例外是字符串, 为了方便阅读, 字符串类型显示为打印文本, 而不是 JSON 表达式.
  • Data type 区域显示的是编辑节点的数据类型. 你可以改变它，虽然只是相当于基本类型的转换.

保存更改

  • 点击 Save 按钮保存所有你对 Lable, Value 和 Data type 的修改.

删除节点

  • 点击 Delete 删除当前选中的节点.

重命名节点

  • 点击 Rename 对当前选中的节点进行重命名. 程序会提示你输入新的节点名称. (这相当于在 Label 区域进行修改.)

添加子节点和邻节点

  • 点击 Add child 在选中的对象或数组上添加一个子节点.
  • 点击 Add sibling 在选中节点之后添加一个同级的节点.

如果选中 Add children first/siblings before 选项:

  • 一个新增子节点将被添加到所有子节点之前.
  • 一个新增邻节点将被添加到选中节点之前.

剪切, 拷贝和粘贴

拷贝一个节点:

  1. 在树形视图中选中你想拷贝的节点.
  2. 点击 Copy 按钮.
  3. 点击树形视图中的目标节点 (插入位置的相邻节点).
  4. 点击 Paste 按钮.

注意:

  • 剪切的工作方式与拷贝十分类似, 但源节点将被移除.
  • 如果选中 Paste as child on objects & arrays 选项, 节点将被当成子节点插入.
  • Add children first/siblings before 选项仍会影响粘贴是节点的摆放方式.

兼容性

一切好像是相当的稳定, 但如果你找到任何 bug 请留言告知, 我会尝试去解决.

合格的 JSON

用编辑器创建的 JSON 都是合格有效的, 除了能够包含 JavaScript 方法不符标准. 对 JSON 的处理基于我的字符串转换器 JSONstring. 如果你定义一个内部的循环应用对象, 程序会阻塞.

另外, 当它涉及到每一个 JSON 字符串转换器, 你应该避免在你想修改的对象里混合引用 DOM 节点. 那是不能操作的.

浏览器

我已经在 IE7, Firefox 2, Opera 9 和 Safari 2 中测试过这个工具, 它可以正常使用, 除了以下的一些异常:

  • 方法的字符串转换在 Safari 中有时不能使用, 这个一个浏览器的 bug. 当方法内包含转义斜线 (如 \n 和 \r) 和其他一些小问题时, 问题会出现.

译者的话

这个工具看似一看即懂, 但在看完文章之后, 还是发现有一些操作细节应该留意的. 文章最后一段没有翻译, 写的是作者准备为该工具添加的一些功能和改进 (如增加拖拽更换节点位置), 但 4 年来都没修改, 也没什么希望了, 所以就不翻译了, 大家知道就好. 希望这个工具对你有用, 更希望有人对它进行二次开发, 另它变得强大 (比如加上拖拽功能).

原文链接: My JSON editor

注解
  1. 原文作者
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 线上 JSON 编辑工具
  1. bolo | #1
    Feb 18th, 2011 at 03:10

    不错的工具，下载来研究一下

  2. 向晚 | #2
    Feb 18th, 2011 at 10:40

    荣幸啊。我博客看来还是有些用的。

  3. Maplews | #3
    Feb 18th, 2011 at 12:36

    这个东西好玩呐！

  4. gsid | #4
    Feb 18th, 2011 at 12:40

    研究一下~

  5. 维斯 | #5
    Feb 18th, 2011 at 14:05

    不懂是什么东东，貌似不错，下载玩玩。

  6. HK | #6
    Feb 18th, 2011 at 14:58

    先看看

  7. Paran | #7
    Feb 19th, 2011 at 16:09

    好东西

  8. 漠北碎碎语 | #8
    Feb 20th, 2011 at 20:59

    很想学一下东西但是 做网页都不知道从何入手，迷惘啊

  9. mg12 | #9
    Feb 21st, 2011 at 00:26

    @漠北碎碎语
    逼自己做几个网页, 做完你就知道自己需要学什么了, 或许你在做的过程中就能学之一二. 祝你成功.

  10. woiweb | #10
    Mar 10th, 2011 at 14:42

    必须支持，很好的工具

  11. 不争 | #11
    Mar 15th, 2011 at 13:21

    看起来不错的工具

  12. 大观网 | #12
    Mar 16th, 2011 at 19:35

    来学习一下，看看再说

  13. 沉冰浮水 | #13
    Mar 21st, 2011 at 13:23

    有折腾腾讯微博API，JSON还是很强大的。。不过只调用返回的数据就好，，不用自己生成。。
    ----------
    泯灭