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({
   mode : "exact",
   elements : "content",
   skin : "o2k7",
   skin_variant : "silver",
   
   setup : function(ed) {
     ed.onInit.add(function(ed, evt) {
       var iframe = ed.getDoc();
         
       jQuery(iframe).bind('dragstart', function(event){
         event.originalEvent
              .dataTransfer
              .setData('text/plain', 'modified_content_from_iframe');
       });
     });
   },
      
});

jQuery(document).bind('dragstart', function(event){          event.originalEvent
         .dataTransfer
         .setData('text/html',  'my_data_html');
                                                             
    event.originalEvent
         .dataTransfer
         .setData('text/plain', 'my_data_plain');
});