---
title: "ListKit 扩展"
description: "所有必要的列表扩展都在一个 ListKit 扩展中。非常适合快速在 Tiptap 中设置列表。更多信息在文档中！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/list-kit"
---

# ListKit 扩展

所有必要的列表扩展都在一个 ListKit 扩展中。非常适合快速在 Tiptap 中设置列表。更多信息在文档中！

`ListKit` 是一个包含所有必要的 Tiptap 列表扩展的集合。如果你想快速在 Tiptap 中设置列表，这个扩展非常适合你。

## 安装

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

## 包含的扩展

### 节点

- [`BulletList`](https://tiptap.zhcndoc.com/editor/extensions/nodes/bullet-list.md)
- [`ListItem`](https://tiptap.zhcndoc.com/editor/extensions/nodes/list-item.md)
- [`OrderedList`](https://tiptap.zhcndoc.com/editor/extensions/nodes/ordered-list.md)
- [`TaskItem`](https://tiptap.zhcndoc.com/editor/extensions/nodes/task-item.md)
- [`TaskList`](https://tiptap.zhcndoc.com/editor/extensions/nodes/task-list.md)

### 扩展

- [`ListKeymap`](https://tiptap.zhcndoc.com/editor/extensions/functionality/listkeymap.md)

## 源代码

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

## 使用 ListKit 扩展

将 `ListKit` 传递给编辑器以一次加载所有包含的扩展。

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

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

你可以配置包含的扩展，甚至可以禁用其中的一些，如下所示。

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

const editor = new Editor({
  extensions: [
    ListKit.configure({
      // 禁用扩展
      bulletList: false,

      // 配置扩展
      listItem: {
        HTMLAttributes: { class: 'list-item' },
      },
    }),
  ],
})
```