如何在WordPress TinyMCE编辑器工具栏添加插入按钮功能

核心需求 #

• 在现有WordPress TinyMCE编辑器工具栏新增「插入按钮」控件
• 点击控件后可向内容区插入按钮元素，支持自定义按钮文字、跳转链接、样式，交互效果与Gutenberg编辑器的按钮模块一致
• 现有编辑器初始化代码如下：

function wpc_boutons_tinymce($buttons) {
    $buttons[] = 'underline';
    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'edit-block';
    return $buttons;
}
add_filter("mce_buttons_3", "wpc_boutons_tinymce");

$content = '';
$editor_id = 'mycustomeditor';
$settings = array( 
    'wpautop' => false, 
    'media_buttons' => false, 
    'quicktags' => array(
        'buttons' => 'strong,em,del,ul,ol,li,block,close'
    ),
);
wp_editor( $content, $editor_id, $settings );

具体实现步骤 #

1. 编写TinyMCE自定义插件脚本 #

在当前主题目录下新建assets/js/mce-custom-button.js文件，写入以下逻辑：注册工具栏按钮、点击后弹出配置面板、生成对应按钮HTML插入编辑器。

(function() {
    tinymce.PluginManager.add('custom_insert_button', function(editor, url) {
        // 注册工具栏按钮
        editor.addButton('custom_insert_button', {
            title: '插入按钮',
            icon: 'link', // 可自定义图标，这里先用TinyMCE内置link图标，也可替换为自定义icon路径
            onclick: function() {
                // 打开配置弹窗
                editor.windowManager.open({
                    title: '插入按钮',
                    body: [
                        {type: 'textbox', name: 'btn_text', label: '按钮文字', value: '点击按钮'},
                        {type: 'textbox', name: 'btn_link', label: '跳转链接', value: '#'},
                        {type: 'listbox', name: 'btn_style', label: '按钮样式', values: [
                            {text: '实心主色', value: 'btn-primary'},
                            {text: '描边主色', value: 'btn-outline'},
                            {text: '小号按钮', value: 'btn-sm'},
                            {text: '大号按钮', value: 'btn-lg'}
                        ]},
                        {type: 'checkbox', name: 'btn_target', label: '新窗口打开链接'}
                    ],
                    onsubmit: function(e) {
                        // 生成按钮HTML插入内容区
                        const target = e.data.btn_target ? 'target="_blank" rel="noopener noreferrer"' : '';
                        const btnHtml = `<a href="${e.data.btn_link}" class="custom-btn ${e.data.btn_style}" ${target}>${e.data.btn_text}</a>&nbsp;`;
                        editor.insertContent(btnHtml);
                    }
                });
            }
        });
    });
})();

2. 挂载自定义插件到WordPress TinyMCE #

在主题的functions.php文件中添加以下代码，加载自定义插件脚本、把按钮加入你现有的第三行工具栏：

// 加载自定义TinyMCE插件
function wpc_load_custom_mce_plugin($plugin_array) {
    $plugin_array['custom_insert_button'] = get_stylesheet_directory_uri() . '/assets/js/mce-custom-button.js';
    return $plugin_array;
}
add_filter('mce_external_plugins', 'wpc_load_custom_mce_plugin');

// 把插入按钮控件加入工具栏，直接在你原有的按钮配置函数里加就行
function wpc_boutons_tinymce($buttons) {
    $buttons[] = 'underline';
    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'edit-block';
    $buttons[] = 'custom_insert_button'; // 新增自定义插入按钮
    return $buttons;
}
add_filter("mce_buttons_3", "wpc_boutons_tinymce");

3. 添加按钮样式 #

分别给编辑器后台和前台添加按钮样式，保证插入的按钮在编辑时和前台展示效果一致，把以下CSS加入主题样式文件，也可按需调整颜色、圆角、间距等参数：

/* 通用按钮样式 */
.custom-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.custom-btn.btn-primary {
    background: #2271b1;
    color: #fff;
    border: 1px solid #2271b1;
}
.custom-btn.btn-primary:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}
.custom-btn.btn-outline {
    background: transparent;
    color: #2271b1;
    border: 1px solid #2271b1;
}
.custom-btn.btn-outline:hover {
    background: #2271b1;
    color: #fff;
}
.custom-btn.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}
.custom-btn.btn-lg {
    padding: 12px 28px;
    font-size: 16px;
}

再在functions.php中加入以下代码，让编辑器内也能加载按钮样式：

function wpc_add_mce_editor_style() {
    add_editor_style(get_stylesheet_directory_uri() . '/assets/css/custom-btn.css');
}
add_action('after_setup_theme', 'wpc_add_mce_editor_style');

扩展说明 #

• 如果需要更丰富的样式配置，可直接在JS弹窗的body配置项里加更多配置字段，比如颜色选择、圆角设置、图标选择等
• 若需要支持选中已有文字直接转成按钮，可在插入逻辑前加判断，取编辑器选中的文本作为默认按钮文字即可
• 按钮插入后如果需要二次编辑，可扩展插件逻辑，给按钮加右键编辑菜单，实现和Gutenberg一致的选中后重新配置的效果

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