Comment puis-je ajouter un bouton partagé ou zone de liste à l'instance WordPress TinyMCE

Question

J'ai ajouté un bouton personnalisé à la tinymce d'insérer mes shortcodes, mais j'ai tant et je veux faire une place SplitButton et je ne peux pas faire. Tout le monde peut aider. Voici le code que je l'ai utilisé pour créer le bouton normal:

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

et dans le plugin personnalisé .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);
})();

Je l'ai trouvé quelque chose http://tinymce.moxiecode.com/tryit/listbox_splitbutton. php mais ne peut pas comprendre comment le mettre en œuvre dans WP.

Tout le monde peut aider? Merci.

Answer 1

Il devrait être assez simple, copier les éléments pertinents de code de la page que vous avez lié à dans votre plugin TinyMCE existant, mettre à jour quelques cordes ... fait! ..

Commencez par ceci pour votre TinyMCE plug-in JS et voir comment vous allez ..

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

Si quelque chose ne fonctionne pas de nouveau rapport avec s'il vous plaît que des informations autant que possible, par exemple. ce que vous avez essayé, ce qui était, ce qui ne se le résultat, ce qui n'a pas ... etc ..

Answer 2

t31os réponse est grande. Juste une remarque: pour obtenir le chemin d'accès au complément d'image

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

juste avant createControl: function... et vous pouvez l'utiliser dans

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

En supposant que l'icône est juste à côté du JavaScript pour le plugin TinyMCE.