Agregar botón a la barra de TinyMCE sin crear un complemento

8

Estoy tratando de agregar uno o dos botones personalizados al editor de texto enriquecido de TinyMCE. Los tutoriales que he visto hasta ahora están desactualizados o explican cómo hacerlo con un complemento personalizado. ¿Cómo puedo hacer esto sin crear un complemento, quizás en el functions.phparchivo? Para ser específicos, quiero agregar un botón "h2" que se agregará en <h2></h2>el cuerpo.

Mark Ursino
fuente

Respuestas:

9

Es casi un código de golf, pero este es el fragmento de código más pequeño que podría crear para crear un botón en el editor visual para convertir el párrafo actual en un <h2>bloque.

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

Se basa en una muestra de código TinyMCE y utiliza un truco para pasar una función como setupvariable ( que ya no será necesaria en 3.2 ).

Para agregar un botón al editor HTML, puede extender el código de "etiquetas rápidas", mucho más simple, colocando este archivo Javascript adicional:

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
fuente
Farby, ¿cómo puedes hacer lo mismo para el editor HTML? ¡¡¡muchas gracias!!!
Philip
2
@Philip: Resulta que es muy fácil. He agregado el código que debe poner en cola como un Javascript adicional.
Jan Fabry