这是一个译文, 文中谈及的 JSON 编辑工具和原文已经是 2007 年的产物. 浏览器兼容也是很老的版本, 但工具在新型浏览器中使用正常. 今日看到一个网友的博客提到这个 JSON 编辑器, 试用了一下感觉不错, 起码可以满足我的需求, 所以顺便翻译一下分享出来. 译文如下:
过去数个星期我一直在寻找一款包括树形视图的 JSON 编辑工具. 你可以通过这么个工具获得满意的 JSON 结构综述, 并且能够轻松地对结构作出修改.
是的, 我知道那种表现形式有点像 Firebug, 而事实上找到了 Calm_Pear 的 promising attempt. 但我觉得两个都不足以满足我最初的需求, 所以我写了自己的工具.
你可以线上试用或者下载源代码 (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><scriptsrc="JSONeditor.js"></script><script> onload=function(){ JSONeditor.start('tree','jform',{},true) } </script></head><body><divstyle="position:absolute;top:10px;left:10px"id="tree"></div><divstyle="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 选项:
一个新增子节点将被添加到所有子节点之前.一个新增邻节点将被添加到选中节点之前.剪切, 拷贝和粘贴
拷贝一个节点:
在树形视图中选中你想拷贝的节点.点击 Copy 按钮.点击树形视图中的目标节点 (插入位置的相邻节点).点击 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 年来都没修改, 也没什么希望了, 所以就不翻译了,
大家知道就好. 希望这个工具对你有用, 更希望有人对它进行二次开发, 另它变得强大 (比如加上拖拽功能).