For copying data to clipboard in javascript Clipboard API (clipboard.write()) should be used instead of deprecated Document.execCommand('copy').
I want to copy rtf to clipboard, which seems not supported by clipboard.write() till now in Microsoft Edge Version 98.0.1108.62:
Uncaught (in promise) DOMException: Type text/rtf not supported on write.
So I tried using the deprecated execCommand('copy') command, where I can copy to clipboard, but it is not possible to paste the RTF-content for example in Microsoft Word or another RTF-editor. I tried with text/rtf and application/rtf.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
document.querySelector('button').onclick = (e) => {
const rtf = '{\\rtf1\\ansi\\deff0' +
'\\trowd' +
'\\cellx1000' +
'\\cellx2000' +
'\\cellx3000' +
'\\intbl cell 1\\cell' +
'\\intbl cell 2\\cell' +
'\\intbl cell 3\\cell' +
'\\row' +
'}'
document.oncopy = e => {
e.preventDefault();
const clipboardData = e.clipboardData;
clipboardData.setData('application/rtf', rtf);
}
document.execCommand('copy');
document.oncopy = null;
};
document.querySelector('div[contenteditable]').onpaste = e => {
e.preventDefault();
const clipboardData = e.clipboardData;
console.log('retrieved "%s"', clipboardData.getData('application/rtf'));
};
};
</script>
</head>
<body>
<button>copy to clipboard</button>
<div contenteditable>paste here</div>
</body>
</html>
See also, there is only a solution for html but not rtf.
With text/html and with html-content there are some layout issues with a table, so I really have to use rtf instead of html.