Tambahkan tombol ke bar TinyMCE tanpa membuat plugin


8

Saya mencoba menambahkan satu atau dua tombol khusus ke editor teks kaya TinyMCE. Tutorial yang saya lihat sejauh ini sudah usang atau menjelaskan cara melakukannya dengan plugin khusus. Bagaimana saya bisa melakukan ini tanpa membuat plugin, mungkin di functions.phpfile? Untuk lebih spesifik, saya ingin menambahkan tombol "h2" yang akan menambahkan a <h2></h2>ke dalam tubuh.

Jawaban:


9

Ini hampir kode golf, tetapi ini adalah bagian terkecil dari kode yang bisa saya buat dengan yang akan membuat tombol pada editor Visual untuk mengubah paragraf saat ini di <h2>blok.

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

Ini didasarkan pada sampel kode TinyMCE dan menggunakan trik untuk melewatkan fungsi sebagai setupvariabel ( yang tidak akan diperlukan dalam 3,2 lagi ).

Untuk menambahkan tombol ke editor HTML Anda dapat memperluas kode "quicktags" yang jauh lebih sederhana dengan membuat file Javascript tambahan ini:

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

Bagaimana Anda bisa melakukan hal yang sama untuk editor HTML? Terima kasih banyak!!!
Philip

2
@ Pilip: Ternyata itu sangat mudah. Saya telah menambahkan kode yang harus Anda enqueue sebagai Javascript tambahan.
Jan Fabry
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.