Fügen Sie eine neue, benutzerdefiniert umsetzbare Schaltfläche in der Web-Beditor-Symbolleiste hinzu.
In diesem Artikel erfahren wir, wie Sie eine neue benutzerdefinierte Schaltfläche in der WebBeditor-Symbolleiste hinzufügen und JavaScript aufrufen, um den gewünschten benutzerdefinierten Vorgang auszuführen.
Das Hinzufügen einer umsetzbaren Schaltfläche zum Webserver umfasst die folgenden Schritte:
- Hinzufügen der Schaltfläche in der Datei ui_config.json an der Stelle, an der sie benötigt wird
- Registrieren des Klick-Ereignis auf der Schaltfläche im Webserver, damit der Benutzer beim Klicken eine Aktion ausführen kann
Implementieren anhand eines Beispiels
Sehen wir uns dazu ein Beispiel an, in dem ein Autor einen Jira-Verweis zu einem Themenprologabschnitt hinzufügen möchte. Der Prologabschnitt mit eingebetteter jira reference-id kann wie folgt aussehen:
Das Element "change-request-id", das die JIRA-ID enthält, sollte aus der API abgerufen werden (beispielsweise basierend auf einer bestimmten JIRA-Abfrage, die von der Anwendung dargestellt wird). Wenn der Benutzer den Prologabschnitt bearbeitet, sollte der Benutzer auf eine Schaltfläche klicken und eine jira-Referenz-ID aus der Symbolleiste des Web-Editors einfügen können, z. B.:
Wenn der Benutzer auf die Schaltfläche klickt, sollte ein Dialogfeld angezeigt werden, in dem die möglichen Optionen abgerufen werden und der Benutzer die gewünschte JIRA-ID auswählen kann, z. B.:
, das dann die "change-request-id"zum Prolog hinzufügen sollte:
Implementieren
Fügen Sie die Schaltfläche im Webserver hinzu, indem Sie sie in ui_config.json konfigurieren.
Verwenden Sie die Ordnerprofile, um die ui_config.json auf der Registerkarte "XML Editor Configuration"zu überprüfen und die Schaltflächenkonfiguration JSON zum gewünschten Abschnitt der Gruppe "toolbar"hinzuzufügen.
{
"on-click":"insertJIRARef",
"icon":"linkCheck",
"variant":"quiet",
"type":"button",
"title":"Insert JIRA Reference"
}
Verarbeiten des On-Click-Ereignisses für die neue Schaltfläche
HINWEIS: Die unten erwähnten Schritte sind als in diesem Beitrag angehängtes Paket verfügbar
- Erstellen Sie nach dem Speichern des Ordnerprofils einen "cq:ClientLibraryFolder"in einem Projektverzeichnis (möglicherweise unter /apps) und fügen Sie Eigenschaften hinzu, wie im folgenden Screenshot gezeigt:
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.
-
Erstellen Sie unter diesem Client-Bibliotheksordner zwei Dateien, wie unten erwähnt:
- overrides.js: , der über den JavaScript-Code verfügt, der das On-Click-Ereignis für "insertJIRARef"verarbeitet (verwenden Sie das angehängte Paket, um den Inhalt dieses JavaScripts zu erhalten)
- js.txt: enthält die Datei "overrides.js", um dieses JavaScript zu aktivieren
-
Speichern Sie die Änderungen und Sie sollten bereit zum Testen sein.
Testen
- Öffnen Sie den Web-Editor
- Wählen Sie in den Benutzereinstellungen das Ordnerprofil aus, in dem Sie die benutzerdefinierte Datei ui_config.json hinzugefügt haben. Wenn Sie es zum Profil Global hinzugefügt haben, verwenden Sie es wahrscheinlich bereits.
- Öffnen Sie ein Thema. Sie werden feststellen, dass die Symbolleiste über eine neue Schaltfläche "Jira-Referenz einfügen"verfügt.
- Sie können dann den Prologabschnitt wie unten angegeben zum Thema hinzufügen und versuchen, auf die Schaltfläche "Jira-Referenz einfügen"im Prologelement "change-request-reference"zu klicken
<prolog>
<change-historylist>
<change-item>
<change-request-reference>
</change-request-reference>
<change-completed></change-completed>
<change-summary></change-summary>
</change-item>
</change-historylist>
</prolog>
Im folgenden Screenshot erfahren Sie, wie er aussehen wird:
Anhänge
- Beispiel-clientlibs-Paket, das die Webserver-Client-Bibliothek mit JavaScript-Code für die Symbolleisten-Schaltflächenaktion installiert: Download mit diesem Link
- Beispiel ui_config.json , das Sie in ein Ordnerprofil hochladen können: Download-Beispiel 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.