SPA-Editor – Übersicht

Single Page Applications (SPAs) können ansprechende Erlebnisse für Website-Benutzer bieten. Entwickler möchten Sites mit SPA-Frameworks erstellen und Autoren möchten Inhalte in AEM nahtlos für eine Site bearbeiten, die mit diesen Frameworks erstellt wurde.

Der SPA-Editor bietet eine umfassende Lösung zur Unterstützung von SPAs in AEM. Auf dieser Seite finden Sie einen Überblick über die Unterstützung von SPA in AEM, die Funktionsweise des SPA-Editors und die Synchronisation des SPA-Frameworks und AEM.

Einführung

Sites, die mit gängigen SPA-Frameworks wie React und Angular erstellt wurden, laden ihren Inhalt über dynamisches JSON und weisen nicht die HTML-Struktur auf, die für den Seiteneditor von AEM erforderlich ist, um Steuerelemente zur Bearbeitung platzieren zu können.

Um die Bearbeitung von SPAs innerhalb von AEM zu ermöglichen, ist eine Zuordnung zwischen der JSON-Ausgabe der SPA und dem Inhaltsmodell im AEM-Repository erforderlich, damit Änderungen am Inhalt gespeichert werden können.

Mit der SPA-Unterstützung wird in AEM ein JS-Thin Layer eingeführt. Dieses interagiert mit dem SPA-JS-Code, wenn es in den Seiten-Editor geladen wird, mit dem Ereignisse gesendet und der Speicherort für die Steuerelemente zur Bearbeitung aktiviert werden kann, um eine kontextbezogene Bearbeitung zu ermöglichen. Diese Funktion baut auf dem Content Services API Endpoint-Konzept auf, da die Inhalte aus der SPA über Content Services geladen werden müssen.

Weitere Informationen zu SPAs in AEM finden Sie in den folgenden Dokumenten:

• SPA-Blueprint für die technischen Anforderungen an SPAs
• Einstieg in die Verwendung von SPAs in AEM für eine schnelle Übersicht über eine einfache SPA

Design

Die Seitenkomponente für eine SPA stellt die HTML-Elemente ihrer untergeordneten Komponenten nicht über die JSP- oder HTL-Datei bereit. Dieser Vorgang wird an das SPA-Framework delegiert. Die Darstellung der untergeordneten Komponenten oder von Modellen wird als JSON-Datenstruktur von JCR abgerufen. Die SPA-Komponenten werden dann entsprechend dieser Struktur zur Seite hinzugefügt. Durch dieses Verhalten unterscheidet sich die anfängliche Hauptteilkomposition der Seitenkomponente von entsprechenden Kompositionen, bei denen es sich nicht um SPA-Komponenten handelt.

Seitenmodellverwaltung

Die Auflösung und Verwaltung des Seitenmodells wird an eine bereitgestellte PageModel-Bibliothek delegiert. Die SPA muss die PageModel-Bibliothek verwenden, um vom SPA-Editor initialisiert und erstellt zu werden. Die PageModel-Bibliothek wird der AEM-Seitenkomponente indirekt über den NPM aem-react-editable-components bereitgestellt. Das Seitenmodell fungiert als Interpreter zwischen AEM und der SPA und muss daher immer vorhanden sein. Bei der Erstellung der Seite muss eine zusätzliche Bibliothek cq.authoring.pagemodel.messaging hinzugefügt werden, um die Kommunikation mit dem Seiteneditor zu ermöglichen.

Wenn die SPA-Seitenkomponente von der Seitenkernkomponente erbt, gibt es zwei Möglichkeiten, die Kategorie cq.authoring.pagemodel.messaging der Client-Bibliothek verfügbar zu machen:

• Wenn die Vorlage bearbeitbar ist, fügen Sie sie der Seitenrichtlinie hinzu.
• Oder fügen Sie die Kategorien mithilfe von customfooterlibs.html hinzu.

Für jede Ressource im exportierten Modell ordnet die SPA eine tatsächliche Komponente zu, die das Rendern durchführt. Das als JSON dargestellte Modell wird dann mithilfe der Komponentenzuordnungen innerhalb eines Containers gerendert.

Kommunikationsdatentyp

