BulletList 扩展

此扩展使您能够在编辑器中使用项目符号列表。它们被渲染为 <ul> HTML 标签。在新行的开头键入 * 、- 或 + ，它将神奇地转换为项目符号列表。

如果您想修改退格和删除功能在列表中的标准行为，您应该阅读 ListKeymap 扩展。

安装

npm install @tiptap/extension-list

此扩展需要 ListItem 节点。

import { Editor } from '@tiptap/core'
import { BulletList } from '@tiptap/extension-list'

new Editor({
  extensions: [BulletList],
})

此扩展默认与 ListKit 扩展一起安装，因此您无需单独安装。

import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list-kit'

new Editor({
  extensions: [ListKit],
})

应添加到渲染的 HTML 标签的自定义 HTML 属性。

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

指定列表项名称。

默认值：'listItem'

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

决定在使用 inputRule 或按钮切换列表后是否保留上一行的标记。

默认值：false

BulletList.configure({
  keepMarks: true,
})

决定在使用 inputRule 或按钮切换列表后是否保留上一行的属性。

默认值：false

BulletList.configure({
  keepAttributes: true,
})

切换项目符号列表。

editor.commands.toggleBulletList()

命令	Windows/Linux	macOS
toggleBulletList	`Control` + `Shift` + `8`	`Cmd` + `Shift` + `8`

import { Editor } from '@tiptap/core'
import { BulletList } from '@tiptap/extension-list/bullet-list'

new Editor({
  extensions: [BulletList],
})