项目符号列表
这个扩展允许你在编辑器中使用项目符号列表。它们会被渲染成 HTML 的 <ul>
标签。
在新的一行开头输入 *
, -
或 +
,它将神奇地转换为项目符号列表。
安装
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
这个扩展需要 ListItem
节点。
配置
HTMLAttributes
自定义应添加到渲染 HTML 标签上的自定义 HTML 属性。
BulletList.configure({
HTMLAttributes: {
class: "my-custom-class",
},
});
itemTypeName
指定列表项的名称。
默认值:'listItem'
BulletList.configure({
itemTypeName: "listItem",
});
keepMarks
决定是否在使用 inputRule
或按钮切换列表后保留前一行的标记。
默认值:false
BulletList.configure({
keepMarks: true,
});
keepAttributes
决定是否在使用 inputRule
或按钮切换列表后保留前一行的属性。
默认值:false
BulletList.configure({
keepAttributes: true,
});
命令
toggleBulletList()
切换项目符号列表。
editor.commands.toggleBulletList();
键盘快捷键
命令 | Windows/Linux | macOS |
---|---|---|
toggleBulletList | Ctrl + Shift + 8 |
Cmd + Shift + 8 |
源代码
packages/extension-bullet-list/