---
title: "BulletList 扩展"
description: "使用 Bullet 列表扩展来启用 Tiptap 编辑器中的项目符号列表。了解更多关于列表的信息，请访问我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/bullet-list"
---

# BulletList 扩展

使用 Bullet 列表扩展来启用 Tiptap 编辑器中的项目符号列表。了解更多关于列表的信息，请访问我们的文档！

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

> **Interactive demo:** [BulletList](https://embed.tiptap.dev/preview/Nodes/BulletList)

> **修改退格行为:**
>
> 如果您想修改退格和删除功能在列表中的标准行为，您应该阅读 [ListKeymap](https://tiptap.zhcndoc.com/editor/extensions/functionality/listkeymap.md) 扩展。

## 安装

```bash
npm install @tiptap/extension-list
```

此扩展需要 [`ListItem`](https://tiptap.zhcndoc.com/editor/extensions/nodes/list-item.md) 节点。

## 使用

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

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

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

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

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

## 设置

### HTMLAttributes

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

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

### itemTypeName

指定列表项名称。

默认值：`'listItem'`

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

### keepMarks

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

默认值：`false`

```js
BulletList.configure({
  keepMarks: true,
})
```

### keepAttributes

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

默认值：`false`

```js
BulletList.configure({
  keepAttributes: true,
})
```

## 命令

### toggleBulletList()

切换项目符号列表。

```js
editor.commands.toggleBulletList()
```

## 键盘快捷键

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

## 源代码

[packages/extension-list/src/bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/src/bullet-list/)

## 最小安装

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

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