URL参数调用Bootstrap Modal时wp未定义，TinyMCE无法初始化

核心原因 #

通过URL参数跳转后直接初始化模态框时，WordPress内置的wp对象（包含editor相关方法）还未完全加载，导致执行wp.editor.initialize()时出现未定义错误；而通过jQuery POST打开模态框是在页面所有资源加载完成后触发，此时wp对象已就绪。

具体解决方法 #

1. 显式加载编辑器依赖资源 #

在All Content页面的PHP代码中，通过钩子强制引入wp-editor所需的脚本和样式，避免自动加载的延迟问题：

// 在admin_enqueue_scripts钩子中添加
function my_plugin_enqueue_editor_assets() {
    $current_page = isset($_GET['page']) ? $_GET['page'] : '';
    if ($current_page === 'my-plugin-all-content') {
        // 加载wp-editor核心脚本
        wp_enqueue_script('wp-editor');
        // 加载quicktags脚本（对应快速标签功能）
        wp_enqueue_script('quicktags');
        // 加载编辑器样式
        wp_enqueue_style('wp-editor');
    }
}
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_editor_assets');

2. 延迟编辑器初始化直到wp对象就绪 #

将模态框中的初始化脚本改为等待wp对象加载完成后执行，推荐两种实现方式：

方式一：使用WordPress官方的wp.domReady()

这是WordPress专门用于等待核心JS对象就绪的方法，兼容性最好：

<script>
wp.domReady(function() {
    // 先判断URL参数是否存在，再执行初始化
    const contentId = new URLSearchParams(window.location.search).get('the_content');
    if (contentId) {
        wp.editor.initialize('my_plugin_section_<?php echo $section_count; ?>_text', {
            tinymce: {
                wpautop: true,
                plugins : 'charmap colorpicker compat3x directionality fullscreen hr lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview',
                toolbar1: 'bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink | fullscreen | wp_adv',
                toolbar2: 'formatselect alignjustify forecolor | pastetext removeformat charmap | outdent indent | undo redo | wp_help',
                valid_elements: '*',
                verify_html: false
            },
            quicktags: true,
            mediaButtons: true,
        });
    }
});
</script>

方式二：使用jQuery的窗口加载事件

如果项目依赖jQuery，也可以用这个方式确保所有资源加载完成：

<script>
$(window).on('load', function() {
    const contentId = new URLSearchParams(window.location.search).get('the_content');
    if (contentId && typeof wp !== 'undefined' && wp.editor) {
        wp.editor.initialize('my_plugin_section_<?php echo $section_count; ?>_text', {
            // 编辑器配置同上方
        });
    }
});
</script>

3. 配合Bootstrap模态框显示事件 #

如果模态框有显示动画，需要在模态框完全显示后再初始化编辑器，避免渲染异常：

// 替换成你的模态框ID
$('#your-modal-id').on('shown.bs.modal', function() {
    if (typeof wp !== 'undefined' && wp.editor) {
        wp.editor.initialize('my_plugin_section_<?php echo $section_count; ?>_text', {
            // 编辑器配置
        });
    }
});

额外验证点 #

• 打开浏览器控制台的Sources标签，确认wp-editor.js已成功加载
• 检查textarea的ID是否唯一，避免重复ID导致的初始化冲突

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