跳到主要内容

Schema Element 编辑器

Schema Element Editor 内置功能强大的代码编辑器，基于 CodeMirror 6 构建，提供专业的 JSON 编辑体验。

编辑器界面​

编辑器界面分为以下几个部分：

区域说明
标题栏显示元素参数、导入导出按钮
工具栏提供格式化、转义等操作按钮
编辑区域CodeMirror 代码编辑器
底部栏显示内容类型、保存按钮

工具栏功能​

内容类型切换​

编辑器会自动检测 Schema 数据的类型：

类型说明
ASTElements[] 数组格式，常用于 Agentic UI
RawStringMarkdown 字符串格式
JSON普通 JSON 对象

您可以通过工具栏的切换按钮在 AST 和 RawString 之间转换。

格式化与压缩​

按钮功能快捷键
格式化将 JSON 格式化为易读的缩进格式Alt + F
压缩将 JSON 压缩成一行-

转义与去转义​

处理嵌套的字符串数据：

按钮功能
转义将内容包装成 JSON 字符串值
去转义将 JSON 字符串值还原为原始内容

适用场景：当 Schema 中包含嵌套的 JSON 字符串时。

解析（Deserialize）​

将多层嵌套或转义的 JSON 字符串自动解析为结构化数据。

JSON 智能修复​

当 JSON 存在语法错误时，编辑器会：

  1. 显示错误提示和错误位置
  2. 尝试智能修复常见错误
  3. 提供一键修复功能

AST 自动补全​

编辑 AST (Elements[]) 类型数据时，编辑器提供自动补全功能。

功能特性​

  • 🎯 上下文感知 - 根据光标位置智能推断可用字段
  • ⚡ 实时补全 - 输入时自动触发补全提示
  • 📚 类型提示 - 显示字段类型和描述信息

触发方式​

方式说明
自动触发输入时自动显示补全提示
Cmd + . / Ctrl + .手动触发补全
Alt + /备用快捷键

支持的补全内容​

Element 类型值（21 种）：

  • paragraph, heading-one, heading-two, heading-three
  • link, image, code-block, code-line
  • bulleted-list, numbered-list, list-item
  • 等等...

Element 字段名（37+ 个）：

  • type, children, text, id, class
  • bold, italic, underline, code
  • url, title, level, language
  • 等等...

启用/禁用​

在配置页面「编辑器配置」→「编辑器功能」中可以开启或关闭 AST 类型提示。

快速单独编辑​

在编辑器中对选中的内容快速打开独立编辑弹窗，提供完整的编辑和格式化功能。

功能特性​

  • 🎯 独立编辑空间 - 在弹窗中专注编辑选中的片段，不影响主编辑器
  • 🛠️ 完整工具栏 - 提供格式化、转义、JSON 修复等所有编辑功能
  • 🔍 智能修复 - 支持 JSON 错误定位和智能修复，带 Diff 对比
  • 💾 一键替换 - 编辑完成后直接替换原选中内容

适用场景​

场景 1：修复嵌套 JSON

当 Schema 中包含多层嵌套的 JSON 字符串时，可以选中该字符串片段，在单独编辑弹窗中进行解析、格式化和修复，无需在主编辑器中处理复杂的转义。

场景 2：编辑大型对象中的片段

在编辑大型 Schema 对象时，可以选中某个子对象或数组，在弹窗中专注编辑该部分，避免主编辑器滚动查找。

场景 3：快速格式化局部内容

选中一段压缩的 JSON 片段，打开单独编辑弹窗进行格式化，不影响其他内容的格式。

触发方式​

插件提供两种触发方式，可在配置页面切换：

方式 1：选中自动出现（默认）​

  1. 在编辑器中选中需要编辑的内容
  2. 鼠标松开后，选区附近自动显示"单独编辑"按钮
  3. 点击按钮打开编辑弹窗

优点：操作快捷，无需额外按键

方式 2：右键触发​

  1. 在编辑器中选中需要编辑的内容
  2. 右键点击选中区域
  3. 在右键菜单中选择"单独编辑"
  4. 打开编辑弹窗

优点：不会遮挡编辑器内容，适合精确操作

弹窗功能​

单独编辑弹窗提供完整的编辑环境：

功能说明
代码编辑器完整的 CodeMirror 编辑器，支持语法高亮和折叠
工具栏格式化、压缩、转义、去转义、解析等操作
JSON 修复智能检测和修复 JSON 语法错误
Diff 对比修复前后内容对比，确认修改无误
组合键操作提供常用操作组合，一键完成多步骤转换
主题切换支持切换编辑器主题
保存并替换一键将编辑结果替换回主编辑器的选中位置

使用步骤​

  1. 选中内容：在主编辑器中选中要编辑的文本
  2. 触发弹窗：根据配置的触发方式打开编辑弹窗
  3. 编辑内容：在弹窗中使用工具栏功能编辑和修复内容
  4. 保存替换：点击"保存并替换"按钮，将编辑结果替换回主编辑器

