WordPress中多TinyMCE编辑器文本模式下tinymce.editors数组为空的解决方案问询

这个问题我做WordPress插件开发时也踩过同款坑——用wp_editor()创建的多个独立ID编辑器，一旦页面加载时默认是文本模式，tinymce.editors数组里就找不到对应实例，调用tinymce.get()直接报空值错误。隐藏模式切换按钮确实能凑合用，但太生硬了，这里有几个更友好的解决方案：

方案1：双模式兼容，直接操作原生textarea #

文本模式下，编辑器本质就是一个原生<textarea>元素，它的ID和你用wp_editor()设置的编辑器ID完全一致。我们可以先判断编辑器是否在TinyMCE实例数组里，不存在就直接操作textarea：

function setEditorContent(editorId, content) {
    // 先尝试获取TinyMCE编辑器实例
    const editor = tinymce.get(editorId);
    
    if (editor) {
        // 可视化模式：用TinyMCE官方API设置内容
        editor.setContent(content);
    } else {
        // 文本模式：直接操作对应的textarea元素
        const textarea = document.getElementById(editorId);
        if (textarea) {
            textarea.value = content;
        }
    }
}

这个方法最实用，既保留了用户切换模式的自由，又能在两种模式下都正确设置内容，完全不影响用户的操作习惯。

方案2：监听编辑器初始化事件，追踪实例 #

如果需要更精准地控制编辑器状态，可以通过监听TinyMCE的init事件，在编辑器初始化（包括从文本模式切换到可视化模式时）把实例记录下来。不过WordPress里需要通过PHP过滤器注入这个配置：

第一步：在PHP中添加过滤器 #

add_filter('tiny_mce_before_init', function($initSettings) {
    // 给所有TinyMCE编辑器添加setup回调
    $initSettings['setup'] = <<<JS
function(editor) {
    // 编辑器初始化时触发（包括切换到可视化模式）
    editor.on('init', function() {
        // 把编辑器ID存到自定义全局数组里
        window.myEditorInstances = window.myEditorInstances || [];
        if (!window.myEditorInstances.includes(editor.id)) {
            window.myEditorInstances.push(editor.id);
        }
    });
}
JS;
    return $initSettings;
});

第二步：在JS中使用追踪到的实例 #

之后你可以通过window.myEditorInstances确认哪些编辑器已经初始化，再结合方案1的逻辑来操作，确保不会遗漏任何场景。

方案3：强制初始化文本模式的编辑器（谨慎使用） #

如果你的业务场景必须用可视化模式，可以强制把文本模式的编辑器初始化，但这个会强制切换用户的编辑模式，可能影响体验：

function forceSetEditorContent(editorId, content) {
    let editor = tinymce.get(editorId);
    
    if (!editor) {
        // 强制初始化编辑器（会切换到可视化模式）
        tinymce.execCommand('mceAddEditor', false, editorId);
        editor = tinymce.get(editorId);
    }
    
    if (editor) {
        editor.setContent(content);
    }
}

除非你明确知道用户不需要文本模式，否则不推荐这个方案。

总的来说，方案1是最平衡的选择，既解决了问题，又不影响用户体验。

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