[jdorn/json-ediorgithub地址 json-editor 中文文档
一.初始化:
npm install @json-editor/json-editor
二、在项目main.ts中引入
三、所在页面使用editor
四、这时候发现页面没战士,并且控制台window打印出来没有JSONEditor,别问我为啥 你即使在当前页面这样引入:import JSONEditor '@json-editor/json-editor';打印出来的window还是没有JSONEditor(经过采坑发现)
这时候去git找到jsoneditor.j文件放到自己的项目中,位置自己定就好
把copy的文件引入
window对象终于有了JSONEditor,但是样式却没有添加成功。
我配置的 样式如下没有生效,后来发现需要手动引入样式文件。根据实际情况放在自己的项目中,我放在了assets下面
theme: 'foundation5',
iconlib: 'fontawesome4',
进行到这里基本出来了,这时候发现控制台有个错误,并且字体文件没有出来
排查发现font-awesome.min.css里面有个路径不存在
这时候你可以把她引入的文件也放到你本地项目,或者直接替换成cdn地址,我的项目不能访问外网,所以我直接把资源放到了本地(注意要引入对应版本好的资源,我这里引入的版本是4.0.3)
如果是cdn引入可以引入下面的路径
如果是本地引入,把这四个文件copy到本地
(因为不想改路径,所以放在了同级的fonts下面)
进行到这一步,页面完成了,剩下的方法就可以参考官网了