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

编辑推荐精选

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码，轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统，允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令，自动执行排序、公式计算和数据透视等操作，支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内，支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

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

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

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具，简化了选题、文献检索至论文撰写的整个过程。通过简单设定，平台可快速生成高质量论文大纲和全文，配合图表、参考文献等一应俱全，同时提供开题报告和答辩PPT等增值服务，保障数据安全，有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT，就用博思AIPPT！

博思AIPPT，新一代的AI生成PPT平台，支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等，内置海量精美PPT模板，涵盖商务、教育、科技等不同风格，同时针对每个页面提供多种版式，一键自适应切换，完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命，一站式智能商拍平台

潮际好麦深耕服装行业，是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌，以及国内10万+淘宝、天猫、京东等主流平台的品牌商家，为卖家节省将近85%的出图成本，提升约3倍出图效率，让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

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

SimilarWeb流量提升

SimilarWeb流量提升

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

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

Sora2视频免费生成

Sora2视频免费生成

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

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

下拉加载更多