2009-01-29 170 views
71

如何將剪貼板中的圖像粘貼到使用javascript的自定義富文本編輯器中? (ctrl + c和ctrl + v或快照)。使用JavaScript從剪貼板粘貼圖像

有沒有人使用Ajax的富文本編輯器?是否將剪貼板中的圖像粘貼到Ajax RTE上?

請分享您的想法!

謝謝!

+4

AJAX通常考慮紅色技術......有一個真正的Web開發組織認真地命名自己的AJAX?他們只是在尋求麻煩。 – Matchu 2009-08-04 21:12:33

+1

好吧,考慮到AJAX這個名字是從一個神話般的希臘戰士(無論他們聲稱它是什麼縮寫)撕下來的,另一層是什麼? – GenericMeatUnit 2010-02-04 13:18:37

+0

[剪貼板功能中的粘貼圖像如何在Gmail和Google Chrome 12 +中工作?](http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-功能工作在gmail和谷歌c) – 2014-10-13 02:49:14

回答

-2

由於較早前:

我不認爲這是可能的。

你可能會粘貼文件名,但你真的需要圖像的完整路徑。 您實際上需要將圖像從用戶系統上傳到服務器。

+0

突然downvote ...爲什麼? – 2011-09-20 10:57:17

+0

不再正確。 – user66001 2013-02-02 10:28:40

+0

@ user66001隨時精心製作 – 2013-02-03 08:19:28

9

現在我找到了clipboardData Object

但它只從剪貼板中檢索文本格式或URL。 clipboardData僅限IE瀏覽器,它使用字符串,如果粘貼圖像則返回null。

測試例子

<form> 
    <input type="text" id="context" onClick="paste();"> 
    </form> 

<script type="text/javascript"> 

function paste() { 

var sRetrieveData = clipboardData.getData("Text"); 
document.getElementById('context').value = sRetrieveData;   

} 
</script> 

默認剪貼板接不上的Firefox,解釋here啓用。 另一方面,execCommand()僅處理文本值,不符合Firefox標準。

像其他人說的那樣,代碼在IE上工作的事實是一種安全風險,任何站點都可以訪問您的剪貼板文本。

複製圖像相對URL的最簡單方法是使用java applet,windows activeX插件,.net code或將其拖放。

-20

的JavaScript剪貼板訪問是安全風險,如果你(錯誤地)認爲你需要它,你可能需要回到你的設計...

1

不幸的是,這是不可能將圖像從剪貼板粘貼RTE。

如果您從包含圖像和某些文本的Microsoft Word等桌面應用複製blob,則該圖像將變爲破損的引用(儘管比例將是正確的),並且文本將被正確粘貼(格式化會迷路)。

唯一可能的是在RTE中複製圖像並將其粘貼回RTE中。

10

新的瀏覽器,如Firefox 4,支持從剪貼板粘貼到RTE的圖像數據爲Data URI with encoded PNG Data。但是,大多數Web應用程序錯誤地解析這些數據URI並丟棄它。雅虎郵件正確處理。不過,Gmail和Hotmail會放棄它。我已經通知谷歌和微軟這件事。

12

現在,這是絕對有可能在Chrome和Firefox瀏覽器。我不太確定IE/Safari。

看imgur.com,onpaste和pasteboard.co爲例,看看code for pasteboard on github以及Joel's excellent write up on his blog

爲了記錄在案,則需要用戶按Ctrl + V的元素,然後您可以通過從event.clipboardData中讀取粘貼事件處理程序中的數據來捕獲數據,但要使其處於較低級別,您需要確定焦點位於空元素上,然後從那裏獲取結果,而不是「 t在Firefox 22中運行良好。請參閱here