Tiptap 中文文档

删除节点按钮

Available in Start plan

一个完全支持无障碍的 Tiptap 编辑器删除节点按钮。支持通过键盘快捷键和智能选择处理，从编辑器中移除选中的节点或块。

安装

通过 Tiptap CLI 添加该组件：

npx @tiptap/cli@latest add delete-node-button

组件

<DeleteNodeButton />

一个预构建的 React 组件，用于从编辑器中删除节点。

使用示例 

export default function MyEditor() {
  return (
    <DeleteNodeButton
      editor={editor}
      text="删除"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDeleted={() => console.log('节点已删除！')}
    />
  )
}

属性

名称类型默认值说明
editorEditor | nullundefinedTiptap 编辑器实例
textstringundefined按钮的可选文字标签
hideWhenUnavailablebooleanfalse当无法删除时隐藏按钮
onDeleted() => voidundefined成功删除后触发的回调
showShortcutbooleanfalse显示键盘快捷键标识（如果可用）

Hooks

useDeleteNode()

一个自定义钩子，用于构建拥有完全控制权的删除节点按钮，涵盖渲染和行为。

使用示例 

function MyDeleteNodeButton() {
  const { isVisible, handleDeleteNode, canDeleteNode, label, shortcutKeys, Icon } = useDeleteNode({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDeleted: () => console.log('节点已删除！'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleDeleteNode} disabled={!canDeleteNode} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}

属性

名称类型默认值说明
editorEditor | nullundefinedTiptap 编辑器实例
hideWhenUnavailablebooleanfalse无法删除时隐藏按钮
onDeleted() => voidundefined成功删除后触发的回调

返回值

名称类型说明
isVisibleboolean按钮是否应该渲染
canDeleteNodeboolean是否可以删除节点
handleDeleteNode() => boolean删除所选节点的函数
labelstring按钮的无障碍标签文本
shortcutKeysstring键盘快捷键（Backspace）
IconReact.FC删除按钮的图标组件（TrashIcon）

工具函数

canDeleteNode(editor)

检查当前编辑器状态下是否可删除节点。

import { canDeleteNode } from '@/components/tiptap-ui/delete-node-button'

const canDelete = canDeleteNode(editor)

deleteNode(editor)

以编程方式删除选中的节点或块。

import { deleteNode } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNode(editor)
if (success) {
  console.log('节点删除成功！')
}

deleteNodeAtPosition(editor, pos, nodeSize)

低级工具函数，删除指定位置的节点。

import { deleteNodeAtPosition } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNodeAtPosition(editor, position, nodeSize)

键盘快捷键

删除节点按钮支持以下键盘快捷键：

  • Backspace（退格键）：删除选中的节点或块

使用 <DeleteNodeButton /> 组件或 useDeleteNode() 钩子时，该快捷键会自动注册。请注意，这增强了默认退格键的行为，使其适用于节点选择。

需求

依赖

  • @tiptap/react - Tiptap React 核心集成
  • react-hotkeys-hook - 键盘快捷键管理

引用组件

  • use-tiptap-editor（钩子）
  • button（基础组件）
  • badge（基础组件）
  • tiptap-utils（库）
  • trash-icon（图标）
Previously复制到剪贴板按钮