3

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.

Marcos Dimitrio
  • 6,651
  • 5
  • 38
  • 62
Norbert Pálfi
  • 31
  • 1
  • 5
  • If I'm not wrong, there is no way to take anything by browser (unless it's a browser plugin) from client's clipboard because it is private and it would be insecure. – Zydnar Apr 28 '17 at 10:58
  • However if you know what exactly is beeing copied, you can store this value, and manipulate it. – Zydnar Apr 28 '17 at 11:04
  • Have you tried this? http://stackoverflow.com/questions/6413036/get-current-clipboard-content/6413100#6413100 The solution doesn't seem to be deprecated but will cause some security prompts on some browsers according to http://caniuse.com/#search=clipboardData – Zze Apr 28 '17 at 12:04

0 Answers0