我们首先添加自定义TinyMCE按钮：

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( \'edit_posts\' ) && !current_user_can( \'edit_pages\' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( \'true\' == get_user_option( \'rich_editing\' ) ) {
        add_filter( \'mce_external_plugins\', \'add_tinymce_plugin_custom_em\' );
        add_filter( \'mce_buttons\', \'register_mce_button_custom_em\' );
    }
}
add_action(\'admin_head\', \'add_mce_button_custom_em\');

然后，我们声明并注册新按钮：

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array[\'custom_em\'] = get_template_directory_uri() .\'/plug/custom-em/custom-em.js\';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, \'custom_em\' );
    return $buttons;
}

最后，我们决定哪些按钮（有关按钮的更多信息，请访问Content Formatting) 我们想要展示。显然，如果您考虑了用户体验，那么只会显示其中的几个，例如：

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in[\'toolbar1\'] = \'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat\';
    return $in;
}
add_filter( \'tiny_mce_before_init\', \'myformatTinyMCE\' );

正如您在add_tinymce_plugin_custom_em 函数中声明了一个javascript文件get_template_directory_uri() .\'/plug/custom-em/custom-em.js\'

因此，创建custom-em.js 文件，然后你有两种方法来处理这个问题。

您可以使用以下短代码格式[shortcode foo="" bar=""] 或[shortcode][/shortcode].

让我们从[shortcode foo="" bar=""] 格式：

(function() {
    tinymce.create(\'tinymce.plugins.custom_em\', {
        init : function(ed, url) {
            ed.addButton(\'custom_em\', {
                title : \'Custom EM\',
                image : url+\'/images/btn_custom_em.png\',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\\"\\" bar=\\"\\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add(\'custom_em\', tinymce.plugins.custom_em);
})(); 

如您所见，我们使用图像作为按钮图标。您可以将其更改为文本，如下例所示。

以下是我们在自己的平台上使用的内容，它将选择打包为：<em class="whatever">hello world</em>:

(function() {
    tinymce.PluginManager.add(\'custom_em\', function( editor, url ) {

        editor.on(\'init\', function(e) {
            this.formatter.register(\'thetarget\', {
                inline : \'em\',
                classes : \'whatever\'
            });
        });

        editor.addButton(\'custom_em\', {
            text: \'Custom EM\',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find(\'em.whatever\').andSelf();
                editor.formatter.toggle(\'thetarget\');
            }
        });
    });
})(jQuery);

请发布结果并进行编辑。TinyMCE是一种瘟疫，需要头痛，但可以通过协作的方式解决。