如何在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中創建不帶圖標的按鈕

回答

相關問題