Wenn der Seite die Kategorie cq.authoring.pagemodel.messaging hinzugefügt wird, sendet sie eine Nachricht an den Seiteneditor, um den JSON-Kommunikationsdatentyp festzulegen. Wenn der Kommunikationsdatentyp auf JSON festgelegt ist, kommunizieren die GET-Anfragen mit den Endpunkten des Sling-Modells einer Komponente. Nach einer Aktualisierung im Seiteneditor wird die JSON-Repräsentation der aktualisierten Komponente an die PageModel-Bibliothek gesendet. Die PageModel-Bibliothek informiert dann die SPA über Aktualisierungen.

Workflow

Der Interaktionsfluss zwischen SPA und AEM lässt sich leichter verstehen, wenn der SPA-Editor als Vermittler zwischen den beiden betrachtet wird.

• Die Kommunikation zwischen dem Seiten-Editor und der SPA erfolgt über JSON statt über HTML.
• Der Seiten-Editor stellt die neueste Version des Seitenmodells für die SPA über die iFrame- und Messaging-API bereit.
• Der Seitenmodell-Manager informiert den Editor, dass er zur Bearbeitung bereit ist, und übergibt das Seitenmodell als JSON-Struktur.
• Der Editor verändert weder die DOM-Struktur der zu erstellenden Seite, noch greift er darauf zu, sondern stellt vielmehr das neueste Seitenmodell bereit.

Grundlegender SPA-Editor-Workflow

Unter Berücksichtigung der Schlüsselelemente des SPA-Editors erscheint der allgemeine Workflow zur Bearbeitung einer SPA in AEM für die Autorin bzw. den Autor wie folgt:

1. SPA-Editor wird geladen.
2. SPA wird in einen eigenen Frame geladen.
3. SPA fordert JSON-Inhalte an und rendert Komponenten Client-seitig.
4. SPA-Editor erkennt gerenderte Komponenten und generiert Überlagerungen.
5. Der Autor klickt auf die Überlagerung und zeigt die Bearbeitungssymbolleiste der Komponente an.
6. SPA-Editor setzt Bearbeitungen mit einer POST-Anfrage an den Server fort.
7. Der SPA-Editor fordert ein aktualisiertes JSON an den SPA-Editor an, das mit einem DOM-Ereignis an den SPA-Editor gesendet wird.
8. SPA rendert die betreffende Komponente erneut und aktualisiert ihr DOM.

Client-Server-Workflow zur Seitenbearbeitung

Dies ist ein detaillierterer Überblick über die Interaktion zwischen Client und Server beim Bearbeiten einer SPA.

1. Die SPA initialisiert sich selbst und fordert das Seitenmodell vom Sling Model Exporter an.

2. Der Sling Model Exporter fordert die Ressourcen, aus denen sich die Seite zusammensetzt, aus dem Repository an.

3. Das Repository gibt die Ressourcen zurück.

4. Der Sling Model Exporter gibt das Modell der Seite zurück.

5. Die SPA instanziiert ihre Komponenten auf Grundlage des Seitenmodells.

6. 6a Der Inhalt teilt dem Editor mit, dass er für das Authoring bereit ist.

   6b Der Seiten-Editor fordert die Konfigurationen für das Komponenten-Authoring an.

   6c Der Seiten-Editor empfängt die Konfigurationen.

7. Wenn der Autor eine Komponente bearbeitet, sendet der Seiteneditor eine Änderungsanfrage an das standardmäßige POST-Servlet.

8. Die Ressource wird im Repository aktualisiert.

9. Die aktualisierte Ressource wird für das POST-Servlet bereitgestellt.

10. Das standardmäßige POST-Servlet informiert den Seiteneditor darüber, dass die Ressource aktualisiert wurde.

11. Der Seiteneditor fordert das neue Seitenmodell an.

12. Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository angefordert.

13. Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository für den Sling Model Exporter bereitgestellt.

14. Das aktualisierte Seitenmodell wird an den Editor zurückgegeben.

15. Der Seiteneditor aktualisiert die Seitenmodellreferenz der SPA.

16. Die SPA aktualisiert ihre Komponenten auf der Grundlage der neuen Seitenmodellreferenz.

17. Die Komponentenkonfigurationen der Seiteneditoren werden aktualisiert.

    17a Die SPA signalisiert dem Seiteneditor, dass der Inhalt bereit ist.

    17b Der Seiteneditor stellt Komponentenkonfigurationen für die SPA bereit.

    17c Die SPA stellt aktualisierte Komponentenkonfigurationen bereit.

Authoring-Workflow

Dies ist ein detaillierterer Überblick, der sich auf das Autorenerlebnis konzentriert.

1. Die SPA ruft das Seitenmodell ab.