组合键操作​

单独编辑弹窗提供组合键功能，将多个常用操作组合成一键操作，简化工作流程。

可用的组合键​

组合键说明适用场景
加引号→去转义先添加外层引号，再执行去转义。将裸露的转义 JSON 转换为标准 JSON处理从日志中复制的转义 JSON 片段
压缩→转义→去引号先压缩 JSON，再转义，最后去除外层引号。将格式化 JSON 转为紧凑裸露格式将格式化的 JSON 转换为适合日志输出的紧凑格式

使用示例​

场景 1：修复日志中的转义 JSON

从日志中复制了一段转义 JSON：{\"user\":\"Alice\",\"age\":25}

  1. 在主编辑器中选中这段内容
  2. 打开单独编辑弹窗
  3. 点击「加引号→去转义」组合键
  4. 内容自动转换为标准 JSON：{"user":"Alice","age":25}
  5. 继续编辑或直接保存替换

场景 2：生成紧凑格式的日志数据

需要将格式化的 JSON 转换为紧凑格式用于日志输出：

{
  "user": "Alice",
  "action": "login"
}

操作步骤：

  1. 选中该 JSON 片段
  2. 打开单独编辑弹窗
  3. 点击「压缩→转义→去引号」组合键
  4. 自动转换为紧凑裸露格式：{\"user\":\"Alice\",\"action\":\"login\"}
  5. 保存替换到主编辑器

与基础操作的对比​

组合键相当于手动执行多个步骤的快捷方式：

组合键等价的手动操作
加引号→去转义手动在首尾添加引号 → 点击去转义
压缩→转义→去引号点击压缩 → 点击转义 → 手动删除引号

使用组合键可以一键完成，省去多次点击和手动编辑的步骤。

配置选项​

在配置页面「编辑器配置」→「编辑器功能」中可以：

  • 开启/关闭单独编辑功能
  • 选择触发方式（选中自动出现 / 右键触发）

编辑器主题​

Schema Element Editor 支持多种编辑器主题：

主题说明
SEE Dark（默认）自定义深色主题，优化了括号匹配和语法高亮
Dark标准深色主题
Light浅色主题

在工具栏点击主题切换按钮即可切换。主题选择会自动保存。

主题色配置​

您可以自定义插件的主题色，用于配置页面和编辑器界面的高亮颜色。

在配置页面「编辑器配置」→「外观设置」中设置。

快捷键​

编辑器内快捷键​

快捷键功能可自定义
Alt + S保存✅
Alt + F格式化✅
Alt + P打开/更新预览✅
Shift + Alt + P关闭预览✅
Cmd/Ctrl + .触发 AST 补全❌
Alt + /触发 AST 补全（备用）❌

自定义快捷键​

在配置页面「快捷键配置」中，您可以自定义编辑器内的快捷键：

  1. 点击快捷键输入框
  2. 按下想要的快捷键组合
  3. 配置自动保存

注意事项：

  • 快捷键必须包含 Ctrl/Cmd 或 Alt 修饰键
  • 避免使用浏览器保留快捷键（如 Cmd+W、Cmd+T）
  • 快捷键仅在编辑器获得焦点时生效

Markdown 字符串自动解析​

当获取的 Schema 数据为字符串类型时，插件可以自动将其解析为 Markdown Elements 结构。

工作原理​

  1. 页面返回 Markdown 字符串
  2. 插件自动解析为 Elements[] 结构
  3. 编辑器以 AST 模式显示
  4. 保存时自动转换回 Markdown 字符串

适用场景​

  • AI 智能体对话场景
  • 符合 Agentic UI 数据规范的页面

启用/禁用​

在配置页面「编辑器配置」→「编辑器功能」→「字符串自动解析」中设置。

默认开启。

功能开关​

您可以在配置页面「功能开关」中控制工具栏按钮的显示：

功能说明
AST/RawString 切换内容类型切换按钮
转义/去转义字符串转义相关按钮
解析Deserialize 按钮
压缩Serialize 按钮
格式化Format 按钮
预览Preview 按钮
导入导出Import/Export 按钮

如果您只需要基础编辑功能，可以点击「一键精简」关闭所有附加功能。

故障排除​

JSON 格式错误无法保存​

  1. 查看编辑器底部的错误提示
  2. 点击「定位错误」跳转到错误位置
  3. 尝试点击「智能修复」
  4. 手动修正 JSON 语法

AST 补全不工作​

  1. 确认数据类型为 AST（Elements[]）
  2. 检查配置中「AST 类型提示」是否开启
  3. 尝试手动触发：Cmd/Ctrl + .

快捷键无响应​

  1. 确保编辑器获得焦点（点击编辑区域）
  2. 检查快捷键是否与浏览器或系统快捷键冲突
  3. 在配置页面检查快捷键设置