Ajout d’un bouton interactif personnalisé dans la barre d’outils de l’éditeur de webeans
Dans cet article, nous allons apprendre comment ajouter un nouveau bouton personnalisé dans la barre d’outils de l’éditeur de weeter et appeler javascript pour effectuer l’opération personnalisée souhaitée.
L’ajout d’un bouton exploitable à l’éditeur Web implique les étapes suivantes :
- Ajouter le bouton dans le ui_config.json à l’emplacement où elle est nécessaire ;
- Enregistrement de l’événement "onclick" de bouton dans l’éditeur web pour que l’utilisateur effectue une action lorsqu’il clique dessus.
Mise en oeuvre en prenant un exemple
Comprenons cela avec un exemple où un auteur souhaite ajouter une référence jira à une section de prolog de rubrique. La section prolog avec l’ID de référence jira incorporé peut se présenter comme suit :
L’élément "change-request-id" qui contient l’identifiant JIRA doit être récupéré à partir de l’API (par exemple, en fonction d’une requête JIRA spécifique qui est représentée par l’application). Lorsque l’utilisateur crée la section prolog, il doit pouvoir cliquer sur un bouton et insérer un identifiant de référence jira dans la barre d’outils de l’éditeur web, par exemple :
Lorsque l’utilisateur clique sur le bouton, une boîte de dialogue s’affiche. Celle-ci doit extraire les options possibles et permettre à l’utilisateur de sélectionner l’identifiant JIRA souhaité, par exemple :
qui doit ensuite ajouter "change-request-id" au prolog :
Implémenter
Ajoutez le bouton dans l’éditeur Web en le configurant dans ui_config.json
Utilisez les profils de dossier pour vérifier la variable ui_config.json sous l’onglet "Configuration de l’éditeur XML" et ajoutez la configuration de bouton JSON dans la section souhaitée du groupe "barre d’outils".
{
"on-click":"insertJIRARef",
"icon":"linkCheck",
"variant":"quiet",
"type":"button",
"title":"Insert JIRA Reference"
}
utilisez ce lien pour en savoir plus sur le profil du dossier et la configuration ui_config.json
Gérer l’événement "onclick" pour le nouveau bouton
REMARQUE : Les étapes mentionnées ci-dessous sont disponibles sous forme de package joint à ce billet.
- Après avoir enregistré le profil de dossier, créez un "cq:ClientLibraryFolder" sous un répertoire de projet (sous /apps) et ajoutez des propriétés comme illustré dans la capture d’écran ci-dessous :
This example uses "coralui3" library to show a dialog as it is used in the Javascript sample we presented.
You may use different library of your choice.
-
Sous ce dossier de bibliothèque cliente, créez deux fichiers comme indiqué ci-dessous :
- overrides.js: qui aura le code javascript pour gérer l’événement "insertJIRARef" en cas de clic (utiliser le package joint pour obtenir le contenu de ce javascript).
- js.txt: inclut le fichier "overrides.js" pour activer ce JavaScript.
-
Enregistrez les modifications et vous devriez être prêt à les tester.
Tests
- Ouvrir l’éditeur web
- Dans les préférences de l’utilisateur, sélectionnez le profil de dossier dans lequel vous avez ajouté le profil personnalisé ui_config.json. Si vous l’avez ajouté au profil Global, vous l’utilisez probablement déjà.
- Ouvrez une rubrique, vous remarquerez que la barre d’outils comporte un nouveau bouton "Insérer une référence Jira".
- Vous pouvez ensuite ajouter la section prolog comme indiqué ci-dessous à la rubrique et essayer de cliquer sur le bouton "Insérer une référence Jira" à l’intérieur de l’élément prolog "change-request-reference".
<prolog>
<change-historylist>
<change-item>
<change-request-reference>
</change-request-reference>
<change-completed></change-completed>
<change-summary></change-summary>
</change-item>
</change-historylist>
</prolog>
Reportez-vous à la capture d’écran ci-dessous pour savoir à quoi elle ressemblera :
Pièces jointes
- Exemple de package clientlibs qui installera la bibliothèque cliente webeditor avec du code JavaScript pour l’action de bouton de barre d’outils : télécharger à partir de ce lien
- Exemple ui_config.json que vous pouvez charger vers un profil de dossier : téléchargement de l’exemple ui_config.json
Please note this is compatible to AEM 6.5 and AEM Guides version 4.2.
If you are using a different version please add the toolbar button to the ui_config.json manually.