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 :

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 le fichier 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 de 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 à cette publication

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.

Tests

<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

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.