Wie man Knopf ohne Ikone in CKEditor

Question

erzeugt Wenn ich Werkzeugkastenknopf in CKEditor 3.0 mit dem folgenden Code verursache, muss ich Symboleigenschaft auskommentieren, um button sichtbar zu erhalten. Ansonsten ist Platz belegt, aber es wird kein Etikett angezeigt. Wenn ich darüber schwebe, erscheint eine Bildunterschrift.

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

Wissen Sie, wie Sie Symbolleistenschaltfläche ohne Symbol erstellen? Nur ein reiner Text.

Answer 1

eine einfachere Möglichkeit ist, dass CKEditor eine CSS-Klasse auf Ihrem benutzerdefiniertes Etikett erstellt automatisch aufgerufen: cke_button_ <Befehl>

Zum Beispiel, wenn Ihr Befehl für die Schaltfläche aufgerufen wurde 'myCommand', und Sie setzen ‚label: 'My Command', dann würde CK etwas wie machen:

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

daher (unter der Annahme, Sie werden mit dem ‚kama‘ Haut - Ersatz für die Haut, wenn nicht), können Sie das folgende CSS verwenden, um die cke_label ==> Anzeige außer Kraft zu setzen: keine

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

Voila.

Answer 2

So habe ich es gemacht. Eine Schaltfläche sieht so aus:

<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 wird standardmäßig "display: none" formatiert. Dies würde genau das tun, was wir wollen:

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

So die Wähler ein bisschen schwierig sind, setzen Sie diese in dem Style-Tag auf der Seite mit dem Editor:

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

Die ckeditor Autoren angewandt CSS zu erhalten das Etikett auf der Source-Taste (presets.css):

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