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即可