ginaalessia
  • 0
Новичок

Как добавить кнопку разделения или список в экземпляр WordPress TinyMCE

  • 0

Я добавил пользовательскую кнопку в tinymce, чтобы вставлять свои короткие коды, но у меня их так много, и я хочу вместо этого сделать сплиткнопку, но не могу понять, как это сделать. Любой может помочь. Вот код, который я использовал для создания обычной кнопки:

в functions.php:

/**
Hook into WordPress
*/

add_action('init', 'onehalf_button');  
/**
Create Our Initialization Function
*/

function onehalf_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
     return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
     add_filter( 'mce_external_plugins', 'add_plugin' );
     add_filter( 'mce_buttons', 'register_button' );
   }

}
/**
Register Button
*/

function register_button( $buttons ) {
 array_push( $buttons, "|", "onehalf" );
 return $buttons;
}
/**
Register TinyMCE Plugin
*/

function add_plugin( $plugin_array ) {
   $plugin_array['onehalf'] = get_bloginfo( 'template_url' ) . '/js/tinymce_buttons.js';
   return $plugin_array;
}

и в пользовательском плагине.js

// JavaScript Document
(function() {
    tinymce.create('tinymce.plugins.onehalf', {
        init : function(ed, url) {
            ed.addButton('onehalf', {
                title : 'One Half Column',
                image : url+'/mylink.png',
                onclick : function() {
                     ed.selection.setContent('[one_half]' + ed.selection.getContent() + '[/one_half]');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('onehalf', tinymce.plugins.onehalf);
})();

Я нашел кое-что здесь http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php, но не могу понять, как реализовать это в WP.

Кто-нибудь может помочь? Спасибо.

Share
  1. Это должно быть довольно просто, скопируйте соответствующие фрагменты кода со страницы, на которую вы ссылаетесь, в существующий плагин TinyMCE, обновите несколько строк… готово!..

    Начните с этого для своего JS-плагина TinyMCE и посмотрите, как у вас дела.

    // JavaScript Document
    (function() {
        // Creates a new plugin class and a custom listbox
        tinymce.create('tinymce.plugins.onehalf', {
            createControl: function(n, cm) {
                switch (n) {
                    case 'onehalf':
                        var mlb = cm.createListBox('onehalf', {
                            title : 'My list box',
                            onselect : function(v) {
                                tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                            }
                        });
    
                        // Add some values to the list box
                        mlb.add('Some item 1', 'val1');
                        mlb.add('some item 2', 'val2');
                        mlb.add('some item 3', 'val3');
    
                    // Return the new listbox instance
                    return mlb;
    
                    /*
                    case 'onehalf':
                    var c = cm.createSplitButton('onehalf', {
                        title : 'My split button',
                        image : 'img/example.gif',
                        onclick : function() {
                            tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
                        }
                    });
    
                    c.onRenderMenu.add(function(c, m) {
                        m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
    
                        m.add({title : 'Some item 1', onclick : function() {
                            tinyMCE.activeEditor.windowManager.alert('Some  item 1 was clicked.');
                        }});
    
                        m.add({title : 'Some item 2', onclick : function() {
                            tinyMCE.activeEditor.windowManager.alert('Some  item 2 was clicked.');
                        }});
                    });
    
                    // Return the new splitbutton instance
                    return c;
                    */
                }
                return null;
            }
        });
        tinymce.PluginManager.add('onehalf', tinymce.plugins.onehalf);
    })();
    

    Если что-то не работает, пожалуйста, сообщите как можно больше информации, т.е. что вы пробовали, каков результат, что получилось, что нет… и т.д..

    • 0
  2. t31os ответ отличный. Просто примечание: чтобы получить путь к изображению, добавьте

    init : function(ed, url) {
        theurl = url;
    },
    

    прямо раньше createControl: function... и сейчас вы можете использовать его в

    var c = cm.createSplitButton('onehalf', {
        title : 'My split button',
        image : theurl + '/theicon.png',
        onclick : function() {
               tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
        }
    });
    

    Предположим, что ваш значок находится рядом с JavaScript для плагина TinyMCE.

    • 0

Оставить ответ

You must login to add an answer.