README

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

编辑器可以作为您的 Web 应用程序中的组件使用。库可以作为 CommonJS 模块、AMD 模块或普通 JavaScript 文件加载。

支持的浏览器：Chrome、Firefox、Safari、Opera、Edge、Internet Explorer 11。

JSONEditor 的跨浏览器测试由 BrowserStack 慷慨提供

功能

JSONEditor 具有多种模式，具有以下特性。

树模式

更改、添加、移动、删除和复制字段和值。
排序数组和对象。
使用 JMESPath 查询转换 JSON。
代码高亮。
颜色选择器。
在树视图中搜索和突出显示文本。
撤销和重做所有操作。
JSON 模式验证（由 ajv 提供）。

代码模式

代码高亮（由 Ace 提供）。
检查 JSON（由 Ace 提供）。
格式化和压缩 JSON。
修复 JSON。
JSON 模式验证（由 ajv 提供）。

文本模式

格式化和压缩 JSON。
修复 JSON。
JSON 模式验证（由 ajv 提供）。

预览模式

处理高达 500 MiB 的大型 JSON 文档。
使用 JMESPath 查询转换 JSON。
格式化和压缩 JSON。
修复 JSON。
JSON 模式验证（由 ajv 提供）。

文档

安装

使用 npm（推荐）

npm install jsoneditor

请注意，要在 Internet Explorer 11 中使用 JSONEditor，需要在您的应用程序中加载 Promise 的 polyfill。

使用

<!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/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/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>

构建

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

安装依赖项
```
npm install
```
构建 JSON Editor
```
npm run build
```
这将生成项目 dist 中的 ./jsoneditor.js、./jsoneditor.css 和
最小化版本。
自动构建，当源文件更改时
```
npm start
```
这将更新 dist 文件夹中的 ./jsoneditor.js 和 ./jsoneditor.css，但在每次更改时不会更新最小化版本，因为这是一项昂贵的操作。

测试

运行单元测试

npm test

运行代码代码检查（JavaScript Standard Style）

npm run lint

自定义构建

JSONEditor的源代码由CommonJS模块组成。可以使用模块打包器（如browserify或webpack）以自定义方式打包JSONEditor。首先，安装jsoneditor的所有依赖项

npm install

使用browserify创建源代码的自定义打包

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor

在code模式中使用的Ace编辑器占库总大小的约三分之一。要排除Ace编辑器，请

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox

要压缩生成的打包文件，请使用uglifyjs

uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c

macdabby / jsoneditor

维护者

详细信息

README

功能

树模式

代码模式

文本模式

预览模式

文档

安装

使用

构建

测试

自定义构建