在不创建插件的情况下向TinyMCE栏添加按钮

时间:2011-05-30 作者:Mark Ursino

我正在尝试向TinyMCE富文本编辑器添加一两个自定义按钮。到目前为止,我看到的教程要么已经过时,要么解释了如何使用自定义插件。我如何在不创建插件的情况下做到这一点functions.php 改为文件?具体来说,我想添加一个“h2”按钮,该按钮将在<h2></h2> 进入身体。

1 个回复
最合适的回答,由SO网友:Jan Fabry 整理而成

这几乎是代码高尔夫,但这是我能想到的最小的一段代码,它将在可视化编辑器上创建一个按钮,以在<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编辑器添加按钮,可以扩展更简单的"quicktags" code 通过将此额外Javascript文件排队:

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\' ) );
} );

结束

相关推荐

有没有办法在tinyMCE厨房水槽开关上再加一排?

tinyMCE“kitchen sink”切换按钮显示/隐藏一行按钮。我已经成功地将我的一行快捷代码按钮添加到tinyMCE编辑器中,但我想知道是否有办法使我的行仅在单击厨房水槽按钮时显示。我不想直接将按钮添加到厨房水槽行,因为我有许多按钮需要自己的行。那么,我可以让厨房的水槽按钮显示两排而不是一排吗?或者,当我添加行时,是否有某种修改器指示在单击厨房水槽按钮时应切换行?下面是我用来添加第三行按钮的代码: // add shortcode buttons to the tinyMCE editor