向文档添加 Slot
调用 insertSlot 命令向文档添加新 Slot。
// Inserts new slot at the selection
editor.commands.insertSlot()Slot 有两种类型:
- 行内 Slot 可以包含文本等行内内容
- 块 Slot 使用块布局,包含一个或多个段落、标题或其他块节点。
要在保留选中文本内容的同时将其转换为 Slot,请调用 wrapInSlot。省略 range 时,它会使用编辑器当前选区;也可以传入 range: { from, to } 来包裹指定文档范围:
editor.commands.wrapInSlot({
kind: 'inline',
id: 'customer',
config: { label: 'Customer name', placeholder: 'Enter a name', required: true },
})选择完整块时使用 kind: 'block'。insertSlot 会替换选中内容,而不是将其包裹起来。
wrapInSlot 与 insertSlot 一样接受 id 和 config。省略 id 可自动生成。包裹操作会保留选中内容;它没有用于转换内容或推导配置的回调选项。应用可以先检查选区,再将选择的配置传给命令。
创建 Slot 时,可以定义其类型和许多属性,例如唯一 ID、标签以及限制允许内容的一组规则。
editor.commands.insertSlot({
kind: 'inline',
id: 'customer',
config: {
label: 'Customer name',
required: true,
constraints: { maxLength: 120 },
},
})之后,可以在 Slot 中输入内容,或调用 fillSlot 命令来填写 Slot。
editor.commands.fillSlot({
id: 'customer',
// Tiptap JSON content
content: [{ type: 'text', text: 'Sam Rivera' }],
})其他有用的命令:
clearSlot({ id })清空 Slot。dissolveSlot({ id })移除 Slot 包装并保留其内容,将其变成普通文档内容。removeSlot({ id })移除 Slot 及其内容。
默认启用两个创建快捷方式:
- 输入
{{{可立即创建空的行内 Slot,并将光标放入其中。 - 在其他内容为空的段落中输入
[[[可立即创建块 Slot,并将光标放入其空段落中。
无需输入结束分隔符或 Enter。设置 Slot.configure({ shortcuts: false }) 可禁用所有 Slot 输入规则。输入规则解析器可以配置、填写或拒绝新 Slot。
要将分隔符之间的文本也转换为行内 Slot,请配置一对分隔符:
Slot.configure({
shortcuts: { inline: { open: '{{', close: '}}' } },
})输入 {{Ada}} 会创建包含“Ada”的行内 Slot。这对分隔符始终创建行内 Slot,包括在空段落中。{{{ 和 [[[ 创建快捷方式仍保持启用。请参阅快捷方式配置来定制或禁用单个规则。
示例:Slot 编辑器应用
一个允许用户向文档添加 Slot 的模板编辑器示例。
之后,可以将文档交给另一组用户填写 Slot。为此,请配置文档权限,使用户只能填写 Slot,不能编辑文档的其他部分。阅读本指南,了解如何设置编辑器以便用户填写文档 Slot。