HTML內容從剪貼板中的JavaScript

Question

我需要執行的任務是爲RichTextEditors相當普遍的特徵 - 以HTML從剪貼板。 任何人都可以幫助指導如何解決這個任務？

它必須是跨平臺的（IE，FF，Chrome，Opera）。 我剛從這個代碼開始：

<script type="text/javascript"> 
    $('.historyText').live('input paste', function(e) { 

     var paste = e.clipboardData && e.clipboardData.getData ? 
     e.clipboardData.getData('text/plain') :    // Standard 
     window.clipboardData && window.clipboardData.getData ? 
     window.clipboardData.getData('Text') :     // MS 
     false; 

     alert(paste); 
    });</script> 

兩個window.clipboardData和e.clipboardData爲空器（Chrome，火狐）。

更新：用戶希望文章內容從其他瀏覽器窗口粘貼，和我需要的html標籤。

Answer 1

您將無法從單獨使用JavaScript剪貼板，這是它的方式應該是獲取數據。 TinyMCE的和CKEditor的方式當前版本做到這一點如下：

1. 使用按鍵事件處理
2. 在該處理程序檢測CTRL-V /班-INS事件，保存在當前用戶的選擇，加div元素離屏（左-1000px說吧）的文件中，移動插入符是DIV中，從而有效地重定向貼
3. 設置一個非常簡短的計時器（例如1毫秒）在事件處理程序調用另一個函數，它從div中檢索HTML內容並執行所需的任何處理，從文檔中移除div，恢復用戶選擇並插入處理的HTML。

請注意，這隻適用於鍵盤粘貼事件，不適用於上下文或編輯菜單中的粘貼。在粘貼事件觸發時，將脫字符重定向到div（至少在某些瀏覽器中）爲時已晚。

Answer 2

在Chrome中，我使用此代碼通過事件訪問clipboardData：

$(document).bind('paste', function(e) { 
    var clipboardData = e.originalEvent.clipboardData; 
}); 

Answer 3

其實我已經做了很多工作，這一點，只是寫了nice blog post描述我們如何在Lucidchart做了詳細（作爲免責聲明，我在Lucidchart工作）。我們有a JSFiddle，顯示覆制和粘貼（在Firefox，Safari，Chrome和IE9 +中測試）。

答案的缺點是您需要在系統粘貼事件期間獲取HTML。在大多數（非IE）瀏覽器，這可以通過如下面所示，簡單的事情要做：

document.addEventListener('paste', function(e) { 
    var html = e.clipboardData.getData('text/html'); 
    // Whatever you want to do with the html 
} 

問題是，當你想在IE HTML內容。無論出於何種原因，IE不會通過javascript訪問text/html剪貼板數據。你所要做的就是讓瀏覽器粘貼到一個可以理解的div上，然後在粘貼事件結束後得到html。

<div id="ie-clipboard-contenteditable" class="hidden" contenteditable="true"></div> 

var ieClipboardDiv = $('#ie-clipboard-contenteditable'); 

var focusIeClipboardDiv = function() { 
    ieClipboardDiv.focus(); 
    var range = document.createRange(); 
    range.selectNodeContents((ieClipboardDiv.get(0))); 
    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(range); 
}; 

document.addEventListener('beforepaste', function() { 
    if (hiddenInput.is(':focus')) { 
    focusIeClipboardDiv(); 
    } 
}, true); 

document.addEventListener('paste', function(e) { 
    ieClipboardDiv.empty(); 
    setTimeout(function() { 
    var html = ieClipboardDiv.html(); 
    // Do whatever you want with the html 
    ieClipboardDiv.empty(); 
    // Return focus here 
    }, 0); 
}