Görüntüyü zengin metne yapıştırın (gmail gibi)

Bir resmi panodan, özellikle ekran görüntülerinden kopyalayıp zengin bir metin düzenleyicisine yapıştırarak ve/veya bu dosyayı karşıya yükleyebilmeyi istiyorum. Sadece krom kullanırız, bu nedenle sadece krom için çalışmak zorundadır. Google Chrome'un en son sürümünü çalıştıran yaparkenGörüntüyü zengin metne yapıştırın (gmail gibi)

http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html
Şimdi, şu çok panonuzdan görüntüleri yapıştırabilirsiniz. Dolayısıyla, bir resmi web'den veya başka bir e-postadan kopyalarsanız, doğrudan mesajınıza yapıştırabilirsiniz.

Bu yeni gmail özelliğinin kendimi uygulayabileceğimiz bir javascript olup olmadığını bilen var mı? Ya da bunun hakkında başka bir fikir?

kaynak

2011-06-18 Devin Smith

http://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-java-script/4400761#4400761 Firefox (ve büyük olasılıkla Chrome), verileri Verili Href olarak URI. Gmail'in nasıl yaptıklarını bilmiyorum. Muhtemelen 'event.clipboardData' ile. – Na7coldwater

Na7coldwater'ın doğru olduğuna inanıyorum. event.clipboardData kullanılıyor. kavramının aşağıdaki kanıtını bakın:

<html> 
<body> 
    <div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div> 
    <script type="text/javascript"> 
     document.getElementById("rte").focus(); 
     document.body.addEventListener("paste", function(e) { 
      for (var i = 0; i < e.clipboardData.items.length; i++) { 
       if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") { 
        // get the blob 
        var imageFile = e.clipboardData.items[i].getAsFile(); 

        // read the blob as a data URL 
        var fileReader = new FileReader(); 
        fileReader.onloadend = function(e) { 
         // create an image 
         var image = document.createElement("IMG"); 
         image.src = this.result; 

         // insert the image 
         var range = window.getSelection().getRangeAt(0); 
         range.insertNode(image); 
         range.collapse(false); 

         // set the selection to after the image 
         var selection = window.getSelection(); 
         selection.removeAllRanges(); 
         selection.addRange(range); 
        }; 

        // TODO: Error Handling! 
        // fileReader.onerror = ... 

        fileReader.readAsDataURL(imageFile); 

        // prevent the default paste action 
        e.preventDefault(); 

        // only paste 1 image at a time 
        break; 
       } 
      } 
     });   
    </script> 
</body>

Gmail, veri URL olarak doğrudan gömmek yerine XMLHttpRequest aracılığıyla görüntüsü yükler. & sürükle dosya yüklemeleri için Google veya SO üzerinde yapılan bir arama, bunun nasıl gerçekleştirilebileceğini açıklamalıdır.

Lütfen bunun sadece bir kavram kanıtı olduğunu unutmayın. Hata işleme ve tarayıcı/özellik algılama kodu dahil değildir.

Bu yardımcı olur umarız!

kaynak

2011-06-27 14:14:28

merhaba, iyi kod için teşekkürler onun çalışma krom ve firefox. Ama koşmaya çalıştığımda, işe yaramıyor. Bunun hakkında bir fikrin var mı? – altandogan

Görüntüyü zengin metne yapıştırın (gmail gibi)

cevap

İlgili konular