0

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

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

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

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

编辑：粘贴似乎可以工作，并且粘贴时图像上传成功。但是拖放仍然失败。这是直接拖放到编辑器中，而不是拖放到工作正常的上传图像对话框中。

4

2 回答 2

2

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

我注意到与您相同的问题（通知），如果我设置为（内联模式下的 TinyMCE 5.5）"Dropped file type is not supported"，我验证它不再存在。block_unsupported_dropfalse

这是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）。如果您了解更多信息，请告诉我。

于 2020-11-12T16:52:24.700 回答
0

最终注册了一个 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}" />`);
        })
    })

}
于 2021-04-07T08:07:18.347 回答