Question

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

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

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

0 个答案: