TinyMCE setContent仅直接点击生效，window.load触发点击失效原因及解决方法

以下代码单独绑定点击事件时可正常运行：

$('.atitle').on('click', function(){
    console.log('323');    
    tinymce.get("ed").setContent("<p>lorem ipsum</p>");  // works
});

但在window.load或document.ready中主动触发点击事件时，控制台输出323但编辑器内容为空：

$(window).on('load', function(){
   $('.atitle').eq(0).click();
  // console is written '323' but editor is empty
});

问题原因 #

• window.load仅保证页面DOM和静态资源加载完成，但TinyMCE编辑器的初始化是异步过程，可能滞后于window.load事件触发时机。
• 此时tinymce.get("ed")能拿到编辑器实例，但编辑器内部的DOM渲染、状态初始化还未完成，调用setContent无法将内容写入编辑器。
• 控制台能输出323是因为点击事件本身被正常触发，和编辑器初始化状态无关。

解决方法 #

方法1：利用TinyMCE的初始化回调（推荐） #

在TinyMCE的初始化配置中，使用init_instance_callback钩子，等编辑器完全初始化后再执行操作：

tinymce.init({
  selector: '#ed',
  init_instance_callback: function(editor) {
    // 编辑器初始化完成后触发点击事件
    $('.atitle').eq(0).click();
    // 或者直接跳过点击事件，直接设置内容
    // editor.setContent("<p>lorem ipsum</p>");
  }
});

方法2：延迟触发点击事件 #

如果无法修改TinyMCE的初始化代码，可以通过setTimeout给编辑器留足初始化时间（时间可根据实际场景调整）：

$(window).on('load', function(){
   setTimeout(function(){
       $('.atitle').eq(0).click();
   }, 500); // 延迟500毫秒，确保编辑器初始化完成
});

方法3：直接调用setContent（最简方案） #

如果最终目的只是设置编辑器内容，无需通过点击事件中转，直接在编辑器初始化完成后调用setContent：

tinymce.init({
  selector: '#ed',
  init_instance_callback: function(editor) {
    editor.setContent("<p>lorem ipsum</p>");
  }
});

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