1.引言
项目里之前用的json编辑器react-json-editor-ajrm,做的时候看似好用,可谁知真正用到项目里,一旦复制粘贴长一点的json,页面就卡顿到不能用,此等严重问题岂能容忍!于是我搜遍npm,终于找到一款效率高、功能齐全的json编辑器—jsoneditor,由一个叫做Jos de Jong的荷 兰大叔开发的,让我们来欣赏一下他的盛世美颜:
![8fcc9f6221e2e093ab481dc5334e8534.png](https://i-blog.csdnimg.cn/blog_migrate/e19f8a2d9e8dc241284051567bc193de.png)
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搜索,格式化,前进回退,功能基本能满足需求,而且粘贴不卡顿。
![f58ae7b7ac6bc5f52ee0ef6f04322884.png](https://i-blog.csdnimg.cn/blog_migrate/7ee5d88f0b38bb9ec35cd0964e7dbc6f.png)
树形模式:很方便的查看模式,支持展开折叠,基本的编辑功能,甚至类型的确定,位置的转换,全局搜索精确定位,
![987dbf3cfa9d030e6450acfd8f76ac69.png](https://i-blog.csdnimg.cn/blog_migrate/11deddc6c2d74c9df49382739b399ad1.png)
![8c785bbd0a8c6e3ed0a85c0c425a71bd.png](https://i-blog.csdnimg.cn/blog_migrate/8908cb8481e72df004464b1be3d9787a.png)
4.坑—图标不翼而飞
在其examples里有几个很实用的例子,直接clone下来就能用,但一旦搬到你的项目上,你会发现所有的图标都消失不见了。。。可以看到他的按钮还是在的,功能都正常,但图标却消失不见,如图:
![9fbba1ec8955a272e45e094170a5207b.png](https://i-blog.csdnimg.cn/blog_migrate/4faacaf1dcddcb3c79f55a1e26722d28.png)
查看demo却一切正常,查看demo中的样式,发现图标的来源是本地静态地址:
![c547b084f4dab4a6bb603dc6f5c0e3b6.png](https://i-blog.csdnimg.cn/blog_migrate/cc440928eb712be543e2b990f04945ce.png)
而我项目中的地址却被悄然转化成了
![fff7643f460e35304fc6988c6d22a163.png](https://i-blog.csdnimg.cn/blog_migrate/bf20d5bac297371e8cd230d62fa481e4.png)
查看其源码发现:图标调用的是一张大的雪碧图,css里通过background-position去确定其位置从而决定用哪个图标
![13dd484cf35b87260d779c37ad2f5b5b.png](https://i-blog.csdnimg.cn/blog_migrate/00fc9916cb0643f07a3f5f2a0a8b0188.jpeg)
![d425902bcab04146d83c9618e5b02a72.png](https://i-blog.csdnimg.cn/blog_migrate/7ccb95c8a0ed6d24662e704eaa1932ca.jpeg)
把它的svg雪碧图考到网页转换器,得到的图是这样的,在此推荐一个svg转换器网址:
https://www.bejson.com/ui/svg_editor/
![806bc06f25cf0ba5c12cc0e5b452408e.png](https://i-blog.csdnimg.cn/blog_migrate/1b6f7d713cb95cc15bd427d4ae47f475.jpeg)
也曾试过将这个图传到图片网站得到cdn,但发现效果太丑,无奈,只能自己将demo中的图标一个一个截图,上传得到cdn,然后样式覆盖,得到目标模版
![76097325f2442b3a7af3577cbbeec40e.png](https://i-blog.csdnimg.cn/blog_migrate/a98d7ed750b1b14ee92df95bb425e385.jpeg)
坑2—光标错位
只需设置字体为12px即可
![6ed6295fa9df52d6b6172a5762d78a4b.png](https://i-blog.csdnimg.cn/blog_migrate/e25b282d91300dc58b499d27533a94e0.png)