Comment créer un bouton sans icône dans CKEditor

Question

Lorsque je crée un bouton de barre d'outils dans CKEditor 3.0 avec le code suivant, je dois décommenter la propriété d'icône pour obtenir le bouton visible. Sinon, l'espace est occupé mais aucune étiquette n'est affichée. Quand je passe la souris dessus, j'obtiens une légende.

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

Savez-vous comment créer un bouton de barre d'outils sans icône? Juste un texte pur.

Answer 1

un moyen plus facile est que CKEditor crée une classe CSS sur votre étiquette personnalisée appelée automatiquement: cke_button_ <commande>

Par exemple, si votre commande pour le bouton a été appelé « myCommand », et que vous définissez « étiquette: « Mon commandement », alors CK rendrait quelque chose comme:

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

Par conséquent (en supposant vous utilisez la peau 'kama' - remplacer votre peau sinon), vous pouvez utiliser le CSS suivant pour remplacer le cke_label ==> display: none

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

Voila.

Answer 2

Voici comment je l'ai fait. Un bouton ressemble à ceci:

<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 est appelé "display: none" par défaut. Cela ferait exactement ce que nous voulons:

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

Ainsi, les sélectionneurs sont un peu délicat, mettre cela dans la balise style sur la page avec l'éditeur:

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

Les auteurs ckeditor appliqués css pour obtenir l'étiquette sur le bouton source (presets.css):

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