在 contentEditable div 中使用 jQuery 清理粘贴事件答案

【问题标题】：Sanitizing paste event using jQuery in contentEditable div在 contentEditable div 中使用 jQuery 清理粘贴事件
【发布时间】：2011-09-21 22:21:46
【问题描述】：

我正在尝试清理 contentEditable div 中的粘贴。也就是说，代码应该如下所示：

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

理想情况下，我可以解析粘贴的文本并以适合网站的方式重新格式化，但我不知道该怎么做。

或者，我会很乐意粘贴为纯文本（而不是 HTML），但我也不知道该怎么做。

我对弹出一个带有文本区域的框的解决方案不太满意，要求用户粘贴到此文本区域，然后将文本放入前一个光标位置的内容中。我知道该怎么做，但想避免它。

而且我完全不喜欢使用e.preventDefault() 阻止用户粘贴。

【问题讨论】：

JavaScript get clipboard data on paste event (Cross browser)的可能重复

标签： javascript jquery copy-paste contenteditable jquery-events

【解决方案1】：

在大多数浏览器中没有直接的方法来访问粘贴到 DOM 中的内容。但是，有一种相当复杂的方法可以做到这一点，它只适用于由键盘触发的粘贴。在这里查看我的答案：

JavaScript get clipboard data on paste event (Cross browser)

【讨论】：

【解决方案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);  
}

【讨论】：

但它会闪烁。最初的糊状物会暂时可见，直到它被消毒。您可以将文本颜色设置为transparent，然后进行清理，然后删除该样式。

【解决方案3】：

一旦内容已经在现场，您就不能验证内容吗？让内容粘贴进去，先保存原始内容，如果新内容无效，则将其替换为旧内容。这只是一个理论，但我现在也必须进行实验。

【讨论】：

您可以随时在问题下方发表您的猜测/理论作为评论。