TinyMCE 内联拖放图像上传不起作用

Question

我已经将 TinyMCE 编辑器的工作实例与拖放图像上传放在一起，如果将图像放入 TinyMCE 编辑器（或粘贴），它会触发将图像和所述图像上传到服务器现在将在编辑器中。

该功能突然停止工作。我得到的只是这条错误消息：“不支持删除的文件类型”

此外，TinyMCE 网站上的该功能示例似乎也不再适用于相同的错误消息。

是不是浏览器或 TinyMCE 代码发生了变化导致它停止工作？如果它突然停止工作，即使 TinyMCE 版本未受影响，这似乎与 TinyMCE 代码无关。

编辑：粘贴似乎有效，粘贴后图像上传成功。但是拖放仍然失败。这是直接拖放到编辑器中，而不是拖放到上传图片对话框中，效果很好。

Answer 1

我认为您的问题可能与自 TinyMCE 5.4 以来存在的 block_unsupported_drop 选项有关，请参阅 https://www.tiny.cloud/docs/configure/file-image-upload/#block_unsupported_drop。

我注意到了与您相同的问题（"Dropped file type is not supported" 通知），并且如果我将 block_unsupported_drop 设置为 false（TinyMCE 5.5 内联模式），我已确认它不再存在。

这是TinyMCE中的相关代码： https://github.com/tinymce/tinymce/blob/91e7f357ca8db3aeaa6f48c7efa97eb8c5c39fbb/modules/tinymce/src/core/main/ts/DragDropOverrides.ts#L281-L297

老实说，我不太明白在什么情况下可能需要阻止删除，但看起来这个选项是作为修复删除图像后浏览器导航错误的一部分引入的（https://github.com/tinymce/tinymce/commit/c020562dadb7e3d9061f043009b686a8ca1366c5).如果您了解更多信息，请告诉我。

Answer 2

已完成注册 ondrop 事件处理程序。我正在使用 @tinymce/tinymce-angular，但在使用 editor.on("drop", (e) => {...}) 或类似的方法注册时应该也能正常工作。

import { EditorComponent } from "@tinymce/tinymce-angular";

....

@ViewChild(EditorComponent) editor: EditorComponent;

....

ngAfterViewInit() {

    this.editor.onDrop.subscribe(async (e: { editor, event }) => {
        let event = e.event;

        // Preventing 'Dropped file type is not supported' notification pop up
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();

        let files: File[] = [...event.dataTransfer.files];
        let uploadedFiles = await this.uploadFiles(files); // backend call

        uploadedFiles.forEach(file => {
            // change for different file types
            this.insertContent(`<img src="${file.Url}" />`);
        })
    })

}

TinyMCE 内联拖放图像上传不起作用

TinyMCE Inline Drag and Drop Image Upload Not Working

tinymce

tinymce-5