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

我已经能够通过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);  
}

Answer 3

如果内容已经在该字段中，您是否可以验证一些内容？让内容粘贴，首先保存原始内容，如果新内容无效，请将其替换为旧内容。这只是一个理论，但我现在只需要进行实验。

使用contentEditable div中的jquery清理粘贴事件

3 个答案: