So erstellen Schaltfläche ohne Symbol in CKEditor

Question

Wenn ich Symbolleiste auf die Schaltfläche in CKEditor 3.0 mit folgenden Code erstellen muss ich uncomment Symbol Eigenschaft Schaltfläche sichtbar erhalten. Ansonsten Platz besetzt ist, aber kein Etikett dargestellt ist. Wenn ich den Mauszeiger über sie ich caption Aufspringen.

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

Sie wissen, wie man ohne Symbol Symbolleiste auf die Schaltfläche 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_

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

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

Daher (vorausgesetzt, Sie sind mit dem ‚kama‘ Haut - Ersatz für die Haut, wenn nicht), können Sie das folgende CSS verwenden, um die cke_label außer Kraft zu setzen ==> display: none

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

Voila.

Answer 2

Dies ist, wie ich es tat. Eine Schaltfläche sieht wie folgt 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>

„: Keine Anzeige“ standardmäßig

.cke_label harmoniert. 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 das Etikett auf der Source-Taste, um (presets.css):

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