TinyMCE Menu Button Icon Doesn't Appear

I'm trying to create TinyMCE Menu Button which should open multiple popup window manager. It works fine but the button image doesn't appear.

here is the code. Am I doing something wrong?

(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'm not dev, but trying to understand this part to use in Wordpress theme. Any one can help please?

While the URL to the toolbar image is absolute, you can use the value of the url supplied in init() function that is the URL to the plugin location. For example

image : url + '/btn.png'

Additional to Bretts answer you may need to put the button explicitly into the button config part of the tinymce init.

Example:

I added my own ßplugins buttons to the tinymce UI using this code onInit in my own plugins:

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

and here the relevant part of the tinymce init

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