僅將純文本粘貼到可編輯的div中

Question

我需要能夠允許用戶粘貼到可編輯的div（通過用戶選擇的任何東西：右鍵單擊並粘貼，快捷鍵等），但我想丟棄格式並只采用純文本。

我不能使用textarea，因為如果由用戶啟動的事件應用，div將允許基本格式（粗體和斜體）。

onbeforepaste事件看起來很有希望，但根據quirksmode，支持是如此有限，以至於無法使用。

tyia任何建議

Answer 1

對於Ctrl + v，我檢查了keyup上可編輯div的內容。 您可以修改該事件中的內容。 我正在使用nicedit文本編輯器。 這對於右鍵單擊 - 粘貼的粘貼不起作用。 對於'粘貼'，我必須使用settimeout修改內容。

.addEvent('paste', function(e) {
        setTimeout(function(){
            if(condition){
                //modify content
            }
        },350);
    });

Answer 2

它也可以通過使用javaScript進行攻擊。 希望這可以幫助

我在這里創建了一個例子

<div contentEditable="true" id="clean-text-div"> </div>
<div id="clean-btn"> Clean Me</div>
<div id="message"> paste html content and clean background HTML for pure text</div>


$("#clean-btn").click(function(){
    $("#clean-text-div").text($("#clean-text-div").text());
    $("#message").text("Your text is now clean");
});

Answer 3

這很棘手，但並非不可能。 您可以做的是非常復雜，並且可以在Firefox 2 +，IE 5.5+和最近的WebKit瀏覽器（如Safari 4或Chrome）（舊版本未經測試）中使用。 TinyMCE和CKEditor的最新版本在基於iframe的編輯器上使用此技術：

1. 使用按鍵事件處理程序檢測ctrl-v / shift-ins事件
2. 在該處理程序中，保存當前用戶選擇，在屏幕外添加一個textarea元素（比如左邊-1000px），關閉contentEditable並在textarea上調用focus（），從而移動插入符並有效地重定向粘貼
3. 在事件處理程序中設置一個非常簡短的計時器（比如說1毫秒），調用另一個存儲textarea值的函數，從文檔中刪除textarea，重新打開contentEditable，恢復用戶選擇並粘貼文本。

請注意，這僅適用於鍵盤粘貼事件，而不適用於上下文或編輯菜單中的粘貼。 paste事件會更好，但是當它觸發時，將插入符重定向到textarea（至少在某些瀏覽器中）為時已晚。

Answer 4

您是否嘗試過“粘貼”或“輸入”等事件？ 然后你可以使用正則表達式來跳轉所有的html標簽

$(document).bind('paste', function(e){ alert('pasting!') })

http://www.hscripts.com/scripts/JavaScript/remove-html-tag.php

有關粘貼事件的討論，您還應該閱讀：
抓住粘貼輸入