tiptap BulletList 无序序列扩展

tiptap BulletList 扩展可以在编辑器中使用符号列表，它们被呈现为 HTML 的 ul 标签

Install 安装

npm install @tiptap/extension-bullet-list @tiptap/extension-list-item

扩展需要安装 ListItem 节点。

Settings 配置

HTMLAttributes 自定义HTML属性。

BulletList.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

itemTypeName 制定列的项名，默认listItem。

BulletList.configure({
  itemTypeName: 'listItem',
})

keepMarks 是否保留转换为无序列之前的mark标记，默认为false。

BulletList.configure({
  keepMarks: true,
})

keepAttributes 是否保留转换为无序列之前的属性，默认为false。

BulletList.configure({
  keepAttributes: true,
})

Commands 命令

toggleBulletList 将选中内容转换为无序列。

editor.commands.toggleBulletList()

Shortcuts 快捷键

Windows/Linux Control Shift 8
   macOS Cmd Shift 8

源代码

extension-bullet-list

在线例子

在线例子

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。