preventDefault 后如何创建粘贴事件？答案

【问题标题】：How to create a paste event after preventDefault?preventDefault 后如何创建粘贴事件？
【发布时间】：2018-01-01 18:52:06
【问题描述】：

我正在使用 angular 4 并尝试使用 contenteditable

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

我需要检测粘贴事件，然后处理数据以删除除粗体、斜体和 para 之外的所有内联 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();
}

我可以操作 pasteedData 但无法启动粘贴行为。使用 preventDefault 和 stopPropagation 我可以停止粘贴的默认行为，并且使用 getData 我可以从剪贴板中提取数据。但是现在我被困在这里，我无法启动粘贴事件。在文档中，据说我们需要创建一个自定义事件，例如 pasteClipboardData(newData)。但我可以找到有关如何创建此类事件的任何参考。

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

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

pasteClipboardData(newData);

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

【问题讨论】：

您可以使用new ClipboardEvent() (spec) 创建一个（不受信任的）粘贴事件，然后使用dispatchEvent 在原始事件的目标上触发它
我已经试过了..它不起作用
可能是因为这是一个不受信任的事件。那么你将不得不从另一个角度来解决你的问题。 MutationObservers 是处理contenteditable 元素的有效方式。

标签： javascript html angular paste w3c

【解决方案1】：

您不需要调度另一个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>