I have a div:

<div class="paste-area-content"
  #pasteDiv contenteditable="true" 
  (paste)="onPaste($event)"
  (input)="unsupportedBrowserPaste()">
</div>

If the focus is on it and I press Ctrl+V, then call the onPaste function with a ClipboardEvent and etc., the picture from the clipboard appears in the div.

Now I'd like to use a <button> to do the same process. So I thought I'd simulate the keypress when the button is clicked, and send the KeyboardEvent to the div.

I tried a lot of similar solutions but none of them worked or they are just deprecated. The last try was:

var event = new KeyboardEvent('keypress', {
  bubbles: true,
  cancelable: true,
  ctrlKey: true,
  key : "v",
  code : "86"
});
this.printedArticleImagePasteComponent.simulatePaste(event);

public simulatePaste(event: KeyboardEvent) {
  this.pasteDiv.nativeElement.dispatchEvent(event);
}

It doesn't work of course. How is it possible to solve this?

The second idea was: get the picture from the clipboard, create a ClipboardEvent manually, set the ClipboardEvent.clipboardData.items. But window.clipboardData.getData doesn't work.