标签：

准备工作

参考资料：

• FileReader（用来获取上传文件的数据）
• <download>（用来设置下载文件的名称）
• Blob（用来存储数据的一个容器）
• createObjectURL（用来将一个Blog对象转换为Base64格式资源的API）

前言：

    因前段时间给老板做了个在线编辑lua文件的小工具，期间用到了上述几个新的API，感觉挺有意思，所以决定做一个在线编辑JSON文件的例子show出来，并重新捋一遍思路。

    代码会在 这里 更新，不出意外应该会使用ES6的语法进行编码。

预期效果：

    上传一个json文件，在页面中生成一个对应的树形结构；

    单击某个节点，会在右侧显示该节点的属性（值类型的子节点）；

    在节点上点击展开，会展开该节点，显示出该节点下的子节点；

    关于数据的一套完整的CRUD操作；

    点击下载，获取修改后的json文件；

效果图：

    这个Demo的周期应该会很长。。。但是希望能够写Blog把这个过程记录下来，之前实现的那版过于随意，这次会出一个更精致的。

纯前端JSON文件编辑器[0]

标签：

原文地址：http://www.cnblogs.com/jiasm/p/5768384.html