Значок кнопки меню TinyMCE не отображается

Question

Я пытаюсь создать кнопку меню TinyMCE, которая должна открывать несколько всплывающих оконных менеджеров.Он работает нормально, но изображение кнопки не появляется.

вот код.Я делаю что-то не так?

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

Я не разработчик, но пытаюсь понять эту часть для использования в теме Wordpress.Кто-нибудь может помочь, пожалуйста?

Answer 1

Хотя URL-адрес изображения панели инструментов является абсолютным, вы можете использовать значение URL-адреса, предоставленное в функции init () , которая является URL-адресом расположения плагина. Например

image : url + '/btn.png'

Answer 2

В дополнение к ответу Бреттса, вам, возможно, понадобится явно поместить кнопку в часть конфигурации кнопки initTinymce.

Пример:

Я добавил свои собственные ßpluginsкнопки для пользовательского интерфейса tinymce, использующие этот код onInit в моих собственных плагинах:

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

и здесь соответствующая часть инициализации tinymce

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