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

Question

我正在尝试对

contentEditable

div 中的粘贴进行消毒。也就是说，代码应如下所示：

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

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

或者，我可以轻松地粘贴为纯文本（而不是 HTML），但我也不知道如何执行此操作。

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

而且我对仅仅阻止用户使用

e.preventDefault()

进行粘贴感到非常不舒服。

Answer 1

大多数浏览器没有直接的方法来访问在进入 DOM 之前粘贴的内容。然而，有一种相当复杂的方法可以做到这一点，该方法仅适用于由键盘触发的粘贴。在这里查看我的回答：

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

Answer 2

我已经能够使用范围广泛的 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

一旦内容已经在现场，您是否可以不以某种方式验证内容？让内容粘贴进去，先保存原来的内容，如果新的内容无效，就用旧的内容替换回去。这只是一个理论，但我现在也必须进行实验。

Answer 4

很抱歉回复得太晚了，但这是您可以最接近地清理用户输入的信息。

const sanitize = (input = '') => {
    input = input.replace(/</g, '&lt;');
    input = input.replace(/>/g, '&gt;');
    input = input.replace(/"/, '&quot;');
    return input;
  };
  let observer = new MutationObserver(mutations => {
     mutations.forEach(mutation => {
       if (mutation.target.childNodes) {
         for (let node in mutation.target.childNodes) {
           mutation.target.childNodes[node].outerHTML = sanitize(mutation.target.childNodes[node].outerHTML);
        }
      }    
    });
  });
  
  let element = document.querySelector("[contenteditable]");
  
  
  observer.observe(element, {
     childList: true,
     subtree: true,
     characterData: true,
  });

<div contenteditable>
  enter content to be sanitized
</div>