我需要将Microsoft Word中的内容粘贴到ContentEditable div中。
仅选择图像和粘贴。仅选择文本并在div中粘贴也可以。但是,选择整个文档(可能是一些图像和文本的混合)会导致它使用src指向temp文件夹中的本地文件来呈现图像。在除Internet Explorer之外的所有浏览器中都会发生这种情况。
指向临时文件的图像没有用,因为一段时间后该文件将消失。所以我需要它作为base64映像。
从本地计算机打开后,以下代码在Edge中有效:
var pasteDemo = document.getElementById("pasteDemo");
pasteDemo.onpaste = function(e) {
var items = (e.clipboardData || e.originalEvent.clipboardData).items;
var imgidx = -1;
for (var i = 0; i < items.length; i++) {
var item = items[i];
// console.log(item);
if (item.kind == 'file' && item.type.indexOf('image') >= 0) {
imgidx++;
var reader = new FileReader();
reader.onload = function(e) {
setTimeout(function() {
// setTimeout so that clipboard images gets a chance to get converted to <img> elements.
var img = pasteDemo.getElementsByTagName('img')[imgidx];
if (!img) {
// to handle image paste in Chrome & Edge, since they don't create a <img> element at all
img = document.createElement('img');
pasteDemo.appendChild(img);
}
img.src = e.target.result;
}, 10);
}
reader.readAsDataURL(item.getAsFile());
}
}
// images that still have src="file:///..."
setTimeout(function() {
var images = pasteDemo.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('file:///') >= 0) {
convertToBase64(images[i]);
}
}
}, 100);
}
function convertToBase64(img) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result
};
reader.readAsDataURL(xhr.response);
};
xhr.responseType = 'blob';
xhr.open('GET', img.src);
xhr.send();
}
#pasteDemo {
min-height: 100px;
min-width: 100px;
border: 1px solid blue;
padding: 5px;
}
<span>Paste your content in the box below...</span>
<div contenteditable="true" id="pasteDemo"></div>
但是,这不能解决问题,因此必须将该页面托管在Web服务器上。此外,Chrome,Firefox和其他浏览器仍然存在问题,它们在控制台中显示出如下错误:
跨源请求被阻止:同源策略禁止阅读 位于的远程资源 文件:/// C:/Users/PRADEE~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg。 (原因:CORS请求不是http)。
有什么办法解决此问题,或其他可行的替代方法?