tiptap 任务项

此插件会渲染带有 data-type="taskItem" 属性的任务项列表元素，内部还会包含一个复选框，用于更新 checked 属性。它基于纯 JavaScript，无需依赖 JavaScript 框架。

安装

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

此插件需要 TaskList 节点的支持。

配置选项

HTMLAttributes

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

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

nested

是否允许任务项嵌套在彼此中。

TaskItem.configure({
  nested: true,
});

onReadOnlyChecked

当编辑器设置为只读模式时，任务项被勾选或取消勾选的处理程序。如果没有提供此处理程序，只读模式下任务项是不可变的。如果函数返回 false，将保持选中状态（只读）。

TaskItem.configure({
  onReadOnlyChecked: (node, checked) => {
    // 做一些事情
  },
});

快捷键

源码

packages/extension-task-item/

使用示例

查看在线演示：https://embed.tiptap.dev/preview/Nodes/TaskItem