DokumentationAEM 6.5Benutzerhandbuch

Der universelle Editor universal-editor

Last update: Tue Sep 02 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gilt für:
  • Experience Manager 6.5

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. Er ermöglicht Autorinnen und Autoren die WYSIWYG-Bearbeitung (What you see is what you get) von beliebigen Headless-Erlebnissen.

  • Autorinnen und Autoren profitieren von der Flexibilität des universellen Editors, da er die gleiche konsistente visuelle Bearbeitung für alle Formen von AEM-Headless-Inhalten unterstützt.
  • Entwicklerinnen und Entwickler profitieren von der Vielseitigkeit des universellen Editors, da er auch eine echte Entkopplung der Implementierung unterstützt. Damit können Entwicklerinnen und Entwickler praktisch jedes Framework oder jede Architektur ihrer Wahl nutzen, ohne dass sie SDK- oder Technologieeinschränkungen unterliegen.

Weitere Informationen finden Sie in der AEM as a Cloud Service-Dokumentation zum universellen 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:

Dieses Dokument konzentriert sich auf die Unterstützung von AEM 6.5 durch den universellen Editor. Um den universellen Editor mit AEM 6.5 zu verwenden, benötigen Sie Folgendes:

  • AEM 6.5 mit Service Pack 23 oder höher
  • Dispatcher ordnungsgemäß konfiguriert

Einrichtung setup

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

  1. Richten Sie einen lokalen universellen Editor-Dienst ein.
  2. Passen Sie Ihren Dispatcher an, um den universellen Editor-Dienst zuzulassen.

Nachdem Sie die Einrichtung abgeschlossen haben, können Sie Ihre Anwendungen so instrumentieren, dass sie den universellen Editor verwenden.

Konfigurieren von Services configure-services

Der universelle Editor nutzt mehrere 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 Cookie des Anmelde-Tokens (token.samesite.cookie.attr) auf Partitioned.
  4. Klicken Sie auf Speichern.

Entfernen Sie die Option „X-Frame“ für SAMEORIGIN-Header. 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 Edit the configuration values (Konfigurationswerte bearbeiten).
  3. Löschen Sie den Wert 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 Edit the configuration values (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.

Definieren Sie, 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. Definieren Sie, 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 liegen, überprüft AEM, ob der resourceType des Inhalts mit den in Sling:resourceTypes definierten übereinstimmt, die vom universellen Editor geöffnet werden sollen. Wenn der Inhalt mit einem dieser Typen übereinstimmt, wird der universelle Editor dafür 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 NextJS-Remote-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 eine Version >=20 von Node.js.

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

  3. Konfigurieren Sie den universellen Editor-Dienst über Umgebungsvariablen oder die .env-Datei.

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

Aktualisieren des Dispatchers 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 im 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 Parameter UES_PORTin 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 in der 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 Abschnitt plugins der Komponentendefinition muss 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-Entwicklerinnen und -Entwickler 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 (wie im aktuellen 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