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


8

我试图将一个或两个自定义按钮添加到TinyMCE RTF编辑器中。到目前为止,我看过的教程已经过时,或者说明了如何使用自定义插件进行操作。我如何在不创建插件的情况下(functions.php而不是在文件中)执行此操作?具体来说,我想添加一个“ h2”按钮,该按钮将添加<h2></h2>到正文中。

Answers:


9

这几乎是一段代码,但这是我能用到的最小的代码,它将在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;
}

它基于TinyMCE代码示例,并使用技巧将函数作为setup变量传递(在3.2中不再需要)。

要将一个按钮添加到HTML编辑器中,您可以通过将以下额外的Javascript文件放入队列来扩展更简单的“ quicktags”代码

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

Farby如何为HTML编辑器做同样的事情?非常感谢!!!
菲利普

2
@Philip:事实证明这很容易。我添加了应作为额外的Javascript入队的代码。
1
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.