jsoneditor 超好用的json编辑器及图标问题解决

jsoneditor 超好用的json编辑器及图标问题解决

注：本文为作者原创文章，为知乎本人账号分享

1.引言

项目里之前用的json编辑器react-json-editor-ajrm，做的时候看似好用，可谁知真正用到项目里，一旦复制粘贴长一点的json，页面就卡顿到不能用，此等严重问题岂能容忍！于是我搜遍npm，终于找到一款效率高、功能齐全的json编辑器—jsoneditor,由一个叫做Jos de Jong的荷 兰大叔开发的，让我们来欣赏一下他的盛世美颜：

2.链接

发现菜鸟工具里的json编辑器就是用他做的，下面是其链接。

菜鸟工具 ：https://c.runoob.com/front-end/53

npm地址 : https://www.npmjs.com/package/jsoneditor

github: https://github.com/josdejong/jsoneditor

3.优势介绍

（1）五种编辑查看模式 code、树形、文本、表单、视图

在此只介绍好用的code及树形

code代码模式 ：可以展开，压缩，排序，精确报错，command+f搜索，格式化，前进回退，功能基本能满足需求，而且粘贴不卡顿。

树形模式：很方便的查看模式，支持展开折叠，基本的编辑功能，甚至类型的确定，位置的转换，全局搜索精确定位，

4.坑—图标不翼而飞

在其examples里有几个很实用的例子，直接clone下来就能用，但一旦搬到你的项目上，你会发现所有的图标都消失不见了。。。可以看到他的按钮还是在的，功能都正常，但图标却消失不见，如图：

查看demo却一切正常，查看demo中的样式，发现图标的来源是本地静态地址：

而我项目中的地址却被悄然转化成了

查看其源码发现：图标调用的是一张大的雪碧图，css里通过background-position去确定其位置从而决定用哪个图标

把它的svg雪碧图考到网页转换器，得到的图是这样的，在此推荐一个svg转换器网址：

https://www.bejson.com/ui/svg_editor/

也曾试过将这个图传到图片网站得到cdn，但发现效果太丑，无奈，只能自己将demo中的图标一个一个截图，上传得到cdn，然后样式覆盖，得到目标模版

坑2—光标错位

只需设置字体为12px即可