React 集成 jsoneditor 以对json数据进行展示和修改

1.jsoneditor库下载地址：

2.下载并编译

(1).安装依赖

(2).编译

3.React集成jsoneditor

(1).引入jsoneditor

(2).在组件中使用jsoneditor

1.jsoneditor库下载地址：

JSON编辑器是一个基于web的工具，用于查看、编辑、格式化和验证JSON。它有各种模式，比如树编辑器、代码编辑器和纯文本编辑器。github地址：GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON

2.下载并编译

(1).安装依赖

yarn install

在安装过程中提示没有安装python2, 所以如果没有安装过python2的请自行查找资料进行安装，这里只对python系统环境变量的配置，进行说明

以python2为例进行说明（配置python3请使用相同的方式），首先进入python2安装目录，将python.exe，拷贝一份命名为python2.exe.

然后配置环境变量，在Path中添加以下两项：

然后继续执行yarn install，成功。

(2).编译

然后执行 yarn build 进行编译

3.React集成jsoneditor

(1).引入jsoneditor

将代码放置到public目录下。

在index.html文件中导入jsoneditor.min.js和jsoneditor.min.css文件（当然有别的导入方式，例如js的方式，有兴趣的可以自行研究一下）

Note: 如果想要debug代码，请导入jsoneditor.js和jsoneditor.css文件，不要导入压缩混淆文件jsoneditor.min.js和jsoneditor.min.css文件

  <head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><title>React App</title><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><link href="jsonPlugin/jsoneditor.min.css" rel="stylesheet" type="text/css"><script src="jsonPlugin/jsoneditor.min.js"></script></head>

为了在所有react组件中都能够使用jsoneditor，在index.html文件中，定义工程全局变量 “var MyJSONEditor = JSONEditor;”，以便于在别的组件中，使用jsoneditor的功能

  <body><div id="root"></div><script>var MyJSONEditor = JSONEditor;</script></body>

(2).在组件中使用jsoneditor

我们使用的组件的名称叫 Example

定义组件中的全局变量jsoneditor(名字自己随便起)，指向new的一个jsoneditor（jsoneditor = new window.MyJSONEditor(container, options)）, 这样新new出来的jsoneditor就可以在组件中全局使用了。

var jsoneditor = {}; //定义组件中的全局变量，指向一个新创建的jsoneditor实例，组件中全局使用。
class Example extends Component {constructor(props) {super(props);jsoneditor = {};
...................................

下面就是具体怎样使用的代码

    componentDidMount() {const container = document.getElementById("jsoneditor") //jsoneditor容器const options = {mode: 'tree',onChangeJSON: (data)=>{console.log('JSONeditor:change:',data);}}//new一个jsoneditor实例jsoneditor = new window.MyJSONEditor(container, options)//设置theme 颜色为blue.container.querySelector('.jsoneditor-menu').style.backgroundColor = "rgb(18, 65, 145)";container.querySelector('.jsoneditor').style.border = "thin solid rgb(18, 65, 145)";//json数据const initialJson = {"Array": [1, 2, 3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b", "c": "d"},"MultiLevel":{"multi":{"e": "f","h": "h"}},"String": "Hello World","sensitive-data": {"sensitive1": "sensitive1","sensitive2": "sensitive2","sensitive3": "sensitive3"}}//jsoneditor加载json数据jsoneditor.set(initialJson)}//得到json数据，一般用于获取修改后的json数据onClick(){const updatedJson = jsoneditor.get();console.log("Debug: try to get the json data: " + updatedJson);}render() {return (<div><h1>Welcome!</h1><div><div style={{padding: '15px 0 0 20px',width: 'calc(100% - 55px)',height: this.props.editorHeight, 'overflow': 'auto'}}><div id="jsoneditor" className="jsoneditor-react-container" style={{width: '100%', height: '100%'}} /></div><Button onClick={this.onClick}>Get new Json</Button></div><Empty /></div>)}

看看效果：

用户可以修改json数据。