在contentEditable div中使用jquery消毒粘貼事件

Question

我試圖在contentEditable div中消毒粘貼。也就是說，代碼看起來應該像下面這樣：

$('#content').bind('paste',function(e) 
{ 
    // Ensure pasted markup is valid 
}); 

理想情況下，我就可以通過粘貼的文本並重新格式化的方式，適合於現場分析，但我不」不知道該怎麼做。

另外，我會很舒服地粘貼爲純文本（而不是HTML），但我不知道如何做到這一點。

我對使用textarea彈出框的解決方案略微不太舒服，要求用戶粘貼到該文本區域，然後將文本放入前一個光標位置的內容。我知道如何做到這一點，但想避免它。

而我完全不舒服，只是通過使用e.preventDefault()阻止用戶粘貼。

在此先感謝。

Answer 1

大多數瀏覽器沒有直接訪問在進入DOM之前粘貼的內容。然而，這是一種相當複雜的方式，只適用於鍵盤觸發的粘貼。見我的答案在這裏：

JavaScript get clipboard data on paste event (Cross browser)

Answer 2

一旦它已經在該領域的一些你怎麼能不驗證內容？讓內容粘貼，首先保存原始內容，如果新內容無效，則將其替換爲舊的內容。這只是一個理論，但我現在只需要嘗試一下。

Answer 3

我已經能夠實現這與rangy JavaScript庫允許我保存和恢復內容消毒後插針位置。

https://github.com/timdown/rangy

測試在Chrome和Safari。

$("#content").on('paste', function(){ 
    sanitize(); 
}); 

function sanitize(){ 
    setTimeout(function(){ 

     var savedSelection = rangy.saveSelection(); 

     $("#content *").removeAttr("style"); // Do your parsing here. 

     rangy.restoreSelection(savedSelection);   

    }, 0); 
} 

的