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

Question

我正在尝试对contentEditable div中的文本进行过滤。也就是说，代码应该类似以下内容：

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

理想情况下，我希望能够遍历粘贴的文本，并以适合网站的方式重新格式化它，但我不知道如何做到这一点。

另外，我可以将其作为纯文本粘贴（而不是HTML），但我也不知道如何做到这一点。

我稍微不太喜欢使用一个弹出框和文本区域的解决方案，要求用户将文本粘贴到此文本区域中，然后将文本放置在先前光标位置的内容中。我知道如何做到这一点，但希望避免使用这种方式。

我完全不喜欢仅仅通过使用 e.preventDefault() 来阻止用户粘贴。

- Deets McGeets

---

可能是重复的问题：JavaScript获取剪贴板数据的粘贴事件（跨浏览器）。 - Dave Jarvis

Answer 1

我使用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);  
}

- Etienne Martin

---

但是它会闪烁。一开始，原始粘贴内容会显示出来，直到被清理干净。你可以将文本颜色设置为“透明”，然后进行清理，最后再删除该样式。 - vsync

Answer 2

在大多数浏览器中，没有直接的方法可以访问粘贴到DOM之前的内容。然而，有一种相当复杂的方法可以做到这一点，但仅适用于由键盘触发的粘贴操作。请参见我在此处的答案：

JavaScript获取粘贴事件（跨浏览器）中的剪贴板数据

- Tim Down

Answer 3

在内容进入字段后，您不能以某种方式验证内容吗？让内容粘贴进去，先保存原始内容，如果新内容无效，则将其替换回旧内容。这只是一种理论，但现在我也必须进行实验。

- Daniel

---

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