Schaltfläche zur TinyMCE-Leiste hinzufügen, ohne ein Plugin zu erstellen

Ich versuche, dem TinyMCE-Rich-Text-Editor ein oder zwei benutzerdefinierte Schaltflächen hinzuzufügen. Die Tutorials, die ich bisher gesehen habe, sind entweder veraltet oder erklären, wie man es mit einem benutzerdefinierten Plugin macht. Wie kann ich dies tun, ohne ein Plugin zu erstellen, vielleicht functions.phpstattdessen in der Datei? Um genau zu sein, möchte ich eine "h2" -Schaltfläche hinzufügen, die a <h2></h2>in den Körper einfügt.

Es ist fast Code Golf, aber dies ist der kleinste Code, den ich mir vorstellen kann, um eine Schaltfläche im visuellen Editor zu erstellen, mit der der aktuelle Absatz in einen <h2>Block umgewandelt werden kann.

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

Es basiert auf einem TinyMCE-Codebeispiel und verwendet einen Trick, um eine Funktion als setupVariable zu übergeben ( die in 3.2 nicht mehr benötigt wird ).

Um dem HTML-Editor eine Schaltfläche hinzuzufügen, können Sie den viel einfacheren "Quicktags" -Code erweitern, indem Sie diese zusätzliche Javascript-Datei in die Warteschlange stellen:

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