DokumentationAEM 6.5Benutzerhandbuch

Der universelle Editor universal-editor

Last update: Thu Dec 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Entwickler

Erfahren Sie mehr über die Flexibilität des universellen Editors und wie er Ihre Headless-Erlebnisse mit AEM 6.5 unterstützen kann.

Überblick overview

Der universelle Editor ist ein vielseitiger visueller Editor, der Teil von Adobe Experience Manager Sites ist. Damit können Autorinnen und Autoren jedes Headless-Erlebnisses in WYSIWYG (What you see is what you get) bearbeiten.

  • Autorinnen und Autoren profitieren von der Flexibilität des universellen Editors, da er dieselbe konsistente visuelle Bearbeitung für alle Formen von AEM-Headless-Inhalten unterstützt.
  • Entwickler profitieren von der Vielseitigkeit des universellen Editors, da er auch die echte Entkopplung der Implementierung unterstützt. Es ermöglicht Entwicklern die Verwendung praktisch jedes Frameworks oder jeder Architektur ihrer Wahl, ohne dass SDK- oder Technologiebeschränkungen auferlegt werden.

Weitere Informationen finden Sie in der Dokumentation zu AEM as a Cloud Serviceuniversellen Editor.

Architektur architecture

Der universelle Editor ist ein Service, der mit AEM zusammenarbeitet, um Inhalte „headless“ zu erstellen.

  • Der universelle Editor befindet sich unter https://experience.adobe.com/#/aem/editor/canvas und kann Seiten bearbeiten, die von AEM 6.5 gerendert werden.
  • Die AEM-Seite wird vom universellen Editor über den Dispatcher aus der AEM-Autoreninstanz gelesen.
  • Der universelle Editor-Dienst, der auf demselben Host wie Dispatcher ausgeführt wird, schreibt Änderungen zurück in die AEM-Autoreninstanz.

Autorenfluss mit dem universellen Editor

Einrichtung setup

Um den universellen Editor zu testen, müssen Sie:

  1. Aktualisieren und konfigurieren Sie Ihre AEM-Autoreninstanz.
  2. Richten Sie einen lokalen universellen Editor-Dienst ein.
  3. Passen Sie Ihren Dispatcher an, um den universellen Editor-Dienst zuzulassen.

Nachdem Sie die Einrichtung abgeschlossen haben, können Sie Ihre Anwendungen instrumentieren, um den universellen Editor zu verwenden.

AEM aktualisieren update-aem

Service Pack 21 oder 22 und ein Feature Pack für AEM sind erforderlich, um den universellen Editor mit AEM 6.5 verwenden zu können.

Anwenden des neuesten Service Packs latest

Stellen Sie sicher, dass Sie mindestens Service Pack 21 oder 22 für AEM 6.5 ausführen. Sie können das neueste Service Pack von „Software " herunterladen

Installieren des Feature Packs für den universellen Editor feature-pack

Installieren Sie Universal Editor Feature Pack für AEM 6.5 verfügbar unter Software Distribution.

Wenn Sie Service Pack 23 oder höher bereits ausführen, ist das Feature Pack nicht erforderlich.

Konfigurieren von Services configure-services

Das Feature Pack installiert eine Reihe neuer Pakete, für die eine zusätzliche Konfiguration erforderlich ist.

  1. Öffnen Sie den Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Suchen Sie Adobe Granite Token Authentication Handler in der Liste und klicken Sie auf Konfigurationswerte ändern.
  3. Ändern Sie im Dialogfeld den Wert SameSite-Attribut für das Anmelde-Token (token.samesite.cookie.attr) auf Partitioned.
  4. Klicken Sie auf Speichern.

Entfernen Sie die Option „X-Frame“ für SAMEORIGIN. sameorigin

  1. Öffnen Sie den Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Suchen Sie Apache Sling Main Servlet in der Liste und klicken Sie auf Konfigurationswerte bearbeiten.
  3. Löschen Sie den X-Frame-Options=SAMEORIGIN aus dem Attribut Zusätzliche Antwortkopfzeilen (sling.additional.response.headers), falls vorhanden.
  4. Klicken Sie auf Speichern.

Konfigurieren Sie den Adobe Granite Query Parameter Authentication Handler. query-parameter

  1. Öffnen Sie den Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Suchen Sie Adobe Granite Query Parameter Authentication Handler in der Liste und klicken Sie auf Konfigurationswerte bearbeiten.
  3. Fügen Sie im Feld Pfad (path) / hinzu, um zu aktivieren.
    • Ein leerer Wert deaktiviert den Authentifizierungs-Handler.
  4. Klicken Sie auf Speichern.

Legen Sie fest, für welche Inhaltspfade oder sling:resourceTypes der universelle Editor geöffnet werden soll. paths

  1. Öffnen Sie den Configuration Manager.

    • http://<host>:<port>/system/console/configMgr

  2. Suchen Sie Universal Editor URL Service in der Liste und klicken Sie auf Konfigurationswerte bearbeiten.

  3. Legen Sie fest, für welche Inhaltspfade oder sling:resourceTypes der universelle Editor geöffnet werden soll.

    • Geben Sie im Feld Öffnen der universellen Editor-Zuordnung die Pfade an, für die der universelle Editor geöffnet wird.
    • Geben Sie im Feld sling:resourceTypes, das vom universellen Editor geöffnet werden soll eine Liste der Ressourcen an, die direkt vom universellen Editor geöffnet werden.

  4. Klicken Sie auf Speichern.

