Question

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

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

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

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

pasteClipboardData（newData）;

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

Answer 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>

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

1 个答案: