项目符号列表

这个扩展允许你在编辑器中使用项目符号列表。它们会被渲染成 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();

键盘快捷键

源代码

packages/extension-bullet-list/

使用示例

Tiptap 预览