TinyMCE change事件正常触发但隐藏textarea未同步问题咨询

我来帮你搞定这个同步问题，之前在处理多实例TinyMCE的时候也碰到过类似的情况，咱们一步步排查修复：

可能的原因及解决方案 #

1. 调整保存逻辑的执行顺序与手动同步 #

有时候editor.save()和全局的tinymce.triggerSave()配合时，可能因为时机问题导致同步失效。可以尝试在事件中先确保当前编辑器的内容同步到对应textarea，再触发全局保存，甚至添加手动同步的兜底逻辑：

tinymce.init({
  selector: this.selector,
  setup: (editor) => { // 改用箭头函数适配TypeScript的this指向
    editor.on('change blur', () => {
      // 1. 让当前编辑器先保存到关联的textarea
      editor.save();
      
      // 2. 手动同步作为兜底（如果editor.save()失效时生效）
      const targetTextarea = document.querySelector(editor.settings.selector) as HTMLTextAreaElement;
      if (targetTextarea) {
        targetTextarea.value = editor.getContent();
      }
      
      // 3. 触发全局保存（确保所有编辑器实例都同步）
      tinymce.triggerSave();
      
      console.info(`tinyMCE change event fired for editor: ${editor.settings.selector}`);
    });
  },
  branding: this.branding,
  menubar: this.menubarFlag,
  browser_spellcheck: this.browser_spellcheck,
  fontsize_formats: this.fontsize_formats,
  block_formats: this.block_formats,
  // 你的toolbar及其他配置...
});

2. 检查TypeScript中的this指向问题 #

你原来的setup用了普通function(editor)，在TypeScript环境下，这个函数内部的this可能不会指向你的组件实例，改用箭头函数可以避免这个潜在问题，确保this.selector等配置始终正确。

3. 排查是否有外部代码干扰 #

• 检查是否有其他脚本或框架（比如Angular/Vue/React的双向绑定）在修改textarea的值，覆盖了TinyMCE的同步结果。如果是框架项目，建议将编辑器内容同步到组件的状态变量，再由状态变量绑定到textarea，而不是直接依赖TinyMCE的自动同步。
• 确认textarea的name属性是否正确设置，TinyMCE的自动同步有时候会依赖这个属性来定位目标元素。

4. 验证单个编辑器实例的同步情况 #

在控制台日志中加上编辑器的selector标识（如上面代码所示），这样可以确定是所有编辑器都同步失败，还是特定几个出问题，方便定位是否是选择器配置错误。

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