删除节点按钮
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('节点已删除！')}
/>
)
}属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
editor | Editor | null | undefined | Tiptap 编辑器实例 |
text | string | undefined | 按钮的可选文字标签 |
hideWhenUnavailable | boolean | false | 当无法删除时隐藏按钮 |
onDeleted | () => void | undefined | 成功删除后触发的回调 |
showShortcut | boolean | false | 显示键盘快捷键标识（如果可用） |
钩子
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>
)
}属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
editor | Editor | null | undefined | Tiptap 编辑器实例 |
hideWhenUnavailable | boolean | false | 无法删除时隐藏按钮 |
onDeleted | () => void | undefined | 成功删除后触发的回调 |
返回值
| 名称 | 类型 | 说明 |
|---|---|---|
isVisible | boolean | 按钮是否应该渲染 |
canDeleteNode | boolean | 是否可以删除节点 |
handleDeleteNode | () => boolean | 删除所选节点的函数 |
label | string | 按钮的无障碍标签文本 |
shortcutKeys | string | 键盘快捷键（Backspace） |
Icon | React.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() hook 时，会自动注册该快捷键。编辑器扩展会继续保留对其已处理的 Backspace 事件的所有权；共享删除快捷键仅会在事件尚未处理时运行，并且只有在删除成功后才会阻止浏览器默认行为。成功的位置删除操作会单独创建一个撤销步骤。
Requirements
Dependencies
@tiptap/react- Core Tiptap React integration@tiptap/pm- ProseMirror selection and history utilities@tiptap/starter-kit- Core editor extensions and keymapsreact-hotkeys-hook- Keyboard shortcut management
Referenced Components
use-tiptap-editor(hook)use-is-breakpoint(hook)button(primitive)badge(primitive)tiptap-utils(lib)trash-icon(icon)styles(shared styles)