Ajouter un bouton à la barre TinyMCE sans créer de plugin

8

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

Mark Ursino
la source

Réponses:

9

C'est presque du golf de code, mais c'est le plus petit morceau de code que je pourrais créer qui créera un bouton sur l'éditeur visuel pour transformer le paragraphe actuel en <h2>bloc.

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 setupvariable ( qui ne sera plus nécessaire dans 3.2 ).

Pour ajouter un bouton à l'éditeur HTML, vous pouvez étendre le code "quicktags" beaucoup plus simple 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' ) );
} );
Jan Fabry
la source
Farby comment pouvez-vous faire de même pour l'éditeur HTML? Merci beaucoup!!!
Philip
2
@Philip: Il s'avère que c'est très facile. J'ai ajouté le code que vous devez mettre en file d'attente en tant que Javascript supplémentaire.
Jan Fabry