Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Copying custom json object to clipboard with javascript

I'm developing a shared canvas using HTML5 + javascript. I am developing copying/pasting functionality, and I have no problems to do it with Ctrl+C, +X, +V, but I also would like to add the typical buttons that provide the same functionality (mainly intended to be able to copy/paste in tablets).

The code to manage the standard events is quite straigtforward:

window.addEventListener("copy", copyFunc);

...

copyFunc(e){
  if (BDKanvasInstance.selection !== null){
    var data = BDKanvasInstance.selection.serialize();
    var jsonData = JSON.stringify(data);
    e.clipboardData.setData('application/json', jsonData);
    e.preventDefault();
  }
}

But I have to way to access the clipboardData from a button...

copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e){
  /* Any way to access clipboardData or to trigger the standard copy command? */
}

I've seen several solutions involving creating a textarea, inserting the text, selecting it programmatically and using "execCommand('copy')", but that does not copy the text with an "application/json" type...

Any solutions? With a computer using keyboard shortcuts is ok, but they are not a solution when using it on the tablet...

Thank you!

like image 249
Jorge García Avatar asked Apr 22 '26 03:04

Jorge García


1 Answers

Everything is done on the same page, so I've done:

window.addEventListener("copy", copyFunc);

...

copyFunc(e){
  if (BDKanvasInstance.selection !== null){
    var data = BDKanvasInstance.selection.serialize();
    if (e && e.clipboardData)
    {
      var jsonData = JSON.stringify(data);
      e.clipboardData.setData('application/json', jsonData);
      e.preventDefault();
    } else {
      internalClipboard = data;
    }
  }
}

copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e){
  copyFunc(null);
}

And similar with the three actions (copy/cut/paste). The buttons call the functions from their handlers, with a null argument. There is a "clipboard" for the buttons, and another one for the shortcuts. Dirty, but may do the trick...

Thank you!

like image 149
Jorge García Avatar answered Apr 23 '26 16:04

Jorge García



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!