Javascript Girl
  1. Javascript Girl
  3. Dans CKEditor, comment puis-je ajouter une étiquette "texte" à un bouton?
Intereting Posts
Cross Domain JavaScript paramètre de localisation par défaut firefox error Comment activer le script java dans le WebView JQuery .prop () retourne indéfini, tandis que .attr () fonctionne comme prévu pour les données- * Regex obtient tout le contenu entre deux caractères Comment puis-je récupérer le "texte" de la page en provenance de l'alerte, esp ** après ** l'utilisateur humain a * cliqué * sur l'alerte ** de la page **? Essayer d'exporter une classe en tant que module ES6 babel Veuillez recommander un plugin JQuery qui gère la détection de collision pour les éléments entraînables Est-il possible de manipuler un document SVG incorporé dans un document HTML avec JavaScript? Pas capable de gérer mes cas de test sur le rapporteur 2.5.1 et jasmine 1.3.1? Ajouter javascript / Jquery et le code côté client à Vaadin 7 D3js prennent les données d'un tableau au lieu d'un fichier MVC4 Beta Minification and Bundling: commande de fichiers et de débogage dans le navigateur Forcer une page spécifique à utiliser HTTPS avec angularjs Quelle est la différence entre removeProp et removeAttr dans JQuery 1.6? Le client Mongo ne peut pas accéder aux collections préfixées avec un trait de soulignement

Dans CKEditor, comment puis-je ajouter une étiquette "texte" à un bouton?

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

C'est mon code actuel en ce moment. Lorsque vous chargez la page, vous ne voyez que l'icône.

Mais si vous accédez à la démo ici , vous verrez que "Source" est un texte. Je veux ajouter le mot "Télécharger l'image" à côté de l'icône.

L'étiquette des boutons de la barre d'outils de CKeditor a une classe .cke_label qui a par défaut display:none pour que les boutons soient uniquement des icônes: 

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

Comme pour le bouton Source , vous devez utiliser CSS pour afficher votre étiquette.

Normalement, lors de la création du bouton CKeditor, ajoutez une classe comme .cke_button_CMDNAMEHERE où CMDNAMEHERE est le nom de votre commande. Donc, vous aurez: 

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

Vérifiez la source html pour voir le nom exact de la classe ajoutée et faites de votre règle CSS en conséquence.

Une autre solution serait d'utiliser simplement la pseudo-classe css ": avant" ou "après" pour ajouter du contenu personnalisé avant / après les boutons.

Par exemple, personnaliser le bouton "lien":

Créer un espace (dépend de la longueur du contenu): 

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

ajouter du contenu: 

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

Fonctionnera pour toutes les peaux, contrairement à la réponse ci-dessus (notez le double trait de soulignement entre les boutons et CMDNAMEHERE)

Vous pouvez le placer n'importe où dans votre propre css

Dans le ckeditor actuel (4.6.x), les réponses ci-dessus ne fonctionnent pas pour moi.

J'ai creusé dans ckeditor / skins / moono-list / editor.css et j'ai fait une recherche pour "source" pour trouver comment ils ont fait le bouton Source qui contient du texte. J'ai trouvé ça: 

 .cke_button__source_label, .cke_button__sourcedialog_label { display:inline }

Notez qu'il y a deux soulignements ici avant le nom de votre bouton personnalisé. Lorsque j'ai essayé avec un seul trait de soulignement, cela n'a pas fonctionné.

Quoi qu'il en soit, vous remplacerez "source" ou "sourcedialog" ci-dessus par ce que vous voulez et ajoutez cela à votre propre fichier css.

De plus, il semble fonctionner uniquement pour les noms de boutons entièrement minuscules .