Je voudrais ajouter un bouton de barre d'outils à CKEditor qui affiche la couleur actuelle de la sélection. Est-ce possible?CKEditor - Afficher la couleur actuelle sur le bouton de la barre d'outils
Jusqu'ici, j'ai réussi à ajouter un nouveau bouton de barre d'outils en suivant ce tutorial et le plugin colorbutton, mais je ne trouve aucun exemple de bouton de barre d'outils avec une présentation dynamique.
Vous pouvez utiliser une image transparente pour le bouton et définir la couleur d'arrière-plan de la plage de boutons dans la fonctionnalité de vos plugins.
Il semble qu'il soit plus facile d'obtenir cette plage en recherchant la balise d'ancrage avec le titre que vous avez affecté (l'info-bulle), puis de définir la couleur d'arrière-plan de la plage enfant avec id=cke_icon. Voici à quoi ressemble le code HTML de l'un de mes boutons, le nom du plugin particulier que le bouton appelle n'est pas utilisé, ses fonctions sont affectées de numéros de fonction variables, donc le nom du plugin n'est pas disponible:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
Ce sera une bonne quantité de travail si vous voulez déterminer la couleur à chaque fois que l'utilisateur sélectionne une partie de la zone de contenu, car ils peuvent sélectionner plusieurs éléments avec de multiples couleurs. Même s'ils cliquent simplement dans la zone de contenu, vous devrez peut-être remonter l'arborescence DOM pour trouver l'élément dont hérite la position du curseur. J'ai aidé avec un plugin pour une autre question qui avait un objectif différent, mais cela impliquait un tir à chaque fois qu'une sélection était faite, créant un objet basé sur la sélection, et remontant l'arborescence DOM pour regarder la classe assignée à les éléments. Vous pourrez peut-être modifier pour l'adapter à vos objectifs:
How to block editing on certain part of content in CKEDITOR textarea?