feat(editor): add FileHandler extension for image paste/drop upload
This commit is contained in:
parent
3d7dd5b5a5
commit
00c5a880f4
@ -5,6 +5,7 @@ import { TableKit } from '@tiptap/extension-table'
|
|||||||
import { Image } from '@tiptap/extension-image'
|
import { Image } from '@tiptap/extension-image'
|
||||||
import { Link } from '@tiptap/extension-link'
|
import { Link } from '@tiptap/extension-link'
|
||||||
import { TaskList, TaskItem } from '@tiptap/extension-list'
|
import { TaskList, TaskItem } from '@tiptap/extension-list'
|
||||||
|
import { FileHandler } from '@tiptap/extension-file-handler'
|
||||||
import { SlashCommand } from './slash-command'
|
import { SlashCommand } from './slash-command'
|
||||||
import './style.css'
|
import './style.css'
|
||||||
|
|
||||||
@ -15,6 +16,8 @@ export interface EditorOptions {
|
|||||||
onFocus?: () => void
|
onFocus?: () => void
|
||||||
onBlur?: () => void
|
onBlur?: () => void
|
||||||
editable?: boolean
|
editable?: boolean
|
||||||
|
// 新增:图片上传回调
|
||||||
|
onImageUpload?: (file: File) => Promise<string>
|
||||||
}
|
}
|
||||||
|
|
||||||
class TiptapEditorInstance {
|
class TiptapEditorInstance {
|
||||||
@ -55,6 +58,35 @@ class TiptapEditorInstance {
|
|||||||
TaskList,
|
TaskList,
|
||||||
TaskItem.configure({ nested: true }),
|
TaskItem.configure({ nested: true }),
|
||||||
SlashCommand,
|
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 || '',
|
content: this.options.content || '',
|
||||||
editable: this.options.editable !== false,
|
editable: this.options.editable !== false,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user