求助：如何为多个Metabox添加自定义编辑器工具栏

Hey there! I’ve dealt with this exact scenario when working with WordPress metaboxes, so let me break down a reliable way to add custom toolbars to your metabox editors.

First off, make sure your metabox loads a proper TinyMCE editor (not just a plain textarea). When registering your metabox, use the wp_editor() function instead of a standard text input. Here’s a quick example:

function add_custom_metabox() {
    add_meta_box(
        'custom_metabox_1',
        'My Custom Metabox',
        'render_custom_metabox',
        'post', // Replace with your target post type
        'normal',
        'default'
    );
    // Repeat the above block for all your additional metaboxes
}
add_action('add_meta_boxes', 'add_custom_metabox');

function render_custom_metabox($post) {
    $content = get_post_meta($post->ID, '_custom_metabox_content', true);
    // Render TinyMCE with a unique editor ID (critical for targeting later)
    wp_editor(
        $content,
        'custom_metabox_editor_1',
        array(
            'textarea_name' => 'custom_metabox_content',
            'tinymce' => array(
                'toolbar1' => 'bold,italic,underline,|,my_custom_button', // Placeholder for our custom button
                'toolbar2' => '' // Remove unused toolbars to keep it clean
            )
        )
    );
}

Next, we need to tell TinyMCE about our custom button, and restrict it only to your metabox editors (so it doesn’t clutter the main post editor). Use the tiny_mce_before_init filter:

function customize_metabox_tinymce($init, $editor_id) {
    // List all your metabox editor IDs here
    $target_editors = array('custom_metabox_editor_1', 'custom_metabox_editor_2');
    if (!in_array($editor_id, $target_editors)) {
        return $init;
    }

    // Add the custom button to TinyMCE's button map
    $init['button_map'] = array_merge($init['button_map'] ?? array(), array(
        'my_custom_button' => array('title' => 'Insert Custom Content', 'cmd' => 'insert_custom_content')
    ));

    return $init;
}
add_filter('tiny_mce_before_init', 'customize_metabox_tinymce', 10, 2);

Now define what happens when the button is clicked. Use the mce_external_plugins filter to load a custom JavaScript file (or inline JS for simplicity):

function add_metabox_tinymce_plugin($plugins) {
    // Point to your JS file (adjust the path to match your theme/plugin structure)
    $plugins['custom_metabox_plugin'] = admin_url('js/custom-metabox-tinymce.js');
    return $plugins;
}
add_filter('mce_external_plugins', 'add_metabox_tinymce_plugin');

Create the custom-metabox-tinymce.js file in your theme/plugin’s admin/js folder with this code:

(function() {
    tinymce.PluginManager.add('custom_metabox_plugin', function(editor, url) {
        // Define the button's action
        editor.addCommand('insert_custom_content', function() {
            // Replace this with your desired functionality
            var customContent = '<div class="custom-block">This is my custom content snippet!</div>';
            editor.insertContent(customContent);
        });

        // Register the button in the toolbar
        editor.ui.registry.addButton('my_custom_button', {
            text: 'Custom',
            icon: 'plus-circle', // Use a built-in TinyMCE icon, or replace with custom text
            onAction: function() {
                editor.execCommand('insert_custom_content');
            }
        });
    });
})();

If you have lots of metaboxes, avoid repeating code by using a consistent prefix for your editor IDs (like custom_metabox_editor_). Then modify the check in customize_metabox_tinymce to target any editor with that prefix:

if (strpos($editor_id, 'custom_metabox_editor_') !== false) {
    // Apply custom toolbar changes here
}

• Clear your browser cache after updating the code—TinyMCE caches editor settings heavily.
• Verify your JS file is loading correctly (check the browser’s dev tools network tab).
• Double-check that your editor IDs match exactly between wp_editor() and the filter.

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