懂AI
jsoneditor

jsoneditor

全面的Web JSON处理和可视化工具

JSON Editor是一款功能全面的Web工具，专注于JSON数据的查看、编辑、格式化和验证。它集成了树形编辑器、代码编辑器和纯文本编辑器等多种模式，并支持大型JSON文档处理、JMESPath查询转换和JSON schema验证等高级特性。作为开源项目，JSON Editor易于集成到各类Web应用中，为开发人员提供了灵活而强大的JSON处理方案。

JSON编辑器Web工具数据可视化开源项目JavaScript库Github
访问官网GitHub

JSON 编辑器

版本 下载量 维护状态 许可证 FOSSA 状态

JSON 编辑器是一个基于网页的工具，用于查看、编辑、格式化和验证 JSON。它有多种模式，如树形编辑器、代码编辑器和纯文本编辑器。该编辑器可以作为组件在您自己的网络应用程序中使用。它可以作为 CommonJS 模块、AMD 模块或普通的 JavaScript 文件加载。

该库最初是作为流行的网络应用程序 https://jsoneditoronline.org 的核心组件开发的，此后已开源。

支持的浏览器：Chrome、Firefox、Safari、Edge。

<img alt="json 编辑器" src="https://yellow-cdn.veclightyear.com/835a84d5/870ebb56-c41e-4f03-aa32-0587d6c2efdb.png">   <img alt="代码编辑器" src="https://yellow-cdn.veclightyear.com/835a84d5/98c28935-5c85-4afc-a715-7078b2bed75e.png">

JSONEditor 的跨浏览器测试由 <a href="https://www.browserstack.com" target="_blank">BrowserStack</a> 慷慨提供

<a href="https://www.browserstack.com" target="_blank"><img alt="BrowserStack" src="https://yellow-cdn.veclightyear.com/835a84d5/a39e6dc8-25a4-4260-9755-903963ac9554.png"></a>

继任者：svelte-jsoneditor

这个库 jsoneditor 有一个继任者：svelte-jsoneditor。新的编辑器并非一对一的替代品，因此可能有理由继续使用 jsoneditor。 两者之间的主要区别在这里描述。

特性

JSONEditor 有多种模式，具有以下功能。

树形模式

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

代码模式

  • 代码着色（由 Ace 提供支持）。
  • 检查 JSON（由 Ace 提供支持）。
  • 格式化和压缩 JSON。
  • 修复 JSON。
  • JSON schema 验证（由 ajv 提供支持）。

文本模式

  • 格式化和压缩 JSON。
  • 修复 JSON。
  • JSON schema 验证（由 ajv 提供支持）。

预览模式

  • 处理大型 JSON 文档，最大可达 500 MiB。
  • 使用 JMESPath 查询转换 JSON。
  • 格式化和压缩 JSON。
  • 修复 JSON。
  • JSON schema 验证（由 ajv 提供支持）。

文档

安装

使用 npm（推荐）：

npm install jsoneditor

或者，您可以使用其他 JavaScript 包管理器，如 https://yarnpkg.com/，或 CDN，如 https://cdnjs.com/ 或 https://www.jsdelivr.com/。

使用

注意，在以下示例中，您需要将 url jsoneditor/dist/jsoneditor.min.js 和 jsoneditor/dist/jsoneditor.min.css 更改为与您下载库的位置相匹配，或填写您使用的 CDN 的 URL。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <!-- 当使用 "code" 模式时，指定 utf-8 字符集很重要 -->
    <meta 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>
        // 创建编辑器
        const container = document.getElementById("jsoneditor")
        const options = {}
        const editor = new JSONEditor(container, options)

        // 设置 json
        const initialJson = {
            "数组": [1, 2, 3],
            "布尔值": true,
            "空值": null,
            "数字": 123,
            "对象": {"a": "b", "c": "d"},
            "字符串": "你好，世界"
        }
        editor.set(initialJson)

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

构建

JSON 编辑器的代码位于 ./src 文件夹中。要构建 jsoneditor：

  • 安装依赖项：

    npm install

  • 构建 JSON 编辑器：

    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

Ace 编辑器在 code 模式下使用，占整个库总大小的约三分之一。要从包中排除 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

许可证

jsoneditor 作为开源软件发布，采用宽松的 Apache 2.0 许可证。

如果您在商业环境中使用 jsoneditor，社会（但非法律）期望您帮助资助其维护。从这里开始。

编辑推荐精选

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌，基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构，帮助企业扫清合规障碍，筑牢风控防线，成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案，助力品牌曝光

稳定高效的流量提升解决方案，助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用，一键生成无水印视频

最新版Sora2模型免费使用，一键生成无水印视频

Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。

讯飞绘文

讯飞绘文

选题、配图、成文，一站式创作，让内容运营更高效

讯飞绘文，一个AI集成平台，支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容，加速品牌传播，提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
TRAE编程

TRAE编程

AI辅助编程，代码自动修复

Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
商汤小浣熊

商汤小浣熊

最强AI数据分析助手

小浣熊家族Raccoon，您的AI智能助手，致力于通过先进的人工智能技术，为用户提供高效、便捷的智能服务。无论是日常咨询还是专业问题解答，小浣熊都能以快速、准确的响应满足您的需求，让您的生活更加智能便捷。

imini AI

imini AI

像人一样思考的AI智能体

imini 是一款超级AI智能体，能根据人类指令，自主思考、自主完成、并且交付结果的AI智能体。

Keevx

Keevx

AI数字人视频创作平台

Keevx 一款开箱即用的AI数字人视频创作平台，广泛适用于电商广告、企业培训与社媒宣传，让全球企业与个人创作者无需拍摄剪辑，就能快速生成多语言、高质量的专业视频。

即梦AI

即梦AI

一站式AI创作平台

提供 AI 驱动的图片、视频生成及数字人等功能，助力创意创作

下拉加载更多