tiptap-extension-image-upload

Image upload extension for tiptap, support image preview.

中文 readme

Introduction

Upload support:

• File type data upload (such as the image selected by input:file)
• Image drop handling
• Screenshot in the clipboard
• Third party pictures in the clipboard (the image url will be read and converted to File)

Image preview（.image-placeholder）：

• The base64 of the image is used as the preview by default

Instalation

npm i tiptap-extension-image-upload -S

Usage

Add it as any extension in useEditor()

1import { ImageUploadExtension, ImagePlaceholder } from 'tiptap-extension-image-upload'
2
3  extensions: {
4    ImageUploadExtension.configure({
5      acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
6      upload: (file: File, id: string) => {
7        // your upload ajax
8        return Promise.resolve('https://avatars.githubusercontent.com/u/112541088')
9      },
10      ignoreDomains: ['www.xxx.com']
11    }),
12    ImagePlaceholder.configure({
13      inline: false
14    }),

ImageUploadExtension Configuration

1export interface ImageUploaderPluginOptions {
2  /** Image types allowed to upload */
3  acceptMimes: string[]
4  /**
5   * Image File upload function
6   * @param {File} file - File waiting to be uploaded
7   * @param {string} id - Automatically generated unique key
8   */
9  upload(file: File | string, id: string): Promise<string>
10  /** Do not upload if the src domain is in this array  */
11  ignoreDomains: string[]
12}