Как добавить shortcode кнопку к редактору TinyMCE?

Как сделать какой-либо сменный значок в сообщении Wordpress? Код я хочу вставить в сменный код и появлюсь в панели сообщения [wp-admin/post.php].

Как это изображение:

enter image description here

Вывод: Если я нажимаю значок, он автоматически пишет [plugin] к содержанию сообщения как это:

enter image description here

34
13.11.2012, 08:44
2 ответа

Чтобы добавить нашу кнопку к редактору TinyMCE, мы должны сделать несколько вещей:

  1. Добавьте нашу кнопку к панели инструментов
  2. Зарегистрируйте плагин TinyMCE
  3. Создайте тот плагин TinyMCE, который говорит TinyMCE, что сделать, когда наша кнопка нажата.

Шаги № 1 и № 2

На этих шагах мы регистрируем наш плагин TinyMCE, который будет жить в файле JavaScript в 'path/to/shortcode.js' (см. wpse72394_register_tinymce_plugin() ниже)

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

Шаг № 3

Теперь мы должны создать наш плагин TinyMCE. Это войдет в файл 'path/to/shortcode.js' (как указано на ранних шагах).

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);
});
66
19.02.2020, 21:55
  • 1
    На шаге 1, изменяясь init сцепитесь с admin_init рычаг мог также сохранить некоторую небольшую дополнительную обработку на фронтенде. –  Tim Malone 16.11.2016, 04:01
  • 2
    Это зависит, у Вас может быть TinyMCE на фронтенде также. Но да, если это - администраторская сторона только, admin_init было бы предпочтительно. –  Stephen Harris 17.11.2016, 12:19

Существует слишком много для помещения целого ответа здесь так контроль это руководство: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Необходимо создать файл JavaScript, который принимает меры от кнопки, которую Вы регистрируете через WordPress, который вставляет кнопку TinyMCE в редактора.

5
19.02.2020, 21:55
  • 1
    Использование query_posts поэтому, возможно, не лучший пример для соединения с. –  Brad Dalton 11.07.2014, 17:27

Теги

Похожие вопросы