Angular contenteditable div 限制粘贴内容

Question

是否可以限制内容可编辑 div 的输入？ 我尝试编写自己的 WYSIWYG 编辑器，应该无法从其他网站粘贴内容并采用这种风格。

所以至少与我将其粘贴到文本区域的效果相同。

是否有任何内置解决方案或者我需要通过事件来实现它？ 如果是，那怎么可能？

Answer 1

我想到了。 我在操作后捕获了该值并插入了它：

html：

<div contenteditable (paste)="onPaste($event)" (input)="onInput($event)"></div>

typescript：

onPaste(e) {
  // Stop data actually being pasted into div
  e.preventDefault();

  // Get pasted data via clipboard API
  const clipboardData = e.clipboardData;
  const pastedText = clipboardData.getData('text');

  // Insert the value on cursor position
  window.document.execCommand('insertText', false, pastedText);
}