AEM öffnet den universellen Editor für Seiten, die auf dieser Konfiguration basieren.

  1. AEM prüft die Zuordnungen unter Universal Editor Opening Mapping. Wenn sich der Inhalt unter einem der dort definierten Pfade befindet, wird der universelle Editor dafür geöffnet.
  2. Bei Inhalten, die nicht unter in Universal Editor Opening Mapping definierten Pfaden enthalten sind, prüft AEM, ob die resourceType des Inhalts mit den in sling:resourceTypes, die vom universellen Editor geöffnet werden sollen, definierten übereinstimmt, und wenn der Inhalt mit einem dieser Typen übereinstimmt, wird der universelle Editor für ihn bei ${author}${path}.html geöffnet.
  3. Andernfalls öffnet AEM den Seiteneditor.

Die folgenden Variablen stehen zur Definition Ihrer Zuordnungen unter Universal Editor Opening Mapping zur Verfügung.

  • path: Inhaltspfad der zu öffnenden Ressource
  • localhost: Externalizer-Eintrag für localhost ohne Schema, z. B. localhost:4502
  • author: Externalizer-Eintrag für Autor ohne Schema, z. B. localhost:4502
  • publish: Externalizer-Eintrag für Veröffentlichung ohne Schema, z. B. localhost:4503
  • preview: Externalizer-Eintrag für Vorschau ohne Schema, z. B. localhost:4504
  • env: prod, stage, dev basierend auf den definierten Sling-Ausführungsmodi
  • token: Abfrage-Token für die QueryTokenAuthenticationHandler erforderlich

Beispielzuordnungen:

  • Öffnen Sie alle Seiten unter /content/foo in der AEM-Autoreninstanz:

    • /content/foo:${author}${path}.html?login-token=${token}
    • Dies führt zu https://localhost:4502/content/foo/x.html?login-token=<token>

  • Öffnen Sie alle Seiten unter /content/bar auf einem Remote-NextJS-Server und geben Sie alle Variablen als Informationen an.

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • Dies führt zu https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

Einrichten des universellen Editor-Dienstes set-up-ue

Wenn die AEM aktualisiert und konfiguriert wurde, können Sie einen lokalen universellen Editor-Dienst für Ihre eigene lokale Entwicklung und Tests einrichten.

  1. Installieren Sie Node.js Version >=20.

  2. Laden Sie den neuesten universellen Editor-Service von Software Distribution herunter und entpacken Sie ihn.

  3. Konfigurieren des universellen Editor-Dienstes über Umgebungsvariablen oder .env Datei.

  4. Führen Sie universal-editor-service.cjs aus.

Aktualisieren der Dispatcher update-dispatcher

Wenn AEM konfiguriert ist und ein lokaler universeller Editor-Dienst ausgeführt wird, müssen Sie einen Reverse-Proxy für den neuen Dienst ( Dispatcher) zulassen

  1. Passen Sie die vhost-Datei der Autoreninstanz an, um einen Reverse-Proxy einzuschließen.

    code language-html 
    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    note note
    NOTE
    8080 ist der Standard-Port. Wenn Sie dies mit dem UES_PORT Parameter in Ihrer .env-Datei geändert haben, müssen Sie den Port-Wert hier entsprechend anpassen.

  2. Starten Sie Apache neu.

Instrumentieren der App instrumentation

Wenn die AEM aktualisiert wurde und ein lokaler universeller Editor-Dienst ausgeführt wird, können Sie mit der Bearbeitung von Headless-Inhalten mit dem universellen Editor beginnen.

Ihre App muss jedoch so instrumentiert sein, dass sie den universellen Editor nutzen kann. Dazu gehören Meta-Tags, die den Editor anweisen, wie und wo der Inhalt beibehalten werden soll. Weitere Informationen zu dieser Instrumentierung finden Sie unter Dokumentation zum universellen Editor für AEM as a Cloud Service.

Beachten Sie, dass bei Verwendung der Dokumentation für den universellen Editor mit AEM as a Cloud Service die folgenden Änderungen mit AEM 6.5 gelten.

  • Das Protokoll im Meta-Tag muss aem65 statt aem sein.

    code language-html 
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>

  • Der Service-Endpunkt des universellen Editors muss über ein Meta-Tag angekündigt werden.

    code language-html 
    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>

  • Im plugins Abschnitt der Komponentendefinition müssen aem65 anstelle von aem verwendet werden.

TIP
Eine ausführliche Anleitung für Entwicklerinnen und Entwickler, die mit dem universellen Editor beginnen, finden Sie im Dokument Übersicht über den universellen Editor für AEM-) in der AEM as a Cloud Service-Dokumentation, wobei Sie die erforderlichen Änderungen für die AEM 6.5-Unterstützung, die in diesem Abschnitt erwähnt werden, im Auge behalten.

Unterschiede zwischen AEM 6.5 und AEM as a Cloud Service differences

Der universelle Editor in AEM 6.5 funktioniert im Großen und Ganzen genauso wie in AEM as a Cloud Service, einschließlich der Benutzeroberfläche und eines Großteils des Setups. Es gibt jedoch Unterschiede, die zu beachten sind.

  • Der universelle Editor in 6.5 unterstützt nur den Headless-Anwendungsfall.
  • Das Setup des universellen Editors variiert geringfügig bei 6.5 (wieaktuellen Dokument beschrieben).
  • Der universelle Editor in 6.5 verwendet eine andere Asset-Auswahl und eine andere Inhaltsfragmentauswahl als AEM as a Cloud Service.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2