HTML编辑器和从Word粘贴图像

Question

我们已经制作了一个非常简单的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 64.”

有什么方法可以让word始终将base64编码的图片粘贴到编辑器，而不仅仅是文件:// location？

Answer 1

您将需要处理粘贴事件，并读取剪贴板的图像内容。请在下面的代码片段中找到原型(在google中测试)，它演示了相同的内容。

​

// 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;
}

<div id="editor" contenteditable=true>Copy an image from word<br/>Press Ctrl+v to paste it here <br/></div>

​