撤销和重做编辑器操作按钮

一个用于撤销和重做编辑器操作的按钮。

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加该组件

npx @tiptap/cli add undo-redo-button

手动集成

对于 Vite 或 Next.js 以外的框架，可以从开源代码库手动添加该组件。

导入样式

该组件需要您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss。

用法

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { UndoRedoButton } from '@/components/tiptap-ui/undo-redo-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
        <p>尝试输入一些内容，然后点击撤销和重做按钮。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <UndoRedoButton action="undo" />
        <UndoRedoButton action="redo" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

属性

名称	类型	默认值	描述
editor	Editor \| null	null	Tiptap 编辑器实例
action	'undo' \| 'redo'	必需	要执行的历史操作
text	string	-	显示在图标旁边的文本

要求

使用的参考组件

use-tiptap-editor（钩子）
button（原始元素）
undo2-icon（图标）
redo2-icon（图标）