JSON 在线编辑器

最新推荐文章于 2024-05-22 10:03:23 发布

灬勿忘丶心安

最新推荐文章于 2024-05-22 10:03:23 发布

阅读量6.4k

点赞数 1

分类专栏： JavaScript 文章标签： JSON 在线编辑器

本文链接：https://blog.csdn.net/qq_35959573/article/details/81536730

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsoneditor 是 JSON 在线编辑器插件，用法如下

一、插件下载

jsoneditor 官网地址：https://github.com/josdejong/jsoneditor，插件在 dist 目录下（img、jsoneditor.css 和 jsoneditor.js）

这里写图片描述

二、使用

在 HTML 页面中引入 jsoneditor 插件即可：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>JSON编辑器</title>
        <link rel="stylesheet" type="text/css" href="plugins/jsoneditor/jsoneditor.css" />
        <script src="plugins/jsoneditor/jsoneditor.js"></script>
    </head>

    <body>
        <!--容器-->
        <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

        <script>
            // 创建对象
            var container = document.getElementById("jsoneditor");
            var options = {
                // modes: ['tree','code'], 可以设置多种模式随意切换
                mode: 'code', // tree，view，form，code，text  
                onError: function(err) {
                    alert(err.toString());
                }
            };
            // 实例化对象
            var editor = new JSONEditor(container, options);

            // JSON数据
            var json = {
                "Array": [1, 2, 3],
                "Boolean": true,
                "Null": null,
                "Number": 123,
                "Object": {
                    "a": "b",
                    "c": "d"
                },
                "String": "Hello World"
            };

            // JSONEditor.set(data) 设置数据
            editor.set(json);
            // JSONEditor.get() 和 JSONEditor.getText() 获取数据
            var json = editor.get();
            console.log(JSON.stringify(json));

            var text = editor.getText();
            console.log(text);

            // JSONEditor.setMode(mode) 设置模式
            editor.setMode('tree');
        </script>

    </body>

</html>

样式和内容可以修改 jsoneditor.css 文件

灬勿忘丶心安

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JSON 在线编辑器

jsoneditor 是 JSON 在线编辑器插件，用法如下一、插件下载jsoneditor 官网地址：https://github.com/josdejong/jsoneditor，插件在 dist 目录下（img、jsoneditor.css 和 jsoneditor.js）二、使用在 HTML 页面中引入 jsoneditor 插件即可：&lt;!DOCTYPE ...
复制链接

扫一扫

专栏目录