json可视化编辑器,前端json编辑器
react--实现简易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可视化工具，配合Swagger使用效率大幅提升！
JsonHero是一款开源的JSON可视化工具，目前在Github已有2.9K+Star，通过JsonHero可以非常方便地查看JSON数据，它支持列视图、树视图和编辑视图，总有一款适合你！
JsonVisio是一款简洁易用的JSON可视化工具，目前在Github已有4.1K+Star，可以支持JSON格式化、编辑和校验，并且能根据JSON生成树状图。
通过使用上面两种JSON可视化工具，就算只使用Swagger来调试接口也不愁了！细心的小伙伴应该可以发现，JsonHero只支持查看JSON，并不支持编辑，所以编辑JSON还得使用JsonVisio。不过项目作者在Issues里面回复到，以后版本会进行支持。
Vue 前端可视化活动编辑器
先看效果，为一个可视化活动编辑器。
基于 JSON Schema 开箱即用的简单活动可视化编辑器。
在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。
JSON Schema 主要运用在如下几点：
首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。
每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。
如下图：
这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。
添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：
新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)
导出模块解释如下：
如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。
整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。