如何在preventDefault之后创建粘贴事件？

我使用的角度4，并试图在CONTENTEDITABLE如何在preventDefault之后创建粘贴事件？

<div contenteditable='true' id='editor' [innerHtml]='data'></div>

我需要检测膏事件，然后操纵数据删除所有的内联CSS和HTML标签比其他加粗，斜体，和对一起工作然后将其作为普通文本粘贴。

我已经成功地通过

document.getElementById('editor').addEventListener('paste', handlePaste); 
function handlePaste(e) { 
    var clipboardData, pastedData; 
    // Stop data actually being pasted into div 
    clipboardData = e.clipboardData; 
    pastedData = clipboardData.getData('text/html'); 
    e.stopPropagation(); 
    e.preventDefault(); 
}

我能够操纵pastedData但不能够启动粘贴行为检测粘贴事件。使用preventDefault和stopPropagation我能够停止粘贴的默认行为，也使用getData我能够从剪贴板中提取数据。但现在我卡在这里，我无法启动粘贴事件。在文档中，据说我们需要创建一个自定义事件，如pasteClipboardData（newData）。但我可以找到任何有关如何创建此类事件的参考。

//由于我们取消粘贴操作，我们需要手动

//将数据粘贴到文档中。

pasteClipboardData（newData）;

https://w3c.github.io/clipboard-apis/#override-paste

来源

2017-10-09 Arghya Saha

你可以用'new ClipboardEvent（）'（[spec]（https://www.w3.org/TR/clipboard-apis/#dom-clipboardevent-clipboardevent））创建一个（不可信）的粘贴事件，然后用'dispatchEvent'在原始事件的目标中触发它＃ – Touffy

我已经尝试过了..它不起作用 –

也许是因为它是一个不可信的事件。那么你必须从另一个角度来处理你的问题。 [MutationObservers]（https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver）是处理'contenteditable'元素的有效方法。 – Touffy

你不需要派遣另一paste事件。只需将你想要的内容插入contenteditable即可。

下面是一个使用document.execCommand("insertHTML", ...)一个例子 - 见其他问题（如this one），使其工作在IE：

window.onload = function() { 
 
    document.addEventListener('paste', function(e){ 
 
    console.log("paste handler"); 
 
    var s = e.clipboardData.getData('text/html').replace("this", "that") 
 
    document.execCommand("insertHTML", false, s); 
 
    e.preventDefault(); 
 
    }); 
 
}

<html> 
 
<p>1) copy <b>this</b> text</p> 
 
<div contenteditable id="target"> 
 
    <p>2) paste it here: ... ('this' should be replaced by 'that')</p> 
 
</div>

如何在preventDefault之后创建粘贴事件？

回答

相关问题