Copy rtf (Rich text format) to clipboard in javascript

Question

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.

Copy rtf (Rich text format) to clipboard in javascript

0 Answers0