如何在WordPress的TinyMCE编辑器中添加自定义按钮？

问题分析 #

你当前的代码存在几个关键问题：

• 手动调用tinymce.init()会和WordPress自带的TinyMCE初始化冲突，导致自定义按钮无法正常加载
• register_custom_button函数未实现，仅挂在了mce_buttons钩子上，没有实际将按钮添加到工具栏
• 脚本加载方式不符合WordPress规范，无法正确集成到TinyMCE的生命周期中

修正后的代码 #

替换你现有的代码为以下内容：

// 注册TinyMCE自定义按钮到工具栏
function custom_tinymce_register_button($buttons) {
    array_push($buttons, 'myCustomButton');
    return $buttons;
}
add_filter('mce_buttons', 'custom_tinymce_register_button');

// 加载自定义TinyMCE插件逻辑
function custom_tinymce_inline_script() {
    ?>
    <script>
        tinymce.PluginManager.add('myCustomButtonPlugin', function(editor) {
            // 添加自定义按钮
            editor.ui.registry.addButton('myCustomButton', {
                text: 'Starter Template',
                icon: 'plus',
                onAction: function() {
                    const divContent = `
                        <div class="custom-div">
                            <h1>Add your heading</h1>
                            <p>Add your paragraph</p>
                            <p>Add your paragraph</p>
                            <p>Add your paragraph</p>
                            <ul>
                                <li>Add Item 1</li>
                                <li>Add Item 2</li>
                                <li>Add Item 3</li>
                            </ul>
                        </div>`;
                    editor.insertContent(divContent);
                }
            });
        });
    </script>
    <?php
}
add_action('admin_head', 'custom_tinymce_inline_script');

额外说明 #

1. 代码生效步骤：

   • 保存代码后，清空WordPress后台缓存（若使用缓存插件）
   • 刷新文章/页面编辑页面，检查工具栏是否出现自定义按钮
   • 若仍不显示，可尝试用浏览器隐私模式打开页面，避免本地缓存干扰

2. 规范优化建议：

   • 若代码量较大，可将JS部分单独提取为wp-admin/js/custom-tinymce-button.js文件，再通过mce_external_plugins钩子加载，保持代码结构清晰

内容的提问来源于stack exchange，提问作者B104 Sanket naikwadi