插入和上传图片的按钮

一个用于在编辑器中插入和上传图片的按钮。

安装

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

npx @tiptap/cli add image-upload-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 { Image } from '@tiptap/extension-image'
import { ImageUploadButton } from '@/components/tiptap-ui/image-upload-button'
import { ImageUploadNode } from '@/components/tiptap-node/image-upload-node'
import { handleImageUpload, MAX_FILE_SIZE } from '@/lib/tiptap-utils'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Image,
      ImageUploadNode.configure({
        accept: 'image/*',
        maxSize: MAX_FILE_SIZE,
        limit: 3,
        upload: handleImageUpload,
        onError: (error) => console.error('上传失败:', error),
      }),
    ],
    content: `
        <p>点击按钮上传图片。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <ImageUploadButton text="添加" />
      </div>

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

属性

名称	类型	默认值	描述
editor	Editor \| null	null	Tiptap 编辑器实例
extensionName	string	'imageUpload'	图像上传扩展的名称
text	string	-	图标旁边要显示的文本

需求

使用的引用组件

use-tiptap-editor（钩子）
button（原始组件）
image-plus-icon（图标）