CODEWITHSUNDEEP
wordpresstinymce
user851222
user851222

Reputation: 1

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?

Upvotes: 0

Views: 1878

Answers (2)

Brett Henderson
Brett Henderson

Reputation: 1684

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'

Upvotes: 2

Thariama
Thariama

Reputation: 50832

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

Upvotes: 0

Related Questions