Bagaimana cara menambahkan tombol kode pendek ke editor TinyMCE?

34

Bagaimana cara membuat ikon plugin di postingan wordpress? Kode yang ingin saya masukkan dalam kode plugin dan akan muncul di bilah pos [wp-admin / post.php].

Seperti gambar ini:

masukkan deskripsi gambar di sini

Output: Jika saya mengklik ikon itu secara otomatis menulis [plugin]ke konten posting seperti ini:

masukkan deskripsi gambar di sini

Juan Lie
sumber
Tambahkan tangkapan layar dari hasil yang ingin Anda dapatkan. Tidak jelas apa yang Anda inginkan.
fuxia
Saya pikir Anda ingin membuat plugin yang menambahkan tombol TinyMCE ke editor yang menyisipkan kode pendek WordPress, kan?
developdaly

Jawaban:

65

Untuk menambahkan tombol kita ke editor TinyMCE kita perlu melakukan beberapa hal:

  1. Tambahkan tombol kami ke bilah alat
  2. Daftarkan plugin TinyMCE
  3. Buat plug-in TinyMCE yang memberi tahu TinyMCE apa yang harus dilakukan ketika tombol kita diklik.

Langkah # 1 dan # 2

Dalam langkah-langkah ini kami mendaftarkan plug-in TinyMCE kami yang akan tinggal di dalam file javascript di 'path/to/shortcode.js'(lihat di wpse72394_register_tinymce_plugin()bawah)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Langkah # 3

Sekarang kita perlu membuat plug-in TinyMCE kami. Ini akan masuk dalam file 'path/to/shortcode.js'(sebagaimana ditentukan pada langkah awal).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
Stephen Harris
sumber
1
Pada langkah 1, mengubah initkait ke admin_initkait juga bisa menghemat sedikit pemrosesan ekstra di front-end.
Tim Malone
Tergantung, Anda dapat memiliki TinyMCE di front-end juga. Tapi ya, jika ini hanya sisi admin, admin_initakan lebih disukai.
Stephen Harris
5

Ada terlalu banyak untuk meletakkan seluruh jawaban di sini jadi periksa panduan ini: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Anda harus membuat file Javascript yang mengambil tindakan dari tombol yang Anda daftarkan melalui WordPress yang memasukkan tombol TinyMCE ke dalam editor.

berkembang
sumber
3
Menggunakan kueri_pos jadi mungkin bukan contoh terbaik untuk ditautkan.
Brad Dalton