我使用Servlet作为后端在Handling Async Image Upload中使用TinyMCE遇到了问题。
有两个主要问题：
即使在使用paste插件并设置paste_data_images:true后，在与MS Word中的文字一起粘贴时，图像也不会自动粘贴，只有文字被粘贴，图像会被遗漏，而我单独粘贴图像就会被粘贴。
粘贴图片后，TinyMCE应该异步上传它们并将<img>的{{1}}属性更新为src返回的location属性来自后端。
现在问题在于，当我单独粘贴图像时，它会自动上传到后端，并且正确的响应会以图像json作为JSON返回，我已经通过浏览器控制台和也可以通过手动图像插入选项。但毕竟这是location空白，图像变成黑色边界。
如果有人遇到类似的问题，请帮助我，而后端可以是任何东西，因为我不认为这是后端的问题。
守则：
<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
在粘贴图片或上传图片后，Chrome控制台根本不显示任何异常或警告。如果有人有任何问题的解决方案或某种方式来了解其背后的实际原因，请告诉我。如果有任何需要更多解释，请告诉我。
答案 0 :(得分：2)
您的问题归结为从MS Word复制/粘贴内容时放在剪贴板中的内容。
复制/粘贴文本和图像的组合时 Word会在剪贴板中放置一个表示复制内容的HTML文档。在这种情况下，图像是通过<img>标记的内容的一部分。这些<img>标记的src指向硬盘驱动器上临时目录中的图像文件。由于浏览器中的JavaScript沙箱，编辑器无法实际访问硬盘驱动器上的这些图像文件。这些图片不包含在粘贴的内容中，因为TinyMCE无法呈现它们或将它们上传到您的服务器。
复制/粘贴图像时 Word会将该图像的二进制（通常为base64）表示放在剪贴板中。在这种情况下，TinyMCE能够获取该二进制表示并将base64编码的图像注入到内容中，从而获得图像。
至于TinyMCE中的图像上传功能...... 仅适用于通过复制/粘贴和拖放等操作最终进入TinyMCE的base64和blob编码图像 - 这就是为什么它的原因复制/粘贴图像时不按预期工作，而不是复制/粘贴带有文本和图像的文档时。
TinyMCE（Power Paste Plugin）有一个商业插件，可以解决你在Word文档中的问题。此插件作为TinyMCE Enterprise的一部分提供 - TinyMCE是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对象的数组。