在WordPress的TinyMCE经典编辑器中添加可视化自定义按钮的问题求助

你遇到的这个问题很典型——旧插件因为适配性问题，没能正确把按钮注册到TinyMCE的可视化编辑器中。虽然TinyMCE的核心逻辑变化不大，但旧插件的注册方式可能已经不符合当前WordPress的钩子规范了。结合你提到的代码情况，我给你几个可行的修复方案：

一、先排查现有代码的问题 #

从你提供的两段代码来看，大概率是没正确完成可视化编辑器的按钮注册：

• 确认是否用了mce_buttons钩子把按钮添加到可视化工具栏（而不是只针对HTML编辑器的钩子）
• 检查mce_external_plugins钩子是否正确加载了按钮的JS脚本，路径有没有错误

二、放弃旧插件，手动实现更可靠 #

既然插件版本太旧，不如直接用代码自定义按钮，步骤清晰且可控：

1. 在PHP中注册按钮（主题functions.php或自定义插件） #

// 注册TinyMCE自定义按钮
function register_custom_tinymce_button() {
    // 仅对有编辑权限且启用可视化编辑器的用户加载
    if ( !current_user_can('edit_posts') || get_user_option('rich_editing') !== 'true' ) {
        return;
    }
    // 添加自定义插件脚本
    add_filter('mce_external_plugins', 'load_custom_tinymce_script');
    // 将按钮添加到可视化工具栏
    add_filter('mce_buttons', 'add_custom_tinymce_button_to_toolbar');
}
add_action('admin_head', 'register_custom_tinymce_button');

// 加载自定义TinyMCE脚本
function load_custom_tinymce_script($plugins) {
    // 替换为你的JS文件路径，比如主题目录下的js文件夹
    $plugins['my_custom_button'] = get_template_directory_uri() . '/js/tinymce-custom-button.js';
    return $plugins;
}

// 将按钮添加到工具栏
function add_custom_tinymce_button_to_toolbar($buttons) {
    // 把按钮插入到工具栏的指定位置，这里是末尾
    array_push($buttons, 'my_custom_button');
    return $buttons;
}

2. 编写按钮的JS逻辑（创建对应JS文件） #

在主题的js目录下新建tinymce-custom-button.js，内容示例：

(function() {
    tinymce.PluginManager.add('my_custom_button', function(editor, url) {
        // 定义按钮
        editor.addButton('my_custom_button', {
            text: '我的自定义按钮', // 按钮显示文字，也可以用icon属性设置图标
            icon: false,
            onclick: function() {
                // 这里写按钮点击后的操作，比如插入自定义内容
                editor.insertContent('<div class="custom-block">这是自定义按钮插入的内容</div>');
            }
        });
    });
})();

三、调试小技巧 #

• 清除浏览器缓存：旧的插件脚本可能残留，按Ctrl+Shift+R强制刷新页面
• 查看控制台报错：按F12打开开发者工具，检查是否有JS加载失败或API调用错误
• 确认用户设置：检查你的账号个人资料里，是否勾选了“使用可视化编辑器”

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