En una aplicación web de Google, el marcado HTML de la hoja de cálculo que se carga en el editor en línea de tinymce para su edición parece correcto, pero no se guarda cuando se envía el formulario.
Estoy cargando el marcado en un área de texto oculta y luego insertando ese contenido en los DIV (class="divEdit") que configuré para el editor en línea tinymce. ( Si pongo el texto de marcado directamente en el DIV, se mantiene como texto literal en lugar de como html interpretado ). Guardo el mismo contenido en el código HTML interno del elemento de entrada oculto que tinymce crea para la entrada del editor: tinymce usa el ID del div como el NOMBRE del elemento de entrada oculto.
Aquí está el código javascript:
window.addEventListener('load', (event) =>{ var x, i; x = document.querySelectorAll(".divEdit"); for (i = 0; i < x.length-1; i++) { var tid=x[i].id; //get ID of each DIV which also is NAME of associated tinymce hidden input var hid="h"+tid; //ID of my hidden textarea paired with the DIV var htm=document.getElementById(hid).value; //hidden textarea holding HTML markup document.getElementById(tid).innerHTML=htm; //set DIV innerHTML as the html markup var tEle=document.getElementsByName(tid)[0]; //the hidden input element created by tinymce //method A -- appears to work, but content not saved on form submit: tEle.innerHTML = htm; //set hidden input value as the html markup to be edited.Todo esto se ve bien cuando se ve en las herramientas de desarrollo: captura de pantalla del navegador en las herramientas de desarrollo, muestra el marcado en Div y el elemento de entrada oculto
Pero cuando se guarda el formulario, no se guarda nada del contenido en el editor de tinymce. SIN EMBARGO, si no borro el formulario, sino que lo vuelvo a enviar por segunda vez, ¡entonces el marcado se guarda correctamente!
También traté de usar un método tinymce en el ciclo para guardar el marcado html en el Div: tinymce.get(tid).getBody().innerHTML = htm ; mientras esto funcionó, tinymce no se encargó de guardar el marcado del editor Div en su entrada oculta.
Básicamente, tinymce parece no interactuar (¿inicializarse?) con el contenido importado hasta que se activa manualmente una instancia del editor. Intenté inicializar tinymce en la carga, lo que activó todas las instancias de las interfaces del editor, pero aún así no capturó el marcado html en el primer envío del formulario, al menos de la forma en que lo intenté. Esto es un problema porque los elementos que no son html en el formulario pueden editarse, mientras que todos los elementos html permanecen intactos.
¿Qué necesito hacer diferente? Muchas gracias por cualquier idea.
Después de experimentación adicional, la solución de javascript es la siguiente:
window.addEventListener('load', (event) =>{ var x, i; x = document.querySelectorAll(".divEdit"); for (i = 0; i < x.length-1; i++) { var tid=x[i].id; var hid="h"+tid; var htm=document.getElementById(hid).value; tinymce.get(tid).getBody().innerHTML = htm; } tinymce.triggerSave(); }