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

最新推荐文章于 2024-09-24 07:44:25 发布

困知勉行1985

最新推荐文章于 2024-09-24 07:44:25 发布

阅读量7k

点赞数 2

分类专栏： React javascript 文章标签： reactjs javascript

本文链接：https://blog.csdn.net/wdquan19851029/article/details/115869264

版权

React 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 1 订阅

订阅专栏

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" />
    <meta
      name="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数据。