成功上传图像后，TinyMCE 未更新 <img> src

Question

我运行在使用 Servlet 作为后端的 Handling Async Image Upload 中使用 TinyMCE 遇到问题。

主要有两个问题：

即使在使用 paste 插件并设置 paste_data_images:true 后，在从 MS Word 粘贴文本时，图像也不会自动粘贴，只有文本被粘贴而图像被遗漏，而当我单独粘贴图像时，它会被粘贴。
粘贴图片后，TinyMCE 应该异步上传它们并将 <img> 的 src 属性更新为 location 属性返回的 location 属性 json 来自后端。

现在这里出现了问题，当我单独粘贴图像时，它会自动上传到后端并且正确的响应返回图像的 location 作为 JSON，我已经用浏览器验证了这一点控制台，也可以通过手动图像插入选项。但是毕竟<img scr>是空白的，图像变成了黑色边界。

如果有人遇到过类似的问题，请帮助我，而后端可以是任何东西，因为我认为这不是后端的问题。

代码：

TinyMCE:

<script type="text/javascript" charset="utf-8">
            tinymce.init({
                selector: '#description',
                plugins: "image link imagetools codesample emoticons autoresize textcolor table preview wordcount paste",
                menubar: 'edit | format | insert | table',
                toolbar1: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'forecolor backcolor | codesample emoticons',
                automatic_uploads: true,
                images_upload_url: 'uploadFile',
                images_upload_credentials: true,
                images_upload_base_path: '',
                paste_data_images: true,
                file_browser_callback_types: 'image',
                convert_urls: false,
                file_browser_callback: function(field_name, url, type, win) { 
                    tinymce.activeEditor.windowManager.open({
                        title: "File Browser",
                        type: "image",
                        url: "uploadFile",
                        width: 550,
                        height: 200
                    }, {
                        oninsert: function(url) {
                            win.document.getElementById(field_name).value = url; 
                        }
                    });
                }
            });
        </script>

Back end Response after image upload:

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

<img> tag after image upload:

<img src="" alt="" data-mce-src="" data-mce-selected="1">

Chrome 控制台在粘贴图片或上传图片后完全没有显示异常或警告。请让我知道是否有人对问题有任何解决方案或某种方式来了解其背后的实际原因。如果上面有任何需要更多解释的地方，请告诉我。

Answer 1

您的问题归结为当您 copy/paste 来自 MS Word 的内容时剪贴板中放置的内容。

当您 copy/paste 文本和图像的组合时 Word 会在剪贴板中放置一个 HTML 文档，代表复制的内容。在这种情况下，图像通过 <img> 标签成为内容的一部分。这些 <img> 标签的 src 指向硬盘上临时目录中的图像文件。由于浏览器中的 JavaScript 沙箱，编辑器实际上无法访问您硬盘上的这些图像文件。图片不包含在粘贴的内容中，因为 TinyMCE 无法呈现它们或将它们上传到您的服务器。

当您 copy/paste 只是一个图像时 Word 将该图像的二进制（通常是 base64）表示形式放置在剪贴板中。在这种情况下，TinyMCE 能够获取该二进制表示并将 base64 编码图像注入内容，从而获得图像。

至于 TinyMCE 中的图像上传功能... 仅适用于 base64 和 blob 编码图像，这些图像通过 copy/paste 和 drag/drop - 这就是为什么当您 copy/paste 只有图像而不是当您 copy/paste 包含文本和图像的文档时，它会像您期望的那样工作。

TinyMCE（Power Paste 插件）的商业 add-on 实际上可以解决您与 Word 文档相关的问题。该插件作为 TinyMCE Enterprise 的一部分提供 - Ephox（TinyMCE 的所有者）提供的商业 TinyMCE 产品。 [为了全面披露，我为 Ephox 工作] 如果您想将 Word 文档中的图像注入到内容中，您可以在以下位置了解有关此选项的更多信息：https://www.tinymce.com/pricing/

至于你的图像 src 没有得到更新的问题... JSON 响应对象应该是一个简单的 JSON 对象

{ "location": "./uploaded/images/201617175645_blobid0.png" }

...不是...

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

当 TinyMCE 需要一个简单的 JSON 对象时，您返回的是一个包含一个 JSON 对象的数组。

成功上传图像后，TinyMCE 未更新 <img> src

TinyMCE Not updating <img> src after uploading image successfully

html

jquery

servlets

tinymce

image