HTML markup loaded into tinymce not saving when form submitted

0
votes

In a Google webapp, HTML markup from spreadsheet that is loaded into tinymce inline editor for editing appears correct, but does not save when form is submitted.

I'm loading the markup into a hidden textarea and then inserting that content into the DIVs (class="divEdit") I've set up for the tinymce inline editor. (If I put markup text directly in the DIV, it is held as literal text rather than as interpreted html). I save the same content to the innerHTML of the hidden input element that tinymce creates for the editor input-- the ID of the div is used by tinymce as the NAME for the hidden input element.

Here is the javascript code:

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.

This all looks good when viewed in developer tools : screen capture from browser in developer tools, shows markup in Div and hidden input element

But when the form is saved, none of the content in the tinymce editor is saved-- HOWEVER, if I don't clear the form, but instead re-submit the form a second time, then the markup is correctly saved!

I also tried to use a tinymce method to save to the hidden input element-- instead of tEle.innerHTML = htm; in the loop, I tried this: tinymce.get(tEle).getBody().innerHTML = htm;

But that did not work (it appears to save markup for the first .divEdit DIV, but none after that).

What is happening that tinymce content is not submitted the first time even though looks correct in the page, but then is submitted correctly if the form is not reset and is resubmitted? What do I need to do differently? Thanks so much for any insights.

javascripttinymcetinymce-5