HTML markup loaded into tinymce not saving when form submitted

Question

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 in the loop to save the html markup to the Div: tinymce.get(tid).getBody().innerHTML = htm; while this worked, tinymce did not then take care of saving the markup from the editor Div to its hidden input.

Basically, tinymce appears not to engage (initialize?) with the imported content until an editor instance is activated manually. I tried initializing tinymce on load, which did activate all instances of the editor interfaces, but still did not capture the html markup upon the first submit of the form , at least the way I attempted. This is a problem because non-html elements in the form may be edited, while all the html elements remain untouched.

What do I need to do differently? Thanks so much for any insights.

Answer 1

After additional experimentation, the javascript solution is as follows:

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();

}