TinyMCE Menu Button Icon Doesn't Appear - wordpress

Question

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?

Answer 1

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'

Answer 2

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