EEditor 案例

PluginJson

大型 JSON 文件的结构化编辑器
树视图与代码编辑器双向同步,所有操作支持完整撤销重做

❓ 问题

大型 JSON 文件难以理解和修改,纯文本编辑器缺少结构视角。嵌套层级深、键值对多时,人工编辑极易出错。

💡 方案

PluginJson 将 JSON 解析为 EItem 树(EJsonDocument → EJsonObject/EJsonArray → EJsonLeaf),每个 JSON 值成为树节点,属性自动暴露在属性面板。

📸 请放置截图 → images/screenshot_pluginjson.png

PluginJson 同时展示树视图和代码编辑器,两者双向同步

核心机制

树视图 ↔ 代码编辑器 双向同步

代码编辑器和树视图实现深度联动 —— 点击树节点高亮对应 JSON 文本区域,编辑 JSON 文本自动更新树结构。所有操作(增/删/改/移节点)均支持完整 undo/redo。

rapidjson SAX 偏移计算器 字节偏移精确定位 EJsonFindByOffset 反向定位 字节范围替换保持格式 Pre/Post 委托三阶段操作
// 定义 JSON 节点 —— 仅需几行代码 class EJsonLeaf : public EItem { public: EString ui_key; // JSON 键名 EString ui_jsonPath; // 完整路径,如 $.store.book[0] EVariant ui_variantValue; // 万能容器:string/int/double/bool/null }; // 创建 JSON 节点树 —— 仅需字符串指定类型 auto root = EItemManager::newItem("EJsonObject"); auto child = EItemManager::newItem("EJsonLeaf"); child->ui_key = "name"; child->ui_variantValue = EVariant("EEditor"); root->addChild(child);

工作原理

rapidjson SAX 解析器在解析 JSON 时,通过偏移计算器精确记录每个 token 的字节范围。EJsonFindByOffset 实现反向定位:给定代码编辑器的光标字节偏移,快速找到对应的树节点。树编辑操作通过字节范围替换直接在代码编辑器中更新对应文本区间,保持 JSON 格式完整。

📸 请放置截图 → images/screenshot_eitem_hierarchy.png

EItem 的继承层次 —— EJsonObject 和 EJsonLeaf 在树视图中的呈现

下载 PluginJson

获取 PluginJson 插件的预编译版本,开箱即用。

⬇ 下载插件