How to paste rich text from clipboard to HTML textarea element?

Question

When copy-pasting from a web-browser to a text-processor, the HTML-markup is converted into rich text and the text-processor tries to convert the markup into it's own format. This proves that the Clipboard is able to hold markup.

When copy-pasting between browser-windows (into a normal <textarea> or other element), then the markup is ignored, even though the markup exists in the clipboard.

Maybe there is a solution that makes the browser pick the rich text format from the clipboard.

Is there a way to access the rich text of the clipboard in an <textarea> element?

In other words,

Can the markup that has to be somewhere in the clipboard (because the clipboard does not know yet whether the user pastes into a text-processor or a web-browser) be pasted as-is into a HTTP POST variable?

Answer 1

I have been working on a similar problem: how to access the rich text formatting tags when pasting into the browser from a desktop application. I have found the following articles and have a solution that may solve your problem, though at the time of this writing it hasn't solved my own.

1. https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

2. JavaScript get clipboard data on paste event (Cross browser)

If all you are looking for is the formatted html (a result of the browser having parsed the rich text for you), the answer is to access the clipboardData object and pass it the 'html' parameter instead of the 'text' parameter. see example below (just paste the following into a file called index.html and run it locally):

<div id="target" contenteditable="true"></div>  <script>     document.addEventListener('paste', function(e) {         e.preventDefault();                  var pastedText = ''          if (window.clipboardData && window.clipboardData.getData) { // IE              pastedText = window.clipboardData.getData('Text');          } else if (e.clipboardData && e.clipboardData.getData) {              pastedText = e.clipboardData.getData('text/html');          }          document.getElementById('target').innerHTML = pastedText     }); </script> 

The above example splits out two versions of clipboardData.getData(), one for IE and one for every other browser. The rough process is: first catch the paste event, then preventdefault, then get the clipboard data as html, then place it into the div. The content of this example is entirely stolen from the two links above, but simplified to exclude the extra things I didn't need (ie: hidden inputs to manage the browser's focus and suport for 'copy' and 'cut' events). Full credit should go to the authors of those articles.

In my experience (using mac and chrome) pasting formatted text (even with obscure formats like strikethrough and indent) into the #target div will keep the original formatting fairly well. Good Luck!

Now, if anyone can tel me how to get the actual rich text formatting tags from the clipboardData, please feel free to answer this question. Thanks!