2. 2a Das Seitenmodell stellt die für das Authoring notwendigen Daten für den Editor bereit.

   2b Wenn der Komponenten-Orchestrator benachrichtigt wird, aktualisiert er die Inhaltsstruktur der Seite.

3. Der Komponenten-Orchestrator fragt die Zuordnung zwischen einem AEM-Ressourcentyp und einer SPA-Komponente ab.

4. Der Komponenten-Orchestrator instanziiert die SPA-Komponente dynamisch anhand des Seitenmodells und der Komponentenzuordnung.

5. Der Seiteneditor aktualisiert das Seitenmodell.

6. 6a Das Seitenmodell stellt die aktualisierten Authoring-Daten für den Seiteneditor bereit.

   6b Das Seitenmodell versendet Änderungen an den Komponenten-Orchestrator.

7. Der Komponenten-Orchestrator ruft die Komponentenzuordnung ab.

8. Der Komponenten-Orchestrator aktualisiert den Inhalt der Seite.

9. Wenn die SPA die Aktualisierung des Inhalts der Seite abgeschlossen hat, lädt der Seiteneditor die Authoring-Umgebung.

Anforderungen und Einschränkungen

Damit die Autorin bzw. der Autor den Seiteneditor zum Bearbeiten von Inhalten in einer SPA verwenden kann, muss die SPA für die Interaktion mit dem AEM SPA Editor SDK implementiert sein. Weitere Informationen, die Sie benötigen, um Ihre SPAs zum Laufen zu bringen, finden Sie im Dokument Erste Schritte mit SPAs in AEM.

Unterstützte Frameworks

Das SPA Editor SDK unterstützt die folgenden Mindestversionen:

• React 16.x und höher
• Angular 6.x und höher

Frühere Versionen dieser Frameworks funktionieren möglicherweise mit dem AEM SPA Editor SDK, werden jedoch nicht unterstützt.

Weitere Frameworks

Für die Arbeit mit dem AEM SPA Editor SDK können weitere SPA-Frameworks implementiert werden. Im Dokument SPA-Blueprint finden Sie Informationen zu den Anforderungen, die ein Framework erfüllen muss, um eine Framework-spezifische Ebene aus Modulen, Komponenten und Services zu erstellen, die mit dem SPA-Editor von AEM verwendet werden kann.

Verwenden mehrerer Selektoren

Zusätzliche benutzerdefinierte Selektoren können als Teil einer für das AEM SPA SDK entwickelten SPA definiert und verwendet werden. Diese Unterstützung erfordert jedoch, dass – entsprechend den Anforderungen des JSON Exporters – der model-Selektor der erste Selektor und .json die Erweiterung ist.

Anforderungen an den Texteditor

Wenn Sie den Editor einer Textkomponente verwenden möchten, die in der SPA erstellt wurde, ist eine zusätzliche Konfiguration erforderlich.

1. Legen Sie ein Attribut (das beliebig sein kann) für das Container-Wrapper-Element fest, das die Text-HTML enthält. Im Falle des WKND-Journal-Beispielinhalts ist dies ein <div>-Element und der verwendete Selektor ist data-rte-editelement.
2. Legen Sie die Konfiguration editElementQuery für die entsprechende AEM-Textkomponente cq:InplaceEditingConfig fest, die auf diesen Selektor verweist, z. B. data-rte-editelement. Dadurch weiß der Editor, welches HTML-Element den HTML-Text umschließt.

Ein Beispiel dafür finden Sie im WKND-Journal-Beispielinhalt.

Weitere Informationen zur editElementQuery-Eigenschaft und zur Konfiguration des Rich-Text-Editors finden Sie unter Konfigurieren des Rich-Text-Editors.

Beschränkungen

Das AEM SPA Editor SDK wurde mit AEM 6.4 Service Pack 2 eingeführt. Es wird von Adobe vollständig unterstützt und ständig verbessert und erweitert. Die folgenden AEM-Funktionen werden vom SPA-Editor noch nicht unterstützt:

• Zielmodus
• ContextHub
• Inline-Bildbearbeitung
• Konfigurationen bearbeiten (z. B. Listener)
• Rückgängig/Wiederholen
• Seitenvergleich und Zeitverzerrung
• Funktionen, die Server-seitig HTML-Umschreibungen durchführen, wie Link Checker, CDN-Umschreibe-Service, URL-Verkürzung usw.
• Entwicklermodus
• AEM-Launches

Ressourcen für Business.Adobe.com