Cómo crear botón sin icono en CKEditor

Question

Cuando creo en el botón de la barra con CKEditor 3.0 siguiente código Necesito propiedad icon uncomment para obtener el botón sea visible. De lo contrario espacio está ocupado pero sin etiqueta se muestra. Cuando pasa sobre ella llego epígrafe apareciendo.

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

¿Sabe usted cómo crear botón de la barra sin icono? Sólo un texto puro.

Answer 1

Una forma más fácil es que CKEditor crea una clase CSS en la etiqueta personalizada llamada de forma automática: cke_button_

Por ejemplo, si su comando para el botón se llama 'myCommand', y se establece 'la etiqueta: 'Mi Comando', entonces CK haría algo como:

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

Por lo tanto (suponiendo que está utilizando el 'Kama' piel - sustituto de la piel si no), puede utilizar el siguiente CSS para anular el cke_label ==> display: none

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

Voila.

Answer 2

Esta es la forma en que lo hice. Un botón es el siguiente:

<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 es de estilo "display: none" por defecto. Esto haría exactamente lo que queremos:

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

Así que los selectores son un poco complicado, poner esto en la etiqueta de estilo en la página con el 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>

Los autores ckeditor CSS aplicados para obtener la etiqueta en el botón de fuente (presets.css):

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