如何在CKEditor中创建没有图标的按钮

时间:2009-11-08 21:19:55

标签: button ckeditor

当我在CKEditor 3.0中使用以下代码创建工具栏按钮时,我需要取消注释图标属性以使按钮可见。否则占用空间但不显示标签。当我将鼠标悬停在它上面时,我会弹出标题。

        editor.ui.addButton('customButton', {
            label: 'Custom Action',
            //icon: this.path + 'images/anchor.gif',
            command: commandName
        });

您知道如何创建没有图标的工具栏按钮吗?只是一个纯文本。

2 个答案:

答案 0 :(得分:7)

更简单的方法是CKEditor在自定义标签上创建一个自动调用的CSS类: cke_button_<命令>

例如,如果您对该按钮的命令被称为“myCommand”,并且您设置了'label:'My Command',那么CK将呈现如下内容:

<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>

因此(假设您正在使用'kama'皮肤 - 如果没有替换你的皮肤),您可以使用以下CSS来覆盖cke_label ==&gt;显示:无

.cke_skin_kama .cke_button_myCommand .cke_label {
    display: inline;
}

瞧。

答案 1 :(得分:2)

这就是我做的。按钮看起来像这样:

<span class="cke_button">
    <a id="cke_..." class="cke_off cke_button_cmd" ...>
        <span class="cke_icon"/>
        <span class="cke_label">Label</span>
    </a>
</span>

.cke_label默认为“display:none”。这将完全符合我们的要求:

<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>

所以选择器有点棘手,用编辑器把它放在页面的样式标签上:

<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>

ckeditor的作者应用css来获取源按钮上的标签(presets.css):

/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
 display: inline;
}