TinyMCE 上传图片成功后不更新 <img> src

Question

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

主要有两个问题：

1234563仅此而已。

1. 粘贴图片后，TinyMCE 应该异步上传它们并将<img> 的src 属性更新为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

您的问题归结为当您从 MS Word 复制/粘贴内容时放置在剪贴板中的内容。

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

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

至于 TinyMCE 中的图像上传功能......仅适用于通过复制/粘贴和拖放等操作最终在 TinyMCE 中的 base64 和 blob 编码图像 - 这就是为什么它当您仅复制/粘贴图像而不是复制/粘贴包含文本和图像的文档时，可以正常工作。

TinyMCE（Power Paste Plugin）有一个商业插件，实际上可以解决您在 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 对象的数组。