如何在CKEditor中创建不带图标的按钮

当我使用以下代码在CKEditor 3.0中创建工具栏按钮时，我需要取消注释图标属性以使按钮可见。否则占用空间，但不显示标签。当我将鼠标悬停在上面时，我会看到字幕出现。如何在CKEditor中创建不带图标的按钮

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

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

来源

2009-11-08 Michal Sznajder

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

例如，如果你的按钮命令被称为“mycommand的”，并设置“标签：‘我的命令’，然后CK将使类似：

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

因此（假设您正在使用的“卡马”皮肤 - 代替你的皮肤如果不），你可以使用下面的CSS覆盖cke_label ==>显示：无

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

瞧。

来源

2011-06-09 20:09:42 Neromancer

由于某种原因，我不得不使用！important（可能是由于更新版本的cke？） – 2011-06-22 16:29:11

这就是我做到的。一个按钮如下所示：

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

来源

2009-11-17 02:29:04

如何在CKEditor中创建不带图标的按钮

回答

相关问题