tiptap 有序列表

如果一个项目符号列表看起来不够正式，可以在前面加上一些数字。

这个扩展允许你在编辑器中使用有序列表。它们将以 <ol> HTML 标签的形式显示。

在新的一行开始时输入 1. （或其他任何数字后面跟着一个点），它会神奇地变成一个有序列表。

安装

npm install @tiptap/extension-ordered-list @tiptap/extension-list-item

此扩展需要 ListItem 节点。

配置

HTMLAttributes

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

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

itemTypeName

指定列表项的名称。

默认值：'listItem'

OrderedList.configure({
  itemTypeName: "listItem",
});

keepMarks

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

默认值：false

OrderedList.configure({
  keepMarks: true,
});

keepAttributes

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

默认值：false

OrderedList.configure({
  keepAttributes: true,
});

命令

toggleOrderedList()

切换有序列表。

editor.commands.toggleOrderedList();

快捷键

源代码

packages/extension-ordered-list/

使用示例

嵌入预览