Cómo crear un botón sin icono en CKEditor

Question

Cuando creo el botón de la barra de herramientas en CKEditor 3.0 con el siguiente código, necesito descomentar la propiedad del icono para que aparezca el botón. De lo contrario, el espacio está ocupado pero no se muestra ninguna etiqueta. Cuando lo cierro sobre él aparece la leyenda.

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

¿Sabes cómo crear el botón de la barra de herramientas sin el icono? Solo un texto puro.

Answer 1

una forma más fácil es que CKEditor crea una clase CSS en la etiqueta personalizada llamada automáticamente: cke_button_ <comando>

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 está utilizando la piel 'Kama' - 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

Así es como lo hice. Un botón se ve así:

<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 tiene el estilo "display: none" de forma predeterminada. 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 aplicado 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; 
}