Nieuwe aangepaste actieknop toevoegen op de werkbalk Webeditor
In dit artikel leren wij hoe een nieuwe douaneknoop in webeditor toolbar toevoegen en javascript roepen om gewenste douaneverrichting uit te voeren.
Het toevoegen van een actioneerbare knoop aan webeditor omvat het volgende stappen:
- De knop toevoegen in het dialoogvenster ui_config.json op de plaats waar dat nodig is
- De klikgebeurtenis van de knoop in webeditor registreren voor gebruiker om een actie uit te voeren wanneer zij het klikken
Implementeren door een voorbeeld te nemen
Laten we dit begrijpen met een voorbeeld waarin een auteur een jira-verwijzing wil toevoegen aan een sectie met een onderwerp-proloog. De proloog sectie met ingebedde jira verwijzing-identiteitskaart kan als hieronder kijken:
Het element 'change-request-id' dat de JIRA-id bevat, moet worden opgehaald uit de API (laat bijvoorbeeld gebaseerd op een specifieke JIRA-query die door de toepassing wordt weergegeven). Wanneer de gebruiker de proloog sectie creeert, zou de gebruiker een knoop moeten kunnen klikken en jira verwijzings identiteitskaart van Web-redacteursttoolbar opnemen, iets als:
En wanneer de gebruiker op de knop klikt, moet er een dialoogvenster worden weergegeven waarin de mogelijke opties worden weergegeven en de gebruiker de gewenste JIRA-id kan selecteren, bijvoorbeeld:
die vervolgens de "change-request-id" aan de blog moet toevoegen:
Dit implementeren
Voeg de knoop in webeditor toe door het binnen te vormen ui_config.json
Gebruik de mapprofielen om de ui_config.json onder het tabblad "XML Editor Configuration" en voegt u de knopconfiguratie JSON toe aan het gewenste gedeelte van de groep "toolbar"
{
"on-click":"insertJIRARef",
"icon":"linkCheck",
"variant":"quiet",
"type":"button",
"title":"Insert JIRA Reference"
}
De klikgebeurtenis voor de nieuwe knop afhandelen
OPMERKING: de hieronder vermelde stappen zijn beschikbaar als pakket dat in dit bericht is bijgevoegd
- Nadat u het mapprofiel hebt opgeslagen, maakt u een "cq:ClientLibraryFolder" onder een projectmap (mogelijk onder /apps) en voegt eigenschappen toe, zoals in de onderstaande schermafbeelding wordt getoond:
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.
-
Maak onder deze clientbibliotheekmap twee bestanden, zoals hieronder wordt vermeld:
- overrides.js: deze bevat de javascript-code voor het afhandelen van de klikgebeurtenis voor "insertJIRARef" (gebruik het bijgevoegde pakket voor het ophalen van de inhoud van dit JavaScript)
- js.txt: die de eigenschap "overrides.js" bevat om dit javascript in te schakelen
-
Sla de wijzigingen op en u bent klaar om deze te testen.
Testen
- Webeditor openen
- Kies in de gebruikersvoorkeuren het mapprofiel waarin u de aangepaste ui_config.json. Als u het aan het Globale profiel toevoegt, dan gebruikt u waarschijnlijk reeds dat.
- Open een onderwerp, u zult merken dat de toolbar een nieuwe knoop "de Verwijzing van Jira van het Tussenvoegsel"heeft
- Vervolgens kunt u de sectie prolog toevoegen zoals hieronder aan het onderwerp wordt gegeven en vervolgens klikken in de knop Jira-verwijzing invoegen in het prologelement "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>
Zie onderstaande screenshot voor een uitleg van hoe deze eruitziet:
Bijlagen
- Voorbeeldclientlibs-pakket waarmee de clientbibliotheek van de webeditor wordt geïnstalleerd met javascript-code voor knopactie op de werkbalk: downloaden met deze koppeling
- Monster ui_config.json die u kunt uploaden naar een mapprofiel: voorbeeldbestand ui_config.json downloaden
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.