json数据库编辑器（js json编辑器）

分析

由于个人不太喜欢一切皆props的形式，故想要做到一些公共api既可以在内部调用又可以对外部暴漏，类组件使用高阶/装饰器,函数组件使用hooks，我这里使用方式二，对外提供useEditor

json预览

通过原生标签的contentEditable属性可以实现在线json编辑

通过pre标签并利用JSON.stringify的参数3实现格式化预览

通过监听input事件实现编辑监听

树形编辑

借用antd的tree组件快速实现树形ui展示

将json字符串处理成treeData展示到tree组件，操作后在转成json反显到左侧预览区

删除编辑能力通过将treeData这颗多叉树转为二叉树操作后再回退到多叉树进行回显

创建react项目

create-react-app json-edit –template typescript

实现

index作为入口文件，应当承载着所有内部接口对外暴漏的能力

这里将json和editor组件以及useEditor暴漏出去

json组件用于展示并编辑json字符串

使用contentEditable开启编辑，利用pre+JSON.stringify({}, null, ‘ ‘)进行格式化，通过input事件监听json修改

tree组件用于展示，并允许弹窗的形式删除或修改节点

首先是json字符串转为多叉树后展示

当存在节点编辑后，需要从节点删除或编辑，可以先将多叉树转成二叉树进行操作，后再转回多叉树，之前实现过，就不重复写了

最后就是将编辑后的多叉树再转回json字符串

效果如下

待优化的点

预览时无法实时进行格式化处理，这是因为格式化操作光标位置会重置，需要不断进行记录并在格式化后重新设置

编辑操作目前仅支持编辑最后一级节点

删除操作会导致原json数据的顺序被修改，这主要是在生成的id值不正确，导致在二叉转多叉时排序不准

软件介绍：

JSON Viewer是一款非常实用的Json格式查看器。在日程开发调试中我们难免会遇到Json格式的数据需要解析阅读，但Json格式数据阅读性极差。

所需工具：点击下载 JSON Viewer编辑器

json view chrome插件

1、将下载好的插件进行安装，打开chrome – 扩展程序 (地址栏输入chrome://extensions/)；

2、在chrome浏览器右上角工具栏中选中“开发模式”功能选项；

3、点击”加载正在开发的扩展程序…” – 选择插件目录（D:\Download\JSONView-for-Chrome-master\WebContent）；

4、安装完成，重新加载(Ctrl+R)。

json精灵编辑器载入失败是文件损失。根据查询json失败公开解决方法得知，删除json精灵编辑器重新下载即可解决。.json是一种轻量级的数据交换格式，在与后端的数据交互中具有较为广泛的应用。

原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/126199.html