TinyMCE MenuButton图像没有出现

Question

我正在尝试在我的tinyMCE工具栏中添加一个menubutton。它似乎工作但由于某种原因图像没有设置

editor.addButton(
    'sptemplate'
    , {
        title   : 'Add Caution / Warning'
        ,image  : '/images/tinymce/tinymce-ico-template.png'
        ,type   : 'menubutton'
        ,menu   : [{
                    text: 'Add Caution',
                    value: templates.Caution,
                    icon: true,
                    image: '/images/tinymce/tinymce-ico-caution.png',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }}
                   ,{
                    text: 'Add Warning',
                    value: templates.Warning,
                    icon: true,
                    image: '/images/tinymce/tinymce-ico-warning.png',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }}]
    }
);

这是添加带有2个菜单选项的按钮。这两个选项会显示图标，但不会显示Add Caution / Warning父级。

当我检查元素时，我看到了：

<button id="mceu_14-open" role="presentation" type="button" tabindex="-1">
    <i class="mce-ico mce-i-sptemplate"></i>
    <span></span> 
    <i class="mce-caret"></i>
</button>

有人能指出我出错的地方吗？

Answer 1

使用＆＃34; icon＆＃34;而不是＆＃34;图像＆＃34;。 例如：

title   : 'Add Caution / Warning',
icon   : 'caution-warning',
type   : 'menubutton'

并在您的css文件中：

i.mce-i-caution-warning {
     background-image: url('../images/caution-warning.png'); /* write the correct path */
}