README

https://github.com/josdejong/jsoneditor http://jsoneditoronline.org/

网站: http://jsoneditoronline.org/ Github: https://github.com/josdejong/jsoneditor

描述

JSON Editor 是一个基于网页的工具，用于查看、编辑和格式化 JSON。它有各种模式，如树形编辑器、代码编辑器和纯文本编辑器。

编辑器可以用作您自己的网页应用程序中的组件。库可以加载为 CommonJS 模块、AMD 模块或常规 JavaScript 文件。

支持的浏览器：Chrome、Firefox、Safari、Opera、Internet Explorer 9+。

功能

树形编辑器

编辑、添加、移动、删除和复制字段和值。
更改值类型。
排序数组和对。
着色代码。
在树视图中搜索和突出显示文本。
撤销和重做所有操作。

代码编辑器

格式化和压缩 JSON。
着色代码（由 Ace 提供）。
检查 JSON（由 Ace 提供）。

文本编辑器

格式化和压缩 JSON。

文档

安装

使用 npm

npm install jsoneditor

使用 bower

bower install jsoneditor

下载

http://jsoneditoronline.org/downloads/

使用

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

    <script type="text/javascript" >
        // create the editor
        var container = document.getElementById("jsoneditor");
        var editor = new JSONEditor(container);

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

        // get json
        var json = editor.get();
    </script>
</body>
</html>

构建

JSON Editor 的代码位于 ./src 文件夹中。要构建 jsoneditor

安装依赖
```
npm install
```
构建 JSON Editor
```
npm run build
```
这将生成项目根目录中的文件 ./jsoneditor.js、./jsoneditor.css 以及
根目录中的压缩版本。
要重新构建资产（非必需）
```
npm run build-assets
```
这将构建 Ace 编辑器，然后在 ./asset/ace 文件夹中生成必要的 Ace 编辑器文件，并在 ./asset/jsonlint 文件夹中生成 jsonlint。

cmskit / jsoneditor

维护者

详情

README

描述

功能

树形编辑器

代码编辑器

文本编辑器

文档

安装

使用

构建