JSFiddle - React, Tailwind, and code Playground

Editor de HTML en un div. Un editor de HTML en un div, y como al submitir el formulario, no se detectaría como control y no se enviaría al servidor, se añade un textarea (o input) que estaría oculto y que se va rellenando con los cambios del editor HTML, y al submitir, recogeríamos los datos del input oculto.

by Yolanda Robles

HTML

<div id="visible" 
      class="HTML" 
      contenteditable="true" onChange='someFunction();'>
        
          <table><tr><td>hola</td></tr></table>
</div>
<p/>
<textarea id="oculto" style="width:300px;height:300px;">
</textarea>

JavaScript

$('.HTML').each(function(){
    
    this.contentEditable = true;
    
    this.addEventListener("input", function(){listener(this)}, false);
    this.addEventListener("DOMNodeInserted", function(){listener(this)}, false);
    this.addEventListener("DOMNodeRemoved", function(){listener(this)}, false);
    this.addEventListener("DOMCharacterDataModified", function(){listener(this)}, false);
        
    
});


var log = document.getElementById("oculto");

function listener(cntrl) {
    log.value = cntrl.innerHTML + "\n";
}