WordPress 添加按钮到 TinyMCE 栏，而不创建一个插件

问题描述

我正在向 TinyMCE 富文本编辑器添加一个或两个自定义按钮。到目前为止，我看过的教程已经过时了，或者说明如何使用自定义插件。如何在 functions.php 文件中创建插件呢？具体来说，我想添加一个”h2″ 按钮，将<h2></h2> 添加到正文中。

最佳解决方案

几乎是代码高尔夫，但是这是代码最小的代码，可以在 Visual 编辑器中创建一个按钮来转换<h2> 块中的当前段落。

add_filter( 'tiny_mce_before_init', 'wpse18719_tiny_mce_before_init' );
function wpse18719_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function(ed) {
    ed.addButton('h2', {
        title : 'H2',
        image : 'img/example.gif',
        onclick : function() {
            ed.formatter.toggle( 'h2' );
        }
    });
}][0]
JS;
    return $initArray;
}

add_filter( 'mce_buttons', 'wpse18719_mce_buttons' );
function wpse18719_mce_buttons( $mce_buttons )
{
    $mce_buttons[] = 'h2';
    return $mce_buttons;
}

它基于 a TinyMCE code sample，并使用一个技巧来传递一个函数作为 setup 变量 (which will not be needed in 3.2 anymore) 。

要添加一个按钮到 HTML 编辑器，您可以通过排列这个额外的 Javascript 文件来扩展更简单的“quicktags” code：

jQuery( function( $ ) {
    var h2Idx = edButtons.length;
    edButtons[h2Idx] = new edButton(
        'ed_h2'  // id
        ,'h2'    // display
        ,'<h2>'  // tagStart
        ,'</h2>' // tagEnd
        ,'2'     // access
    );
    var h2Button = $( '<input type="button" id="ed_h2" accesskey="2" class="ed_button" value="h2">' );
    h2Button.click( function() {
        edInsertTag( edCanvas, h2Idx );
    } );
    // Insert it anywhere you want. This is after the <i> button
    h2Button.insertAfter( $( '#ed_em' ) );
    // This is at the end of the toolbar
    // h2Button.appendTo( $( '#ed_toolbar' ) );
} );

参考文献

• Add button to TinyMCE bar without creating a plugin

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。