---
title: "有序列表扩展"
description: "在 Tiptap 中使用有序列表扩展以启用渲染为 `` HTML 标签的有序列表。了解更多请参阅我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/ordered-list"
---

# 有序列表扩展

在 Tiptap 中使用有序列表扩展以启用渲染为 `` HTML 标签的有序列表。了解更多请参阅我们的文档！

此扩展允许您在编辑器中使用有序列表。它们被渲染为 `<ol>` HTML 标签。

在新行开头输入 1. （或任何其他数字加点），它将神奇地转换为一个有序列表。

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

> **修改退格键行为:**
>
> 如果您想修改列表的退格和删除功能的标准行为，请阅读 [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 { OrderedList } from '@tiptap/extension-list'

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

此扩展默认随 `ListKit` 扩展安装，因此无需单独安装。

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

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

## 设置

### HTMLAttributes

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

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

### itemTypeName

指定列表项名称。

默认值：`'listItem'`

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

### keepMarks

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

默认值：`false`

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

### keepAttributes

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

默认值：`false`

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

## 命令

### toggleOrderedList()

切换有序列表。

```js
editor.commands.toggleOrderedList()
```

## 快捷键

| 命令                | Windows/Linux       | macOS           |
| ----------------- | ------------------- | --------------- |
| toggleOrderedList | Control + Shift + 7 | Cmd + Shift + 7 |

## 源代码

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

## 最小安装示例

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

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