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

jgovgodb  于 12个月前  发布在  jQuery
关注(0)|答案(4)|浏览(109)

我正在尝试清理contentEditable div中的粘贴。也就是说,代码应该类似于以下内容:

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

字符串
理想情况下,我将能够解析粘贴的文本,并以适合网站的方式重新格式化它,但我不知道如何做到这一点。
或者,我会舒适地粘贴为纯文本(而不是HTML),但我也不知道如何做到这一点。
我对弹出一个带有文本区域的框的解决方案有点不舒服,要求用户粘贴到这个文本区域,然后将文本放入前一个光标位置的内容中。我知道如何做到这一点,但想避免它。
而且我完全不舒服,只是防止用户通过使用e.preventDefault()粘贴。

wkftcu5l

wkftcu5l1#

在大多数浏览器中,没有直接的方法可以在内容进入DOM之前访问粘贴的内容。然而,有一种相当复杂的方法可以做到这一点,它只适用于键盘触发的粘贴。请参阅我的答案:
JavaScript在粘贴事件中获取剪贴板数据(跨浏览器)

omqzjyyz

omqzjyyz2#

我已经能够实现这一点与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);  
}

字符串

qpgpyjmq

qpgpyjmq3#

你不能验证内容一旦它已经在外地一些如何?让内容粘贴,保存原始内容第一,如果新的内容是无效的,替换它回与旧的.这只是一个理论,但我只是要去实验太现在.

elcex8rz

elcex8rz4#

很抱歉的非常晚的React,但这是最接近你可以得到净化用户输入。

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,
  });

个字符

相关问题