Tiptap 中文文档

复制按钮

Available in Start plan

一个对 Tiptap 编辑器完全无障碍的复制按钮。支持通过键盘快捷键和智能内容复制，克隆编辑器中选中的节点或区块。

安装

通过 Tiptap CLI 添加该组件：

npx @tiptap/cli@latest add duplicate-button

组件

<DuplicateButton />

一个预构建的 React 组件，用于复制编辑器中的节点。

使用示例 

export default function MyEditor() {
  return (
    <DuplicateButton
      editor={editor}
      text="复制"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDuplicated={() => console.log('节点已复制！')}
    />
  )
}

参数说明

名称类型默认值说明
editorEditor | nullundefinedTiptap 编辑器实例
textstringundefined按钮的可选文本标签
hideWhenUnavailablebooleanfalse在不可复制时隐藏按钮
onDuplicated() => voidundefined复制成功后调用的回调
showShortcutbooleanfalse显示快捷键徽章（如果可用）

Hook

useDuplicate()

一个自定义 hook，允许你完全控制复制按钮的渲染和行为，自行构建复制按钮。

使用示例 

function MyDuplicateButton() {
  const { isVisible, handleDuplicate, canDuplicate, label, shortcutKeys, Icon } = useDuplicate({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDuplicated: () => console.log('节点已复制！'),
  })

  if (!isVisible) return null

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

参数说明

名称类型默认值说明
editorEditor | nullundefinedTiptap 编辑器实例
hideWhenUnavailablebooleanfalse复制不可用时隐藏按钮
onDuplicated() => voidundefined复制成功后调用的回调

返回值说明

名称类型说明
isVisibleboolean按钮是否应该被渲染
canDuplicateboolean是否可以复制节点
handleDuplicate() => boolean复制选中节点的函数
labelstring按钮的无障碍标签文本
shortcutKeysstring键盘快捷键（Cmd/Ctrl + D）
IconReact.FC复制按钮的图标组件（CopyIcon）

工具函数

canDuplicateNode(editor)

检查当前编辑器状态下是否可以复制节点。

import { canDuplicateNode } from '@/components/tiptap-ui/duplicate-button'

const canDuplicate = canDuplicateNode(editor)

duplicateNode(editor)

以编程方式复制选中的节点或区块。

import { duplicateNode } from '@/components/tiptap-ui/duplicate-button'

const success = duplicateNode(editor)
if (success) {
  console.log('节点复制成功！')
}

键盘快捷键

复制按钮支持以下快捷键：

  • Cmd/Ctrl + D：复制选中的节点或区块

使用 <DuplicateButton /> 组件或 useDuplicate() hook 时，快捷键会自动注册。注意：当编辑器聚焦时，这会覆盖浏览器默认的书签快捷键功能。

依赖

依赖包

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

引用组件

  • use-tiptap-editor（hook）
  • button（基础组件）
  • badge（基础组件）
  • tiptap-utils（工具库）
  • copy-icon（图标）
Previously拖拽上下文菜单