WordPress中如何将TinyMCE内容同步到message_content并提交保存？

原代码核心问题 #

1. wp_editor参数错误：第二个参数message_content未加引号，PHP会将其识别为常量而非字符串，导致编辑器与目标textarea无法建立关联。
2. 编辑器实例获取错误：JS中用tinymce.get('tinymce')获取实例是错误的，wp_editor生成的编辑器ID与传入的第二个参数一致，应为message_content。
3. 表单事件绑定需匹配：需确保#fep-content是对应表单的正确ID，否则提交事件无法触发。

修正后的完整代码 #

HTML & PHP 部分 #

<form id="fep-content" method="post">
    <!-- 原隐藏textarea -->
    <textarea id="message_content" name="message_content" required="required" minlength="10" maxlength="10000" style="display: none;" aria-hidden="true"></textarea>

    <!-- 加载关联的TinyMCE编辑器 -->
    <?php
    // 修正第二个参数为字符串，确保编辑器与目标textarea绑定
    wp_editor( $content, 'message_content' );
    ?>

    <button type="submit" class="fep-button">Send Message</button>
</form>

JS 部分 #

// 监听表单提交事件
$('#fep-content').on('submit', function() {
    // 获取正确的编辑器实例
    const editor = tinymce.get('message_content');
    
    if (editor) {
        // 强制编辑器将内容同步到关联的textarea（最可靠的方式）
        editor.save();
    }
});

关键说明 #

• wp_editor的第二个参数必须是目标textarea的ID（字符串格式），绑定后编辑器默认会在表单提交时自动同步内容，手动调用editor.save()可确保同步生效。
• 无需额外处理原textarea的显示状态，wp_editor会自动管理，但手动隐藏也不影响同步逻辑。

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