DokumentationAEM 6.5Benutzerhandbuch

Der universelle Editor universal-editor

Last update: Wed Mar 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Entwickler

Erfahren Sie mehr über die Flexibilität des universellen Editors und darüber, 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

Voraussetzungen requirements

Der universelle Editor wird unterstützt von:

  • AEM 6.5 (Service Pack 21 oder 22 plus ein Feature Pack)
    • Sowohl On-Premise- als auch AMS-Hosting werden unterstützt.
  • AEM as a Cloud Service (Version 2023.8.13099 oder höher)

Dieses Dokument konzentriert sich auf die Unterstützung von AEM 6.5 durch den 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 Edit the configuration values (Konfigurationswerte bearbeiten).

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

    • Geben Sie im Feld Universal Editor Opening Mapping (Universeller Editor – Zuordnung zum Öffnen) die Pfade an, für die der universelle Editor geöffnet wird.
    • Geben Sie im Feld Sling:resourceTypes which shall be opened by Universal Editor (sling:resourceTypes, die vom universellen Editor geöffnet werden sollen) eine Liste der Ressourcen an, die direkt vom universellen Editor geöffnet werden.

  4. Klicken Sie auf Speichern.

  5. Überprüfen Sie Ihre Externalizer-Konfiguration und stellen Sie sicher, dass Sie zumindest die lokale Umgebung sowie die Autoren- und Veröffentlichungsumgebung wie im folgenden Beispiel festgelegt haben.

    code language-text 
    "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]",
"author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]",
"publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"

Sobald diese Konfigurationsschritte abgeschlossen sind, öffnet AEM den universellen Editor für Seiten in der folgenden Reihenfolge.

  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 den in Universal Editor Opening Mapping definierten Pfaden enthalten sind, prüft AEM, ob der resourceType des Inhalts zu den unter Sling:resourceTypes which shall be opened by Universal Editor (sling:resourceTypes, die vom universellen Editor geöffnet werden sollen) definierten gehört. Wenn der Inhalt einem dieser Typen entspricht, wird dafür der universelle Editor unter ${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 die Autorin bzw. den Autor ohne Schema, z. B. localhost:4502
  • publish: Externalizer-Eintrag für die Veröffentlichung ohne Schema, z. B. localhost:4503
  • preview: Externalizer-Eintrag für die Vorschau ohne Schema, z. B. localhost:4504
  • env: prod, stage, dev basierend auf den definierten Sling-Ausführungsmodi
  • token: Für QueryTokenAuthenticationHandler erforderliches Abfrage-Token

Beispielzuordnungen:

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

    • /content/foo:${author}${path}.html?login-token=${token}
    • Dadurch wird https://localhost:4502/content/foo/x.html?login-token=<token> geöffnet.

  • Ö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}
    • Dadurch wird https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token> geöffnet.

Einrichten des universellen Editor-Dienstes set-up-ue

Nachdem 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 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 bei der Dokumentation für den universellen Editor mit AEM as a Cloud Service die folgenden Änderungen bei der Verwendung mit AEM 6.5.

  • 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. Beachten Sie dabei die erforderlichen Änderungen, die für die Unterstützung von AEM 6.5 erforderlich sind, wie in diesem Abschnitt erwähnt.

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