5

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

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

你知道如何创建没有图标的工具栏按钮吗？纯文字而已。

4

2 回答 2

7

更简单的方法是 CKEditor 在您的自定义标签上自动创建一个 CSS 类：cke_button_<command>

例如，如果您对按钮的命令名为“myCommand”，并且您设置了“标签：“我的命令”，那么 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 ==> display:none

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

瞧。

于 2011-06-09T20:09:42.760 回答
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 Tag中：

<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;
}
于 2009-11-17T02:29:04.667 回答