代码编辑器

1. 组件概述

代码编辑器是一个数据输入组件，用于输入和编辑程序代码。它基于 CodeMirror 实现，提供语法高亮、行号显示等专业代码编辑功能。支持 C、C++、Python、JavaScript、JSON、HTML 等 20 种常见编程语言。适用于需要用户输入代码片段、配置文件或结构化文本的场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：代码练习与评测。在编程学习类应用中，学生在代码编辑器中编写代码，点击”运行”按钮后调用工作流进行代码评测。将”语言”设置为对应的编程语言（如 Python），工作流返回的运行结果可以展示在下方的文字组件中。
• 场景二：JSON 配置输入。在需要用户输入结构化配置的场景中，使用代码编辑器让用户输入 JSON 格式的配置内容。将”语言”设置为 json，编辑器会自动提供 JSON 语法高亮，帮助用户发现格式错误。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
绑定变量	组件的变量名，用户输入的代码内容会以此变量名存储。其他组件可以绑定此变量来显示代码内容，调用工作流时此变量的值会传递给工作流。
标题	编辑器左侧显示的标签文字，用于说明该输入项的用途，如”代码”、“Python 代码”、“配置内容”等。
语言	选择代码的编程语言，编辑器会根据所选语言提供对应的语法高亮。支持的语言包括：C、C++、C#、CSS、Go、HTML、INI、Java、JavaScript、JSON、Less、Markdown、Objective-C、纯文本、Python、R、Swift、TypeScript、XML、YAML。默认为 C 语言。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置关于代码格式要求的简短说明。
控件提示	在编辑器旁边显示一个小问号图标，鼠标悬停时弹出提示内容。
描述	显示在编辑器下方的浅色说明文字，用于补充解释代码输入的要求或格式说明。

事件折叠组

配置项	说明
添加事件	支持”代码变化”、“获取焦点”、“失去焦点”三种触发事件。“代码变化”事件在用户修改代码内容时触发，可用于实时校验或自动保存；“失去焦点”事件适合在用户完成编辑后触发工作流进行代码处理。

设计

表单项折叠组

配置项	说明
隐藏标题	开启后隐藏编辑器左侧的标题文字，只显示编辑器本身。适用于标题已在其他位置说明或空间有限的场景。
宽度	设置编辑器在页面中占据的宽度。
最小展示行数	编辑器最少显示的代码行数，决定了编辑器的最小高度。默认为 3 行。如果代码内容较少，编辑器会保持这个最小高度。
最大展示行数	编辑器最多显示的代码行数，决定了编辑器的最大高度。默认为 20 行。当代码超过此行数时，编辑器会出现滚动条。

高级

状态折叠组

配置项	说明
可见	控制编辑器是否显示。默认可见。
隐藏	控制编辑器是否隐藏。与”可见”相反。
禁用	控制编辑器是否禁用。开启后编辑器变为只读状态，用户无法修改代码内容。适用于展示代码但不允许编辑的场景。

校验折叠组

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