Editable 可编辑文本
Forms
智能自动检测
简介
一个内联文本字段，在激活前（通过聚焦、单击或双击）以纯文本显示，随后切换为带有提交和取消触发器的完全可编辑文本输入框。非常适合内联详情编辑器、文档重命名器和设置列表。
Editable 组件已作为交互式 editable 区块完全集成到 Page Builder 中，使内容作者和开发者能够在 CMS 中直接配置描述性标签、占位符、尺寸、触发模式和提交规则。
通过 CMS 页面构建器使用（JSON）
以下示例展示了内容编辑者如何在 JSON 页面模式（content/pages/*.json）中绑定和构建交互式可编辑字段。
1. 标准聚焦激活
该字段在获得焦点（通过 Tab 切换）或单击时立即激活，从而可在多行偏好配置之间实现流畅快速的 Tab 切换。
{
"type": "editable",
"label": "Project Name",
"defaultValue": "Artefact UI Suite",
"placeholder": "Enter project name...",
"size": "md",
"activationMode": "focus",
"submitMode": "both",
"interactive": true
}
Artefact UI Suite
2. 双击标题自定义器
复刻标准文件系统的行为。标签以静态粗体文本显示，仅在双击时切换为输入框。非常适合页面标题或文档文件标题。
{
"type": "editable",
"label": "Document Title",
"defaultValue": "Annual_Report_2025",
"placeholder": "Untitled document",
"size": "lg",
"activationMode": "dblclick",
"submitMode": "enter",
"interactive": true
}
Annual_Report_2025
3. 密集布局值字段（超小尺寸）
展示一种高度紧凑的尺寸比例，专为密集的表格数据网格、侧边栏元数据列表或次要属性而设计。
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
8080
CMS 配置参考
这些字段直接映射到 public/admin/config.yml 中声明的 editable 对象模式下的 Sveltia CMS 区块属性。
| 属性 | CMS 字段类型 | 默认值 | 描述 / 支持选项 |
|---|---|---|---|
标签文本 (label) | string | - | 渲染在可编辑值预览上方描述性视觉标签。 |
默认值 (defaultValue) | string | - | 字段内加载的初始文本内容。 |
占位符 (placeholder) | string | - | 当值留空时在预览中显示的浅色占位符文本。 |
尺寸比例 (size) | select | "md" | 整体高度、内边距和文本大小缩放。 • 选项： "2xs"、"xs"、"sm"、"md"、"lg"。 |
激活触发器 (activationMode) | select | "focus" | 指定用户如何将内联预览激活为编辑模式。 • 选项： "focus"（聚焦/单击时）、"click"（单击）、"dblclick"（双击）、"none"（需触发点击）。 |
提交处理器 (submitMode) | select | "both" | 指定将更改提交回状态的交互方式。 • 选项： "enter"（回车键）、"blur"（失焦）、"both"（回车与失焦）、"none"（需手动提交点击）。 |
开发者说明与无障碍
- 智能交互式水合： 由于切换布局状态需要动态元素交换和按键拦截，Editable 组件默认在客户端机器上以水合为 Preact 孤岛的形式运行。
- 无障碍输入框： 预览元素在非激活状态下充当语义按钮（
role="button"、tabIndex={0}），允许屏幕阅读器聚焦并通过键盘激活编辑模式。 - 表单就绪提交： 为便于与 POST 表单集成，组件将其活动值同步到一个原生隐藏表单输入，确保原生表单提交能正确捕获已提交的编辑内容。