En CKEditor, ¿cómo puedo agregar una etiqueta de "texto" a un botón?

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

Ese es mi código actual en este momento. Cuando carga la página, solo ve el ícono.En CKEditor, ¿cómo puedo agregar una etiqueta de "texto" a un botón?

Pero si vas a la demo here, verás que "Fuente" es un texto. Quiero agregar la palabra "Subir imagen" al lado del ícono.

Fuente

2011-12-13 user847495

I html que pondría el texto entre las etiquetas de los botones ' '. Sin embargo, no estoy seguro acerca de cómo hacer eso en CKEditor. – Kyle

La etiqueta de botones de la barra CKeditor tienen una clase .cke_label que tiene por defecto display:none para que los botones son icono de sólo:

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

Al igual que para el botón Fuente , usted tiene que utilizar CSS para mostrar tu etiqueta

Normalmente cuando se crea el CKeditor botón de añadir una clase como .cke_button_CMDNAMEHERE donde CMDNAMEHERE ser el nombre de su comando. Por lo que tendrá:

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

Comprobar el código HTML para ver el nombre exacto de la clase añadido y hacer que su regla CSS en consecuencia.

Fuente

2011-12-13 09:58:57

¿Dónde está el archivo css para editar dicha clase? –

Supongo que en la carpeta ckeditor. Pero no debe editar este archivo, de lo contrario no funcionará más si actualiza su instalación de ckeditor y olvida volver a cambiar el CSS. Anule esto en el css de su sitio web. –

Encontré el archivo ubicado en ckeditor/skin/kama/editor.css. Después de editar el archivo, funcionó. Pero acepto agregar mi propio CSS en su lugar, jaja. Por cierto, muchas gracias, Didier. ^^ –

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
}

funcionará para todas las pieles, a diferencia de la respuesta anterior (nótese el doble guión entre los botones y CMDNAMEHERE)

se puede colocar en cualquier lugar en su propio CSS

Fuente

2012-09-10 15:19:39 mordy

Para ckeditor 4 tienes que usar: .cke_button_label.cke_button__CMDNAMEHERE_label { display: inline; } –

otra solución sería simplemente utilice la pseudoclase css ": before" o ": after" para agregar contenido personalizado antes/después de los botones.

por ejemplo, personalizar el botón "link":

crear algo de espacio (depende de la duración de contenido):

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

añadir contenido:

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

Fuente

2013-03-08 18:30:33 mario

En el CKEditor actual (4.6.x) las respuestas anteriores no funcionan para mí.

Busqué en ckeditor/skins/moono-list/editor.css e hice una búsqueda de "fuente" para ver cómo funcionaba el botón Fuente que tiene texto. Encontré esto:

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
}

Observe que hay DOS guiones bajos aquí antes del nombre de su botón personalizado. Cuando lo intenté con solo un guión bajo no funcionó.

De todos modos, debería reemplazar "fuente" o "sourcedialog" arriba con lo que desee y agregar eso a su propio archivo css.

Además, parece que solo funciona para nombres de botones que son en minúscula.

Fuente

2017-06-05 20:55:21

En CKEditor, ¿cómo puedo agregar una etiqueta de "texto" a un botón?

Respuesta

Cuestiones relacionadas