jsoneditor

最新推荐文章于 2024-09-16 07:15:50 发布

「已注销」

最新推荐文章于 2024-09-16 07:15:50 发布

阅读量598

点赞数

分类专栏： javascript

友链：https://cutt.ly/7777aaaa

本文链接：https://blog.csdn.net/include_heqile/article/details/105620391

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

微信搜索我吃你家米了关注公众号
在这里插入图片描述

今天给大家介绍一款json编辑器https://github.com/josdejong/jsoneditor

高速下载链接

JSON Editor是一款基于web的json编辑与查看工具

首先来看一下如何安装这款工具

解压后进入jsoneditor目录

执行npm install

然后执行npm run build

执行完上述操作后，我们编写如下html文件：


<!DOCTYPE HTML>
<html>
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link href="jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor.min.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script>
        // create the editor
        const container = document.getElementById("jsoneditor")
        const options = {}
        const editor = new JSONEditor(container, options)

        // set json
        const initialJson = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    </script>
</body>
</html>

然后在浏览器中打开上面的html文件即可