web-dev-qa-db-fra.com

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

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

customizationtinymcebuttons
8
Mark Ursino

C'est presque du golf de code, mais c'est le plus petit morceau de code que je pourrais utiliser qui va créer un bouton sur l'éditeur visuel pour transformer le paragraphe actuel en un bloc <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 une astuce pour passer une fonction en tant que variable setup ( qui ne sera plus nécessaire dans 3.2 ).

Pour ajouter un bouton à l'éditeur HTML, vous pouvez étendre le code beaucoup plus simple "quicktags" en mettant en file d'attente ce fichier Javascript supplémentaire:

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