Angular contenteditable div 限制粘贴内容

Question

Is it possible to restrict the input of a contenteditable div? I try to write my own WYSIWYG Editor and it should not be possible to paste content from another website and to adopt the style.

So at least the same effect as I would paste it to a textarea.

Is there any inbuild solution or do I need to implement it by an Event? If yes how is that possible?

Answer 1

I figured it out. I caught the value and inserted it after I manipulating it:

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