Google WebApp中TinyMCE行内编辑器加载的HTML标记首次提交表单无法保存问题

问题核心原因 #

1. 你给隐藏input赋值用了innerHTML属性，属于用法错误：input是表单元素，提交时读取的是value属性，innerHTML对表单输入元素无效，你在开发者工具看到的内容不会被表单提交逻辑识别。
2. 直接修改编辑器DOM的innerHTML、直接修改隐藏input的值，都不会更新TinyMCE内部维护的内容状态，默认只有编辑器被手动激活、触发内容变更事件时，才会自动执行内容同步到隐藏表单的逻辑，这就是你首次提交失败、第二次激活后提交成功的原因。
3. 你原有代码里的遍历条件i < x.length-1会漏掉最后一个编辑器实例，属于隐形逻辑错误。

修正方案 #

直接调用TinyMCE官方提供的内容操作API，赋值后强制同步到关联表单元素即可，修改后的代码如下：

window.addEventListener('load', (event) => {
  const editDivs = document.querySelectorAll(".divEdit");
  // 修正遍历范围，避免漏掉最后一个编辑器
  for (let i = 0; i < editDivs.length; i++) {
    const tid = editDivs[i].id;
    const hid = "h" + tid;
    const htm = document.getElementById(hid).value;
    const editor = tinymce.get(tid);
    // 确保TinyMCE实例已加载完成再操作
    if (editor) {
      // 官方API设置内容，自动更新编辑器内部状态、DOM展示
      editor.setContent(htm);
      // 强制同步内容到TinyMCE自动生成的隐藏表单元素
      editor.save();
    }
  }
});

额外保险配置 #

如果担心用户未激活编辑器就提交，可在表单提交前主动触发一次全量同步，添加以下代码即可：

// 把#formId替换为你实际的表单ID
document.querySelector('#formId').addEventListener('submit', () => {
  // 遍历所有TinyMCE实例，强制同步内容到关联表单
  tinymce.get().forEach(editor => editor.save());
});

内容的提问来源于stack exchange，提问作者DougMS