最好用的JSON编辑器——jsoneditor

介绍：jsoneditor 是一个原生JS编写的交互式 JSON 编辑器，支持可视化编辑、格式化、验证等操作。

优势：

1、提供树形（直观可视化，tree）、代码（开发者友好，code）、表单（非技术人员易用，form）等模式

2、自动检测 JSON 语法错误并标红提示，减少手动校验成本

3、支持搜索、格式化、折叠 / 展开节点、JSON Schema 验证等

4、可自定义主题、缩进、只读模式等，灵活适配项目样式和交互要求

限制：

1、强依赖浏览器API（如 Window， document），无法在Node.js 、SSr服务端直接使用

使用教程：

  1、安装插件 pnpm i jsoneditor

   若使用ts 安装 pnpm i @types/jsoneditor

  2、使用案例代码，使用react框架为例，其他框架使用类似

import JSONEditor from 'jsoneditor';
import '@types/jsoneditor'; // 使用ts引入
import { useState, useEffect } from 'react';
export default function Page() {
    useEffect(() => {
        let element = document.getElementById("json_editor");
        // 第三个参数为编译器的初始值与set类似
        let editor = new JSONEditor(element, {
            mode: "code", // 代码模式
            theme: "bootstrap4",
            onchange: (val) => {} // 数据变化触发的回调
            // ...
        },{});
        // 设置值
        editor.set({
            name: "JSON编译器",
            value: "jsonEditor"
        });
        // 获取值
        editor.get();
        // 规则校验，返回错误信息
        let err = editor.validate();
        // 禁用
        editor.disable();
        // 启用
        editor.enable();
        return () => {
            editor.destroy(); // 销毁
        }
    }, [])
    return (
        <>
            <div id="json_editor"></div>
        </>
    )
}

问题及解决方案：

1、next.js框架下 import 直接引入jsoneditor，本地运行出现错误且无法打包，提示 self is not define

原因: 直接在外层引入，此时客户端还未挂载完毕，没有self，即没有window。

解决：确保初始化逻辑在 useEffect 中（客户端挂载后执行），再导入jsoneditor

useEffect(() => {
    // 关键：在 useEffect 中动态导入库并初始化（确保仅客户端执行）
    import('jsoneditor').then((module) => {
      const JSONEditor = module.default;
      if (containerRef.current) {
        // 此时已在客户端，可安全初始化
        const editor = new JSONEditor(containerRef.current, {
          mode: 'tree',
          value: { name: '安全初始化' }
        });
      }
    });
  }, []);

github：gitee.com/cpper-kaixu…