I am attempting to create TinyMCE Menu Button that ought to open multiple popup window manager. It really works fine however the button image does not appear.

this is actually the code. Shall We Be Held doing a problem?

(function() {  
    tinymce.create('tinymce.plugins.shortcodes', {  
        init : function(ed, url) {  

            ed.addCommand('scTypography', function() {
                ed.windowManager.open({
                        file : url + '/dialog.htm',
                        width : 800 + ed.getLang('example.delta_width', 0),
                        height : 500 + ed.getLang('example.delta_height', 0),
                        inline : 1
                });
            });

            ed.addCommand('scColumns', function() {
                ed.windowManager.open({
                        file : url + '/dialog.htm',
                        width : 800 + ed.getLang('example.delta_width', 0),
                        height : 500 + ed.getLang('example.delta_height', 0),
                        inline : 1
                });
            });

            ed.addCommand('scButtons', function() {
                ed.windowManager.open({
                        file : url + '/dialog.htm',
                        width : 800 + ed.getLang('example.delta_width', 0),
                        height : 500 + ed.getLang('example.delta_height', 0),
                        inline : 1
                });
            });
        },  


        createControl : function(n, cm) {  
            switch (n) {
                case 'shortcodes':
                    var c = cm.createMenuButton('shortcodes', {
                        title : 'My menu button',
                        image : '/btn.png'
                    });

                    c.onRenderMenu.add(function(c, m) {
                        var sub;

                        sub = m.addMenu({title : 'Some item 3'});

                        sub.add({title : 'Typography', onclick : function() {
                                tinyMCE.activeEditor.execCommand('scTypography');
                        }});

                        sub.add({title : 'Layout Columns', onclick : function() {
                                tinyMCE.activeEditor.execCommand('scColumns');
                        }});

                        sub.add({title : 'Buttons', onclick : function() {
                                tinyMCE.activeEditor.execCommand('scButtons');
                        }});

                    });

                    // Return the new menu button instance
                    return c;
            }
            return null;  
        },  

    });  
    tinymce.PluginManager.add('shortcodes', tinymce.plugins.shortcodes);  
})(); 

I am not dev, but attempting to appreciate this part to make use of in Wordpress theme. Anyone might help please?

As the Hyperlink to the plugin image is absolute, you should use the need for the url provided in init() function that's the Hyperlink to the wordpress plugin location. For instance

image : url + '/btn.png'

Cheers, Brett

Brett Henderson

http://tinymce.ephox.com

Additional to Bretts answer you may want to place the button clearly in to the button config area of the tinymce init.

Example:

I added my very own ßplugins buttons towards the tinymce UI by using this code onInit during my own plug ins:

// Register my_button
ed.addButton('my_button', {
  title : 'Click me!',
  cmd :   'my_command',
  image : url + "my_image.png";
});

and here the appropriate area of the tinymce init

theme_advanced_buttons1:"style,bold,italic,underline",
theme_advanced_buttons2: "cleanup,save,preview,my_button", // <-- here