In CKEditor, come posso aggiungere un'etichetta "testo" a un pulsante?

editor.ui.addButton('ImageUpload',{ 
       label: 'Upload Image', 
       command: 'popup_image_uploader', 
       icon: this.path + 'images/icon.png' 
      });

Questo è il mio codice corrente adesso. Quando carichi la pagina, vedi solo l'icona.In CKEditor, come posso aggiungere un'etichetta "testo" a un pulsante?

Ma se vai alla demo here, vedrai che "Source" è un testo. Voglio aggiungere la parola "Carica immagine" accanto all'icona.

fonte

2011-12-13 user847495

Mi piacerebbe inserire il testo tra i tag button ''. Non sono sicuro di come farlo in CKEditor. – Kyle

L'etichetta per i pulsanti della barra degli strumenti CKEditor avere una classe .cke_label che ha per default display:none modo che i pulsanti sono solo-icona:

.cke_skin_kama .cke_button .cke_label { 
    ... 
    display: none; 
    ... 
}

Come per il pulsante Fonte, è necessario utilizzare i CSS per mostrare la tua etichetta.

Normalmente quando si crea il pulsante CKEditor aggiungere una classe come .cke_button_CMDNAMEHERE dove CMDNAMEHERE è il nome del vostro comando. Così avrete:

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

Controllare la sorgente html per vedere il nome esatto della classe aggiunto e rendere la vostra regola CSS di conseguenza.

fonte

2011-12-13 09:58:57

Dov'è il file css per modificare tale classe? –

Nella cartella ckeditor suppongo. Ma non dovresti modificare questo file altrimenti non funzionerà più se aggiorni l'installazione del ckeditor e dimentichi di cambiare nuovamente il css. Sovrascrivi questo nel css del tuo sito web. –

Ho trovato il file che si trova in ckeditor/skin/kama/editor.css. Dopo aver modificato il file, ha funzionato. Ma accetto di aggiungere il mio css, haha. A proposito, grazie mille Didier. ^^ –

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
}

funzionerà per tutte le pelli, a differenza della risposta di cui sopra (si noti la doppia sottolineatura tra i pulsanti e CMDNAMEHERE)

è possibile inserire ovunque nel proprio css

fonte

2012-09-10 15:19:39 mordy

Per ckeditor 4 è necessario utilizzare: .cke_button_label.cke_button__CMDNAMEHERE_label { display: inline; } –

un'altra soluzione potrebbe essere quella di solo usa il css ": before" o ": after" pseudo classe per aggiungere del contenuto personalizzato prima/dopo i pulsanti.

per esempio, personalizzare il pulsante "link":

creare uno spazio (dipende dalla durata del contenuto):

.cke_button_icon.cke_button__link_icon { 
padding-right: 25px; 
}

aggiungere contenuti:

.cke_button_icon.cke_button__link_icon:after { 
content: "Link"; 
position: relative; 
left: 15px; 
}

fonte

2013-03-08 18:30:33 mario

Nel ckeditor corrente (4.6.x) le risposte sopra non funzionano per me.

Ho cercato in ckeditor/skins/moono-list/editor.css e ho cercato "source" per trovare il modo in cui hanno fatto il pulsante Source che contiene testo. Ho trovato questo:

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
}

Si noti che ci sono DUE caratteri di sottolineatura qui prima del nome del pulsante personalizzato. Quando ho provato con un solo underscore non ha funzionato.

In ogni caso sostituirai "source" o "sourcedialog" con quello che vuoi e lo aggiungerai al tuo file css.

Inoltre, sembra funzionare solo per i nomi dei pulsanti che sono interamente in minuscolo.

fonte

2017-06-05 20:55:21

In CKEditor, come posso aggiungere un'etichetta "testo" a un pulsante?

risposta

Problemi correlati