Le plugin Rte Color Picker pour AEM

L’éditeur de texte riche (communément appelé RTE) Adobe Experience Manager (AEM) est un excellent outil pour créer le texte sur la page, mais il n’a pas de plugin de séjour de couleur (OOTB) (OOTB). Il existe peu de solutions personnalisées disponibles sur Internet, cependant, elles conduisent souvent aux frustrations communes suivantes:

1. Il est temps de charger la boîte de dialogue.
2. Plusieurs clics pour appliquer la couleur.
3. Incohérence avec d’autres applications.

Alors, approfondissons une solution personnalisée pour intégrer un plugin de palette de couleurs dans RTE pour réduire (adresse) les défis décrits ci-dessus.

Palette de sélecteur de couleurs RTE personnalisé

Étapes pour implémenter la palette de couleurs personnalisée dans AEM

Tout d’abord, téléchargeons le emballer.

Vous pouvez soit installer le package téléchargé à partir du gestionnaire de packages CRX et passer aux étapes mentionnées dans la section 2, soit la décompresser pour continuer avec les étapes ci-dessous, puis passer aux étapes de la section 2.

Une fois le package téléchargé installé ou dézippé avec succès, il aura les fichiers suivants:
1. Color-Picker.css
2. Color-Picker.js
3. CSS.TXT
4. JS.TXT

Fichiers de plugin Rte Color Picker

Les étapes sont divisées en deux sections. Ici, dans la section 1, le plugin est développé en étendant la classe de boîte Qui.rte.plugins.plugin, tandis que la section 2 concerne davantage les étapes courantes à suivre pour ajouter un plugin disponible à la barre d’outils du composant RTE.

Section 1: – Créez une bibliothèque client pour le plugin de sélecteur de couleurs

1.1 Tout d’abord, créez une bibliothèque client avec la catégorie cq.authoring.dialog.all comme indiqué ci-dessus. (Vous voulez raccourcir la portée? Donnez à la bibliothèque client un nom personnalisé et ajoutez ce nom au extra-clientlibs propriété du composant souhaité.)

1.2 Maintenant, créez un fichier JavaScript dans la même bibliothèque client et collez le code à partir de / apps / rte-color-picker /ClientLib / Color-Picker.js.

1.3 Selon la norme, créez un fichier JS.TXT et ajoutez le nom de fichier JavaScript créé à l’étape 1.2 JS.TXT. (Comme le fichier JS est créé directement dans le dossier ClientLib, il n’est donc pas nécessaire de définir la base)

1.4 De même, créez un fichier CSS à l’intérieur de la bibliothèque client pour mettre le style de palette de couleurs et coller le code à partir de / apps / rte-color-picker /ClientLib / Color-Picker.css.

1.5 Créez un fichier CSS.TXT sous le dossier de la bibliothèque client et ajoutez le nom de fichier CSS créé à l’étape 1.4 pour css.txt.

Section 2: – Configurez le plugin de séjour de pic de couleur dans le composant RTE

Suivons les étapes ci-dessous pour configurer le plugin du composant. Vous pouvez référer la documentation d’Adobe en cliquant sur le lien présent dans la section de référence pour plus de détails.

2.1 Accédez à la rteplugins Nœud du composant de texte, par exemple, / apps / ttnretail / composants / text / cq: dialogue / contenu / items / onglets / items / properties / items / colonnes / items / colonne / items / text / rteplugins.

Créer un nœud nommé « rte-coulor-picker”De type primaire NT: non structuré. Ajouter une propriété appelée caractéristiques de type chaîne avec la valeur *.

Node de plugin AEM RTE

2.2 Maintenant, accédez au «en ligne”Node sous détachetscomme indiqué ci-dessous.

Nœud en ligne AEM RTE

2.3 Double-cliquez sur la propriété des barres d’outils, qui affichera une fenêtre contextuelle comme indiqué ci-dessous. Cliquez sur le bouton Plus (+) et ajouter RTE-Color-Picker # ColorPicker. Cliquez ensuite sur «OK» et enregistrez les modifications.

Modifier le nœud en ligne de la barre d’outils

2.4 (Éventuellement) ajouter ce plugin au écran de dialogue noeud aussi, si nécessaire dans maximiser mode. Accédez au nœud de plugin à l’intérieur de DialogfullScreen (si le nœud n’est pas présent, prenez une référence du composant de texte OOTB pour créer (superposition) DialogfullScreen sous UiSettings / CUI).

écran de dialogue

2.5 Ajoutez la catégorie de la bibliothèque client à la extraclientlibs propriété du composant (facultatif: uniquement si un nom de bibliothèque client personnalisé a été donné au lieu de cq.authoring.dialog.all en étape 1.1).

Résultat:

Assurez-vous simplement d’enregistrer toutes les modifications après chaque étape.

Maintenant, faisons en sorte que le composant RTE sur n’importe quelle page pour vérifier le plugin de sélecteur de couleurs. Sélectionnez d’abord du texte dans le RTE, puis cliquez sur l’icône du plugin, il affichera la palette avec les couleurs spécifiées dans le fichier JavaScript à la ligne numéro 7 du fichier colore-Picker.js

Cueilleur de couleurs RTE

Note:

je. Félicitations!, Le plugin est testé. Maintenant, il est temps de Personnalisez les couleurs affiché dans la palette qui peut être spécifique au projet, accédez à ligne 7 de la color-picker.js fichier et modifier les valeurs du tableau (ajouter ou supprimer les codes de couleur hexadécimal selon les besoins) comme mis en évidence dans l’image ci-dessous.

RTE Color Pciker JS

ii Enfin et surtout, n’oubliez pas d’ajouter le Guidon Dépendance Si le plan est de l’utiliser dans un fragment d’expérience.

N’hésitez pas à envisager la personnalisation et l’optimisation de cette solution afin qu’il réponde à vos besoins pour rationaliser le processus de sélection des couleurs et améliorer l’efficacité de la création de contenu.

Référence

https://experienceeague.adobe.com/en/docs/experence-manager-65/content/sites/administering/operations/configure-rich-text-editor-plug-ins

Vous avez trouvé cela utile? PARTAGEZ-LE