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在线拖放图像上传不起作用

2 个答案: