将图片和文字从Microsoft Word粘贴到ContentEditable div

时间:2018-08-09 23:45:27

标签: javascript cross-browser contenteditable onpaste cross-origin-read-blocking

我需要将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)。

有什么办法解决此问题,或其他可行的替代方法?

0 个答案:

没有答案