feat(editor): add FileHandler extension for image paste/drop upload

This commit is contained in:
xfy 2026-06-05 15:19:31 +08:00
parent 3d7dd5b5a5
commit 00c5a880f4

View File

@ -5,6 +5,7 @@ import { TableKit } from '@tiptap/extension-table'
import { Image } from '@tiptap/extension-image'
import { Link } from '@tiptap/extension-link'
import { TaskList, TaskItem } from '@tiptap/extension-list'
import { FileHandler } from '@tiptap/extension-file-handler'
import { SlashCommand } from './slash-command'
import './style.css'
@ -15,6 +16,8 @@ export interface EditorOptions {
onFocus?: () => void
onBlur?: () => void
editable?: boolean
// 新增:图片上传回调
onImageUpload?: (file: File) => Promise<string>
}
class TiptapEditorInstance {
@ -55,6 +58,35 @@ class TiptapEditorInstance {
TaskList,
TaskItem.configure({ nested: true }),
SlashCommand,
FileHandler.configure({
allowedMimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
onPaste: (editor, files) => {
if (this.options.onImageUpload) {
files.forEach((file) => {
this.options.onImageUpload!(file)
.then((url) => {
editor.chain().focus().setImage({ src: url }).run()
})
.catch((err) => {
console.error('[TiptapEditor] Upload failed:', err)
})
})
}
},
onDrop: (editor, files, pos) => {
if (this.options.onImageUpload) {
files.forEach((file) => {
this.options.onImageUpload!(file)
.then((url) => {
editor.chain().focus().setImage({ src: url }).run()
})
.catch((err) => {
console.error('[TiptapEditor] Upload failed:', err)
})
})
}
},
}),
],
content: this.options.content || '',
editable: this.options.editable !== false,