Diff编辑器

1. 组件概述

Diff编辑器是一个数据输入组件，用于对比和编辑两段文本的差异。它采用左右分栏的布局，左侧显示文本 A，右侧显示文本 B，并以高亮方式标记两段文本之间的新增、删除和修改内容。该组件支持多种编程语言的语法高亮，适用于需要对比两段代码或文本差异的场景，如版本对比、内容审核、修改确认等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：作文修改对比。在写作辅导类应用中，学生提交作文后，AI 工作流返回修改建议版本。使用 Diff编辑器展示原文（文本 A）和 AI 修改后的版本（文本 B），学生可以清晰看到哪些地方被修改、新增或删除，便于学习和理解修改意见。
• 场景二：代码优化对比。在编程学习应用中，学生提交代码后，AI 返回优化后的代码。通过 Diff编辑器左右对比展示原始代码和优化代码，学生可以直观看到代码的改进之处，同时可以在右侧编辑器中进一步调整代码。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
文本 A 字段名	左侧文本（文本 A）的变量名。用户在左侧编辑器中输入或修改的内容会存储到这个变量中。其他组件可以绑定此变量来获取文本 A 的内容，调用工作流时此变量的值也会传递给工作流。
文本 B 字段名	右侧文本（文本 B）的变量名。用户在右侧编辑器中输入或修改的内容会存储到这个变量中。其他组件可以绑定此变量来获取文本 B 的内容，调用工作流时此变量的值也会传递给工作流。
标题	编辑器左侧显示的标签文字，用于说明该输入项的用途，如”代码对比”、“文本差异”等。
语言	设置代码的编程语言，用于语法高亮显示。支持多种常见语言，包括 C、JavaScript、Python、HTML、CSS、Go、Markdown、YAML 等。选择正确的语言可以让代码以不同颜色区分关键字、字符串、注释等，提高可读性。如果是普通文本对比，可以保持默认设置。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置简短的帮助说明，如”请在左侧输入原始内容，右侧输入修改后的内容”。
控件提示	在编辑器旁边显示一个小问号图标，鼠标悬停时弹出提示内容。
文本 A 可编辑	控制左侧编辑器是否可以编辑。默认关闭，即左侧只能查看不能修改。如果需要用户同时编辑两侧内容，可以开启此选项。
文本 B 可编辑	控制右侧编辑器是否可以编辑。默认开启，即用户可以在右侧编辑器中修改内容。如果只需要展示对比结果而不允许修改，可以关闭此选项。
描述	显示在编辑器下方的浅色说明文字，用于补充解释该组件的用途或填写要求。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与「可见」相反。
禁用	控制组件是否禁用（变灰且不可操作）。
隐藏时删除字段	开启后，当该组件被隐藏时，其值会从表单数据中删除。适用于条件显示的场景，避免提交无关数据。

校验折叠组

配置项	说明
校验规则	设置表单项的校验规则，如必填等。当用户提交表单时，系统会根据这些规则检查输入内容是否符合要求。

事件折叠组

配置项	说明
添加事件	支持”代码变化”、“获取焦点”、“失去焦点”三种触发事件。“代码变化”在用户编辑内容时触发，可用于实时保存或同步内容；“获取焦点”和”失去焦点”在右侧编辑器获得或失去焦点时触发，可用于显示提示信息或触发校验。