JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.tinymce.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<table>
</tr>
    <tr>
        <td><textarea rows="10" cols="30" id="content">This is my rte content. You may drag it, but i am not able to modify the drag data onDraggesture. When draging from here to the textarea outside or inside this rte the drag content does not get changed. I really wonder why.</textarea></td><td>_</td>
        <td><textarea rows="10" cols="30" id="content2">Some text here.</textarea></td>
    </tr>
</table>
<br>
<p>This text may be dragged. But take care if you want to drag text from both paragraphs to the rte including the hr-tag!!!! It won't work! Why?</p>
<hr>
<p>This text may be dragged. But take care if you want to drag text from both paragraphs to the rte including the hr-tag!!!! It won't work! Why?</p>
<p><b>1.</b> Binding the handler to the iframes document works. I set the events data analog to the one on the main page, but it does not work. When i drag it inside the iframe or to the textarea on the main page 'modified_content' does not get inserted, but the original selected content. What can i do to set 'modified_content'?</p>
<p>
<b>2.</b> I tried to modify/set the data using the drop event in the iframe and the main page.
But i get a javascript error on both documents (main page and iframe) :  "Modifications are not allowed for this document". Why do i get this error? Is there a workaround for this? For testing you will need to uncomment one line of code from the javsascript window. Click run after you made your change.
</p>
<p><b>3.</b> When selecting `This text may be ... + hr + This text may be drag...` and dragging this into the contenteditable iframe (on the upper left) nothing gets inserted when i try to modify the drag data. Dragging into the textarea (on the upper right) works. Does anyone know what gets wrong here?</p>

JavaScript

tinyMCE.init({
   // General options
   mode : "exact",
   elements : "content",

   // Skin options
   skin : "o2k7",
   skin_variant : "silver",
   // defines handlers after the rte has been initialized
   setup : function(ed) {
     ed.onInit.add(function(ed, evt) {
         
       // catch event and try to set the drag data -> does not work
       jQuery(ed.getDoc()).bind('draggesture', function(event){
         window.console && console.log('draggesture', event, ed.getWin().getSelection().toString(), event.originalEvent.dataTransfer.getData('text/html') );
           
         window.console && console.log(event.originalEvent.dataTransfer.setData('text/html', 'modified_content_1'));
         event.originalEvent.dataTransfer.setData('text/plain', 'modified_content_2');
       });

       jQuery(ed.getDoc()).bind('drop', function(event){
           
// UNCOMMENTING this wil throw an ERROR onDrop - WHY  ?!?!?!?!?!?!?!?!?!?!?!?!?!?!?????  
//event.originalEvent.dataTransfer.setData('text/html',  'modified_content');
           
         window.console && console.log('text/html',  event.originalEvent.dataTransfer.getData('text/html') );
         window.console && console.log('text/plain',  event.originalEvent.dataTransfer.getData('text/plain') );
         /*console.log('text/xml',  event.originalEvent.dataTransfer.getData('text/xml') );
         console.log('text/uri-list', event.originalEvent.dataTransfer.getData('text/uri-list') );
         console.log('text/image/png',event.originalEvent.dataTransfer.getData('text/image/png')   );
         console.log('application/x-moz-file', event.originalEvent.dataTransfer.getData('application/x-moz-file') );
         console.log('application/x-moz-node', event.originalEvent.dataTransfer.getData('application/x-moz-node') );*/
       });
     });
   },
      
});
           
           //main page: catch event and try to set the drag data
jQuery(document).bind('draggesture', function(event){                    
   ...