HTML 编辑器和从 Word 粘贴图像答案

【问题标题】：HTML editor and pasting images from WordHTML 编辑器和从 Word 粘贴图像
【发布时间】：2017-11-12 04:09:26
【问题描述】：

我们制作了一个非常简单的 html 编辑器 (contenteditable="true")，用户可以粘贴从其他网页复制的图像，但是如果用户从 word 中复制图像，word 会将 src 粘贴为 file://temp/someimg .jpg，浏览器不会加载图片。

<img src="file://..../.jgp">

但如果我在我的开发计算机 (http://127.0.0.1) 上运行网页并执行相同操作，word 会将图像 src 粘贴为“data:image/jpeg;base64.....”

有没有什么方法可以让 word 总是将 base64 编码的图片粘贴到编辑器，而不仅仅是 file:// 位置？

【问题讨论】：

标签： javascript html ms-word

【解决方案1】：

您需要处理粘贴事件并读取剪贴板中的图像内容。请在下面的 sn-p 中找到原型（在 google chrome 中测试），它演示了相同的内容。

// create paste event listener
window.addEventListener("paste", pasteHandler);

// handle paste events
function pasteHandler(e) {
  if (e.clipboardData) {
    var items = e.clipboardData.items;
    if (items) {
      for (var i in items) { // iterate through clipbord items
        var item = items[i];
        if (item.kind == "file") {  //image is a file
        
          // create image source
          var blob = item.getAsFile();
          var URLObj = window.URL || window.webkitURL;
          var source = URLObj.createObjectURL(blob);
          var pastedImage = new Image();
          pastedImage.src = source;
          
          // add it in editor
          document.getElementById("editor").innerHTML = document.getElementById("editor").innerHTML + pastedImage.outerHTML;
        }
      }
    }
  }
}

#editor{
  min-width: 400px;
  min-height: 250px;
  border: solid;
  border-width: thin;
  padding: 10px;
}

&lt;div id="editor" contenteditable=true&gt;Copy an image from word&lt;br/&gt;Press Ctrl+v to paste it here &lt;br/&gt;&lt;/div&gt;

【讨论】：

链接失效