有序列表扩展

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

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

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

安装

npm install @tiptap/extension-list

此扩展依赖 ListItem 节点。

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

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

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

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

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

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

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

指定列表项名称。

默认值：'listItem'

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

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

默认值：false

OrderedList.configure({
  keepMarks: true,
})

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

默认值：false

OrderedList.configure({
  keepAttributes: true,
})

切换有序列表。

editor.commands.toggleOrderedList()

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

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

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