WordからのHTMLエディタと貼り付け

Question

非常に単純なHTMLエディタ（contenteditable="true"）を作成し、他のWebページからコピーした画像を貼り付けることもできますが、ユーザーがwordから画像をコピーすると、 //temp/someimg.jpgブラウザは画像をロードしません。

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

しかし、私は私のdevのコンピュータ（http://127.0.0.1）上のWebページを実行して、同じことを行う場合は、単語はのような画像SRCを貼り付けます "データ：画像/ JPEG; base64で....."

私は単語をファイルに貼り付けることができるいくつかの方法はありますか？

Answer 1

イメージコンテンツの貼り付けイベントと読み取りクリップボードを処理する必要があります。同じことを示す次のスニペット（google chromeでテスト済み）のプロトタイプを見つけてください。さまざまなブラウザでの処理の詳細については、http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/ブログを参照してください。

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