TinyMCE editörüne nasıl kısa kod eklenir?


34

WordPress post herhangi bir eklenti simgesi nasıl yapılır? Eklenti koduna eklemek istediğim kod posta çubuğunda görünecek [wp-admin / post.php].

Bu resimdeki gibi:

görüntü tanımını buraya girin

Çıktı: Simgeye tıklarsam, otomatik olarak şuna [plugin]benzer içerik gönder:

görüntü tanımını buraya girin


Almak istediğiniz sonucun ekran görüntüsünü ekleyin. Ne istediğin belli değil.
fuxia

Bir WordPress kısa kodu ekleyen editöre TinyMCE düğmesi ekleyen bir eklenti oluşturmak istediğinizi düşünüyorum.
12'de

Yanıtlar:


65

Düğmemizi TinyMCE editörüne eklemek için birkaç şey yapmamız gerekiyor:

  1. Düğmemizi araç çubuğuna ekleyin
  2. TinyMCE eklentisini kaydet
  3. TinyMCE düğmesine tıklandığında ne yapacağını söyleyen TinyMCE eklentisini oluşturun.

Adım # 1 ve # 2

Bu adımlarda, bir javascript dosyasında yaşayacak olan TinyMCE eklentimizi kaydediyoruz 'path/to/shortcode.js'(aşağıya wpse72394_register_tinymce_plugin()bakınız)

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

Aşama 3

Şimdi TinyMCE eklentimizi oluşturmamız gerekiyor. Bu bir dosyaya girecektir 'path/to/shortcode.js'(ilk adımlarda belirtildiği gibi).

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

1
1. adımda, initkancanın kancaya değiştirilmesi admin_init, ön uçta hafif bir miktar ilave işlem yapılmasını da sağlayabilir.
Tim Malone

Bu, TinyMCE'in ön ucunda da bulunabileceğine bağlı. Fakat evet, eğer bu sadece yönetici taraf ise, admin_inittercih edilir.
Stephen Harris

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.