如何为Elementor文本编辑器小部件添加自定义格式按钮？

你不需要创建自定义文本编辑器部件，通过主题的functions.php文件结合Elementor专属的钩子就能实现这个功能——普通WordPress TinyMCE自定义方法无效，是因为Elementor的编辑器在独立上下文加载，需要用Elementor提供的钩子注入自定义逻辑。

实现步骤： #

1. 在functions.php中注册按钮并加载自定义脚本

添加以下代码到主题的functions.php文件：

add_action( 'elementor/editor/after_enqueue_scripts', 'add_elementor_tinymce_custom_button' );
function add_elementor_tinymce_custom_button() {
    // 仅在Elementor编辑器界面加载脚本
    if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
        return;
    }

    // 注册并加载自定义JS文件
    wp_enqueue_script(
        'elementor-tinymce-custom-button',
        get_stylesheet_directory_uri() . '/js/elementor-tinymce-custom.js',
        [ 'jquery', 'tiny_mce' ],
        wp_get_theme()->get( 'Version' ),
        true
    );
}

2. 编写自定义TinyMCE按钮的JS逻辑

在主题目录下创建js/elementor-tinymce-custom.js文件，添加以下代码：

jQuery(document).ready(function($) {
    // 等待TinyMCE初始化
    tinymce.on('AddEditor', function(e) {
        var editor = e.editor;
        
        // 注册自定义命令
        editor.addCommand('wrapNumbersSpan', function() {
            var selectedText = editor.selection.getContent({ format: 'text' });
            if (selectedText.length === 0) return;
            
            // 包裹选中文本到指定span标签
            var wrappedText = '<span class="numbers">' + selectedText + '</span>';
            editor.selection.setContent(wrappedText);
        });

        // 添加按钮到编辑器工具栏
        editor.ui.registry.addButton('numbers_span', {
            text: '数字高亮', // 按钮显示文字，可替换为自定义内容
            icon: 'editor-textcolor', // 可选，替换为TinyMCE内置图标类名
            onAction: function() {
                editor.execCommand('wrapNumbersSpan');
            }
        });

        // 将按钮插入到工具栏的加粗按钮之后
        editor.on('init', function() {
            var toolbar = editor.settings.toolbar;
            if (typeof toolbar === 'string') {
                toolbar = toolbar.split('|');
                for (var i = 0; i < toolbar.length; i++) {
                    if (toolbar[i].includes('bold')) {
                        toolbar[i] += ' numbers_span';
                        break;
                    }
                }
                editor.settings.toolbar = toolbar.join('|');
            }
        });
    });
});

3. 可选：添加高亮样式

在主题的style.css中添加.numbers类的样式，让高亮效果可见：

.numbers {
    background-color: #ffeb3b;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

关键说明： #

• 用elementor/editor/after_enqueue_scripts钩子确保脚本仅在Elementor编辑界面加载，避免全局影响。
• 通过监听AddEditor事件，确保Elementor的每个TinyMCE实例都能加载自定义按钮。
• 可自行调整按钮的文字、图标，以及在工具栏中的插入位置。

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