Angular contenteditable div 限制粘贴的内容

【问题标题】：Angular contenteditable div restrict pasted contentAngular contenteditable div 限制粘贴的内容
【发布时间】：2020-07-03 16:35:58
【问题描述】：

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

所以至少和我将它粘贴到文本区域的效果一样。

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

【问题讨论】：

标签： javascript html angular typescript wysiwyg

【解决方案1】：

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

html:

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

打字稿：

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

【讨论】：