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!
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With