html制作在线JSON编辑器工具_html JSON编辑器格式化校验工具【教程】-html教程-PHP中文网

JSONEditor是生产环境验证多年的最稳选择，支持树/代码/文本三模式、实时校验、折叠展开及Schema驱动表单，纯HTML+CDN即可运行，无需构建工具。

html制作在线json编辑器工具_html json编辑器格式化校验工具【教程】

直接用 JSONEditor 库是最省事、最稳的选择——它不是“能用”，而是生产环境已验证多年，支持树形/代码/文本三模式、实时校验、折叠展开、Schema 驱动表单，且不依赖后端。

为什么别自己写 contenteditable + AST 解析器

自己用 contenteditable 搭 JSON 编辑器，短期看着灵活，实际踩坑密集：

字符串中含 "、、\ 时，DOM 渲染会错位或截断，必须做双重转义+防 XSS 处理
用户光标定位在折叠节点内再输入，容易触发 isCollapsed 状态未同步，导致新增字段被丢进错误层级
大 JSON（>500KB）下，每次 blur 触发全量 JSON.parse() + AST 构建，主线程卡顿明显，移动端尤其明显
JSON.stringify(obj, null, 2) 会重排 key 顺序，而真实配置文件（如 webpack.config.json、tsconfig.json）严重依赖字段顺序，你渲染的和最终保存的不一致

用 jsoneditor.min.js 的最小可行初始化

不需要 npm、不配 webpack，纯 HTML 就能跑起来：

<div id="jsoneditor" style="width: 100%; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.12.1/dist/jsoneditor.min.js"></script><link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.12.1/dist/jsoneditor.min.css" rel="stylesheet"><script>
  const container = document.getElementById('jsoneditor')
  const editor = new JSONEditor(container, {
    mode: 'tree',
    modes: ['tree', 'code', 'text'],
    search: true,
    history: true
  })
  editor.set({ "status": "ok", "data": [1, 2, 3] })
</script>

注意三点：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

CDN 版本号写死（如 @9.12.1），避免某天上游发布破坏性更新导致线上编辑器白屏
mode: 'tree' 是默认视图，但必须显式声明 modes 数组，否则切换按钮不出现
editor.set() 必须传合法 JSON 值；若传字符串（如 editor.set('{ "a": 1 }')），会静默失败，界面空白——要先 JSON.parse 再传

保留 key 顺序和注释的硬需求怎么破

原生 JSONEditor 不支持注释，且 tree 模式内部仍用 JSON.parse/stringify 序列化。如果你的场景真需要注释（比如调试用的 // TODO）或强保 key 顺序：

改用 comment-json 库预处理：加载时用 commentJson.parse() 替代 JSON.parse()，保存前用 commentJson.stringify()
把 comment-json 的输出结果喂给 editor.set()，它只管渲染，不干涉解析逻辑
切勿在 editor.get() 后再走一遍 JSON.stringify() ——这步会抹掉注释、重排 key；必须用 commentJson.stringify() 输出最终字符串