WordPress编辑器无按钮问题求助：模态框跨PHP文件加载异常

Hey there, let's tackle this issue where your WordPress editor's toolbar buttons aren't showing up in the modal or your standalone PHP file—especially since you're already loading scripts by hiding the editor first, and there are no console errors. That usually points to timing or dependency issues rather than broken code. Here are the most likely fixes to try:

1. Initialize the Editor After the Modal DOM is Fully Loaded #

Since you're loading the modal via AJAX, the editor's container is dynamically added to the page. If you initialize the editor too early (before the container exists), TinyMCE can't attach the toolbar properly.

PHP Side (if initializing via AJAX callback): #

// Target your textarea ID (replace 'my-custom-editor' with yours)
wp.editor.initialize('my-custom-editor', array(
    'tinymce' => array(
        'toolbar1' => 'bold,italic,underline,link,unlink', // Explicitly define toolbar buttons to avoid missing them
        'toolbar2' => '', // Leave empty if you don't need a second toolbar
    ),
    'quicktags' => true // Enable quicktags if needed
));

Frontend JS (trigger on modal show): #

jQuery(document).ready(function($) {
    // Wait for the modal to be fully visible before initializing
    $('#your-modal-id').on('shown.bs.modal', function() {
        wp.editor.initialize('my-custom-editor', {
            tinymce: {
                toolbar1: 'bold,italic,underline,link'
            }
        });
    });
});

2. Ensure All Editor Dependencies Are Loaded #

Hiding the editor to load scripts might miss some critical TinyMCE or WordPress editor assets. In your standalone PHP file, explicitly enqueue the required scripts and styles:

// Load core WordPress editor resources
wp_enqueue_script('wp-editor');
wp_enqueue_style('wp-editor');

// Load TinyMCE-specific dependencies
wp_enqueue_script('tinymce');
wp_enqueue_script('wp-tinymce');

Also, double-check if any theme or plugin is filtering tiny_mce_plugins and accidentally removing toolbar-related plugins (like link, bold, etc.).

3. Fix CSS/Display Issues with the Modal #

TinyMCE calculates toolbar dimensions based on the editor container's visibility. If your modal is set to display: none when initializing, the toolbar might fail to render. Try this workaround:

// Temporarily show the modal before initializing
$('#your-modal-id').css('display', 'block');

// Initialize the editor
wp.editor.initialize('my-custom-editor', {});

// Hide it again until the modal is triggered
$('#your-modal-id').css('display', 'none');

Or force a resize after initialization to refresh the toolbar:

tinymce.get('my-custom-editor').resize();

4. Verify Your Standalone PHP File Has the Full WP Context #

Make sure your standalone PHP file loads the WordPress core environment before trying to use the editor. Add this at the top of the file:

require_once('/path/to/your/wp-load.php'); // Replace with the correct path to wp-load.php

Without this, the wp.editor functions and TinyMCE assets won't be available.

Start by testing the editor in a static page first to rule out environment issues, then move it back to the modal once it's working.

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