Bouton Ajouter à la barre TinyMCE sans créer un plug-in

Question

Je suis en train d'ajouter un bouton ou deux à l'éditeur de texte riche TinyMCE. Les tutoriels que j'ai vu jusqu'à présent sont soit obsolètes ou expliquent comment le faire avec un plug-in personnalisé. Comment puis-je faire cela sans créer un plug-in, peut-être dans le fichier functions.php à la place? Pour être précis, je veux ajouter un bouton « h2 » qui ajoutera dans un <h2></h2> dans le corps.

Answer 1

Il est presque le golf de code, mais est le plus petit morceau de code que je pouvais avec cette créerai un bouton sur l'éditeur visuel pour mettre le paragraphe en cours dans un bloc de <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;
}

Il est basé sur un exemple de code TinyMCE et utilise un tour pour passer d'une fonction de la variable d'setup ( qui ne sera pas nécessaire 3.2 plus ).

Pour ajouter un bouton à l'éditeur HTML, vous pouvez étendre le plus simple " le code des balises prédéfinies » par mise en attente de ce fichier supplémentaire 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' ) );
} );