懂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，社会（但非法律）期望您帮助资助其维护。从这里开始。

编辑推荐精选

Keevx

Keevx

AI数字人视频创作平台

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

即梦AI

即梦AI

一站式AI创作平台

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

扣子-AI办公

扣子-AI办公

AI办公助手，复杂任务高效处理

AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！

TRAE编程

TRAE编程

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

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

AI工具TraeAI IDE协作生产力转型热门
蛙蛙写作

蛙蛙写作

AI小说写作助手，一站式润色、改写、扩写

蛙蛙写作—国内先进的AI写作平台，涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能，助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。

AI辅助写作AI工具蛙蛙写作AI写作工具学术助手办公助手营销助手AI助手
问小白

问小白

全能AI智能助手，随时解答生活与工作的多样问题

问小白，由元石科技研发的AI智能助手，快速准确地解答各种生活和工作问题，包括但不限于搜索、规划和社交互动，帮助用户在日常生活中提高效率，轻松管理个人事务。

热门AI助手AI对话AI工具聊天机器人
Transly

Transly

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

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

讯飞智文

讯飞智文

一键生成PPT和Word，让学习生活更轻松

讯飞智文是一个利用 AI 技术的项目，能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定，还是学生群体的职业生涯规划、实习避坑指南，亦或是活动策划、旅游攻略等内容，它都能提供支持，帮助用户精准表达，轻松呈现各种信息。

AI办公办公工具AI工具讯飞智文AI在线生成PPTAI撰写助手多语种文档生成AI自动配图热门
讯飞星火

讯飞星火

深度推理能力全新升级，全面对标OpenAI o1

科大讯飞的星火大模型，支持语言理解、知识问答和文本创作等多功能，适用于多种文件和业务场景，提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台，涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能，能为不同需求的用户提供便捷高效的帮助，助力用户轻松获取信息、解决问题，满足多样化使用场景。

热门AI开发模型训练AI工具讯飞星火大模型智能问答内容创作多语种支持智慧生活
Spark-TTS

Spark-TTS

一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型

Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目，由多个知名机构联合参与。该项目提供了高效的 LLM（大语言模型）驱动的语音合成方案，支持语音克隆和语音创建功能，可通过命令行界面（CLI）和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数，生成高质量的语音。该项目适用于多种场景，如有声读物制作、智能语音助手开发等。

下拉加载更多