You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在WordPress所有TinyMCE编辑器初始化后执行回调设置内容?

解决WordPress中TinyMCE编辑器初始化完成后设置内容的问题

这个情况我太熟悉了!TinyMCE的初始化流程确实比jQuery的$(function())要慢,所以DOM加载完的时候编辑器还没准备好,自然会报Cannot read property 'setContent' of undefined的错。给你几个纯JS的靠谱解决方案,按推荐优先级排序:

方法一:监听TinyMCE的AddEditor全局事件(最可靠)

TinyMCE会在每个编辑器实例初始化完成时触发AddEditor事件,我们可以通过这个事件精准捕捉到编辑器就绪的时机:

// 监听所有编辑器初始化完成的事件
tinymce.on('AddEditor', function(e) {
    // 替换成你的编辑器ID,wp_editor的第二个参数就是这个ID,默认是'content'
    const targetEditorId = 'your-editor-id';
    
    if (e.editor.id === targetEditorId) {
        // 编辑器就绪,设置内容
        e.editor.setContent('这里是你要插入的编辑器内容');
    }
});

这个方法是官方推荐的,完全不用担心时机问题,而且可以精准指定要操作的编辑器,不会影响页面上其他可能存在的TinyMCE实例。

方法二:轮询检查编辑器实例(应急方案)

如果因为某些原因全局事件不好用,可以用轮询的方式等待编辑器就绪,虽然不够优雅,但胜在简单直接:

function setEditorContent() {
    const editor = tinymce.get('your-editor-id');
    if (editor) {
        // 编辑器已就绪,设置内容
        editor.setContent('这里是你要插入的编辑器内容');
    } else {
        // 还没就绪,100ms后再检查一次
        setTimeout(setEditorContent, 100);
    }
}

// DOM加载完后启动轮询
$(function() {
    setEditorContent();
});

注意不要把轮询间隔设得太小,避免占用过多资源,100ms的间隔完全足够。

注意事项

  • 一定要替换代码中的your-editor-id,这个ID对应你调用wp_editor函数时的第二个参数,比如wp_editor($content, 'my-custom-editor')里的my-custom-editor就是编辑器ID。
  • 如果页面上有多个TinyMCE编辑器,方法一的判断逻辑能帮你精准定位到目标编辑器,不会误操作其他实例。

内容的提问来源于stack exchange,提问作者user12544591

火山引擎 最新活动