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

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

方法1：

glBegin(GL_QUADS);
    glTexCoord2f(0.0f, 0.0f);
    glNormal3f(0.0f, 0.0f, 1.0f);
    glVertex3f(place.x - 15.0f, place.y - 15.0f, place.z - 5.0f);

    glTexCoord2f(1.0f, 0.0f);
    glNormal3f(0.0f, 0.0f, 1.0f);
    glVertex3f(place.x +15.0f, place.y - 15.0f, place.z - 5.0f);

    glTexCoord2f(1.0f, 1.0f);
    glNormal3f(0.0f, 0.0f, 1.0f);
    glVertex3f(place.x + 15.0f, place.y + 15.0f, place.z - 5.0f);

    glTexCoord2f(0.0f, 1.0f);
    glNormal3f(0.0f, 0.0f, 1.0f);
    glVertex3f(place.x - 15.0f, place.y + 15.0f, place.z - 5.0f);
glEnd();

方法2：

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

Answer 3

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

tinymce.activeEditor.undoManager.undo();

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

3 个答案: