上传失败后从内容中删除图像

Question

使用 TinyMCE 4 和带有自定义图像上传处理程序的粘贴插件（基于 documentation sample），我的上传工作正常。但是，当上传失败时，图像仍然添加到内容中。该示例指示为错误调用失败方法，但不会删除图像。

我尝试添加一个 paste_postprocess 回调来过滤内容，但此时成功上传的图片和失败的图片在内容上没有区别。它们都出现在如下内容中：

<div style="display:none"><img src="data:image/jpeg;base64, datahere" /></div>

内容的最终结果其实是不同的。成功上传的图片来源如下：

<img src="http://website/uploads/mceclip11.jpg" />

而失败的上传看起来像：

<img src="blob:http://website/dd3bdcda-b7b1-40fe-9aeb-4214a86a92a9">

为了尝试这个，我创建了一个 TinyMCE Fiddle here。

关于如何在向用户显示之前从内容中删除上传失败的图片有什么想法吗？

Answer 1

对于可能会尝试类似操作的任何人，我想出了一个方法来处理这个问题。

调用示例中显示的失败方法后，我现在调用一个方法来删除失败的图像，然后再显示在编辑器中。

函数看起来像这样：

function removeFailedUpload() {
    var editor = tinymce.EditorManager.get('editorId');
    var $html = $('<div />',{html:editor.getContent()});
    $html.find('img[src^="data:"]').remove();
    editor.setContent($html.html());
}

Answer 2

我建议使用两种方法来更紧凑地删除并保持光标位置。

方法一：

var editor = tinymce.activeEditor;
editor.selection.collapse();
$(editor.dom.doc).find('img[src^="blob:"]').remove();

方法二：

var editor = tinymce.activeEditor;
var img = $(editor.dom.doc).find('img[src^="blob:"]').get(0);
if (img)
    editor.execCommand('mceRemoveNode', false, img);

Answer 3

最简单的解决方案是使用撤消管理器：

tinymce.activeEditor.undoManager.undo();

Answer 4

在版本 5 中，您可以传递可选对象以在失败时删除图像。

function images_upload_handler(blobInfo, success, failure) {
  failure('Fail fail fail', { remove: true });
  alert('failed upload');
  return;
},

参见 docs。

上传失败后从内容中删除图像

Remove image from content after failed upload

tinymce

tinymce-4