如何在WordPress单页面中实现点击按钮新增多个Tinymce编辑器

问题根因 #

• wp_editor() 是PHP服务端渲染函数，仅在页面首次加载阶段执行时才能生成对应的编辑器DOM结构、加载依赖资源并完成Tinymce实例初始化，前端动态插入的wp_editor()代码不会被PHP解析执行，因此无法生成可用的编辑器
• Tinymce要求每个实例绑定唯一的DOM ID，如果重复使用相同的editor_id，会导致新实例初始化失败、原有实例交互异常

实现步骤 #

1. 后端预加载资源&输出基础配置 #

在页面对应的PHP文件中，先预加载编辑器所需的所有资源，同时把默认编辑器配置输出给前端JS调用：

// 预加载Tinymce编辑器所有依赖资源
wp_enqueue_editor();
// 输出编辑器默认配置给前端
add_action('admin_footer', function() {
    // 可根据需求自定义编辑器配置，和wp_editor的第三个参数配置规则一致
    $editor_settings = wp_parse_args([
        'textarea_name' => 'faq_content[]'
    ], wp_get_editor_defaults());
    ?>
    <script>
    window.wpEditorDefaults = <?php echo json_encode($editor_settings); ?>;
    window.editorIndex = 0; // 编辑器序号计数器，保证ID全局唯一
    </script>
    <?php
});

2. 前端新增编辑器逻辑 #

点击新增按钮时，按以下流程生成新编辑器：

// 替换成你实际的新增按钮选择器
document.querySelector('#add-editor-btn').addEventListener('click', function() {
    // 生成唯一ID，避免重复
    const editorId = `faq_editor_${window.editorIndex++}`;
    // 生成编辑器容器
    const editorWrap = document.createElement('div');
    editorWrap.className = 'editor-container';
    editorWrap.innerHTML = `<textarea id="${editorId}"></textarea>`;
    // 插入到页面编辑器列表容器中，替换成你实际的容器选择器
    document.querySelector('#editors-list').appendChild(editorWrap);
    // 调用WordPress内置方法初始化编辑器
    wp.editor.initialize(editorId, window.wpEditorDefaults);
});

3. 编辑器销毁逻辑（可选，适用于支持删除编辑器的场景） #

如果要支持删除动态新增的编辑器，需要先销毁Tinymce实例再删除DOM，避免内存泄漏：

function removeEditor(editorId) {
    wp.editor.remove(editorId);
    document.getElementById(editorId).parentElement.remove();
}

注意事项 #

• 所有编辑器的ID必须全局唯一，不能重复
• 不要直接在前端插入包含wp_editor()的代码段，PHP代码无法在客户端执行
• 如果是前端用户侧页面（非WordPress后台）使用，需要先通过wp_enqueue_script加载wp-edit等编辑器相关依赖

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