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是绝对的，但您可以使用 init（）函数中提供的URL的值，该函数是插件位置的URL。例如

image : url + '/btn.png'

Answer 2

除了Bretts的回答，您可能需要将按钮明确地放入tinymce init的按钮配置部分。

示例：

我在我自己的插件中使用此代码onInit将自己的ßplugins按钮添加到了tinymce UI中：

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

这里是tinymce init的相关部分

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

TinyMCE菜单按钮图标不显示

2 个答案: