Tiptap 中文文档

详情扩展

版本下载量

详情扩展使您能够在编辑器中使用 <details> HTML 标签。这非常适合显示和隐藏内容。

安装 

npm install @tiptap/extension-details

此扩展要求 DetailsSummary 和 DetailsContent 节点。

设置

persist

指定打开状态是否应保存在文档中。默认为 false。

Details.configure({
  persist: true,
})

openClassName

指定切换内容时设置的 CSS 类。默认为 is-open。

Details.configure({
  openClassName: 'is-open',
})

renderToggleButton

自定义切换详情节点的按钮。回调接收按钮 element、当前 isOpen 状态以及应用于推导标签的 node。

当您想要更改按钮的可访问标签或直接更新按钮元素时，这很有用。

Details.configure({
  renderToggleButton: ({ element, isOpen, node }) => {
    element.setAttribute(
      'aria-label',
      isOpen
        ? `Collapse details: ${node.textContent || 'details'}`
        : `Expand details: ${node.textContent || 'details'}`,
    )
  },
})

HTMLAttributes

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

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

命令

setDetails()

将内容包装在一个详情节点中。

editor.commands.setDetails()

unsetDetails()

解包详情节点。

editor.commands.unsetDetails()
Previously代码块浅色主题