Jak utworzyć przycisk bez ikony w CKEditor

Question

Kiedy tworzę przycisk paska narzędzi w CKEditor 3.0 z następującym kodem, muszę odkomentować właściwość ikony, aby przycisk był widoczny. W przeciwnym razie miejsce jest zajęte, ale nie jest wyświetlana żadna etykieta. Po najechaniu na niego pojawia się napis.

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

Czy wiesz, jak utworzyć przycisk paska narzędzi bez ikony? Tylko czysty tekst.

Answer 1

łatwiejszy sposób, że CKEditor tworzy klasę CSS na niestandardowej etykiety automatycznie nazwie: cke_button_ <komenda>

Na przykład, jeśli polecenie przycisku nazwano „MyCommand” i ustawić „etykiecie:«mój rozkaz», następnie CK czyniłoby coś takiego:

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

Dlatego (przy założeniu, używasz 'kama' skórę - substytut dla skóry czy nie), można użyć następującego CSS przesłonić cke_label ==> display: none

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

Voila.

Answer 2

Tak to zrobiłem. Przycisk wygląda następująco:

<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 jest domyślnie oznaczony jako "display: none". To zrobi dokładnie to, co chcemy:

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

Więc selektory są nieco skomplikowane, umieścić to w stylu Tag na stronie z edytorem:

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

Autorzy CKEditor stosowane css, aby uzyskać etykieta na przycisku źródłowego (presets.css):

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