Dokumentation AEM as a Cloud Service Benutzerhandbuch

Erste Schritte mit dem universellen Editor in AEM getting-started

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

Themen:
Entwicklung

Erstellt für:

Admin
Entwickler

Erfahren Sie, wie Sie Zugriff auf den universellen Editor erhalten und wie Sie mit der Instrumentierung Ihrer ersten AEM-App beginnen, um ihn zu verwenden.

TIP

Wenn Sie lieber direkt in ein Beispiel eintauchen möchten, können Sie die Beispielanwendung Universeller Editor“ auf GitHub.

Obwohl der universelle Editor Inhalte aus jeder Quelle bearbeiten kann, verwendet dieses Dokument eine AEM-App als Beispiel. Dieses Dokument führt Sie durch diese Schritte.

Instrumentieren der Seite instrument-page

Der universelle Editor erfordert eine JavaScript-Bibliothek, um die Seite im Editor zu rendern und zu bearbeiten.

Der Service des universellen Editors erfordert einen Uniform Resource Name (URN), um das richtige Backend-System für den Inhalt in der in Bearbeitung befindlichen App zu identifizieren und zu verwenden. Daher ist ein URN-Schema erforderlich, um Inhalte wieder Inhaltsressourcen zuzuordnen.

Einschließen der CORS-Bibliothek des universellen Editors cors-library

Damit der universelle Editor eine Verbindung zu Ihrer App herstellen kann, muss Ihre App die CORS-Bibliothek des universellen Editors enthalten. Fügen Sie das folgende Skript zu Ihrer App hinzu.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

Erstellen von Verbindungen connections

Verbindungen, die in der App verwendet werden, werden als <meta>-Tags im <head> der Seite gespeichert.

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

<category> – Dies ist eine Klassifizierung der Verbindung mit zwei Optionen.
- system – Für Verbindungsendpunkte
- config – Zum Definieren optionaler Konfigurationseinstellungen.
<referenceName> – Dies ist ein Kurzname, der im Dokument zur Identifizierung der Verbindung wiederverwendet wird. Z. B. aemconnection
<protocol> – Dies gibt an, welches Persistenz-Plug-in des Universal Editor Persistence Service verwendet werden soll. Z. B. aem
<url> – Dies ist die URL zum System, in dem die Änderungen persistiert werden sollen. Z. B. http://localhost:4502

Die Kennung urn:adobe:aue:system stellt die Verbindung des universellen Editors von Adobe dar.

data-aue-resources verwenden das Präfix urn, um die Kennung zu verkürzen.

data-aue-resource="urn:<referenceName>:<resource>"

<referenceName> – Dies ist die im <meta>-Tag erwähnte Referenz. Z. B. aemconnection
<resource> – Dies ist ein Zeiger auf die Ressource im Zielsystem. Z. B. ein AEM Inhaltspfad, wie /content/page/jcr:content

TIP

Siehe das Dokument Attribute und Typen für weitere Details zu den Datenattributen und -typen, die der universelle Editor erfordert.

Beispielverbindung example

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection:/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection:/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

Konfigurationseinstellungen configuration-settings

Sie können das Präfix config in Ihrem Verbindungs-URN verwenden, um bei Bedarf Service- und Erweiterungsendpunkte festzulegen.

Wenn Sie nicht den von Adobe gehosteten Service „Universeller Editor“, sondern Ihre eigene gehostete Version verwenden möchten, können Sie dies in einem Meta-Tag festlegen. Um den vom universellen Editor bereitgestellten Standard-Service-Endpunkt zu überschreiben, legen Sie Ihren eigenen Service-Endpunkt fest:

Metaname: urn:adobe:aue:config:service
Metainhalt: content="https://adobe.com" (Beispiel)

<meta name="urn:adobe:aue:config:service" content="<url>">

Wenn Sie nur bestimmte Erweiterungen für eine Seite aktivieren möchten, können Sie dies in einem Meta-Tag festlegen. Um Erweiterungen abzurufen, legen Sie die Erweiterungsendpunkte fest:

Metaname: urn:adobe:aue:config:extensions
Metainhalt: content="https://adobe.com,https://anotherone.com,https://onemore.com" (Beispiel)

<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Definieren, für welche Inhaltspfade oder `sling:resourceType`s der universelle Editor geöffnet werden soll. (Optional) content-paths

Wenn Sie über ein vorhandenes AEM-Projekt mit dem Seiteneditor verfügen, werden die Seiten beim Bearbeiten von Seiten durch Inhaltsautoren automatisch mit dem Seiteneditor geöffnet. Sie können festlegen, welchen Editor AEM basierend auf den Inhaltspfaden oder dem sling:resourceType öffnen soll. Dadurch profitieren Ihre Autorinnen und Autoren von einem nahtlosen Erlebnis, unabhängig davon, welcher Editor für die ausgewählten Inhalte erforderlich ist.

Öffnen Sie den Configuration Manager.

http://<host>:<port>/system/console/configMgr
Suchen Sie Universal Editor URL Service in der Liste und klicken Sie auf Edit the configuration values (Konfigurationswerte bearbeiten).
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.
Klicken Sie auf Speichern.

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

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.
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.
Andernfalls öffnet AEM den Seiteneditor.

Die folgenden Variablen stehen zur Definition Ihrer Zuordnungen im Feld Universal Editor Opening Mapping (Universeller Editor – Zuordnung zum Öffnen) 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 example-mappings

Ö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.

Sie können den universellen Editor nun verwenden youre-ready

Ihre App ist jetzt für die Verwendung des universellen Editors instrumentiert!

Unter Inhaltserstellung mit dem universellen Editor erfahren Sie, wie einfach und intuitiv es für Inhaltsautorinnen und -autoren ist, Inhalte mit dem universellen Editor zu erstellen.

Zusätzliche Ressourcen additional-resources

Weitere Informationen zum universellen Editor finden Sie in diesen Dokumenten.

Einführung in den universellen Editor – Erfahren Sie, wie der universelle Editor die Bearbeitung beliebiger Inhalte in jeder Implementierung ermöglicht, um außergewöhnliche Erlebnisse bereitzustellen, die Inhaltsgeschwindigkeit zu erhöhen und ein modernes Entwicklererlebnis zu bieten.
Inhaltserstellung mit dem universellen Editor – Erfahren Sie, wie einfach und intuitiv es für Inhaltsautorinnen und Inhaltsautoren ist, Inhalte mit dem universellen Editor zu erstellen.
Veröffentlichen von Inhalten mit dem universellen Editor – Erfahren Sie, wie der universelle Editor Inhalte veröffentlicht und wie Ihre Apps mit den veröffentlichten Inhalten umgehen können.
Architektur des universellen Editors – Erfahren Sie mehr über die Architektur des universellen Editors und darüber, wie Daten zwischen seinen Diensten und Ebenen fließen.
Attribute und Typen – Erfahren Sie mehr über die Datenattribute und -typen, die der universelle Editor erfordert.
Authentifizierung beim universellen Editor – Erfahren Sie, wie beim universellen Editor authentifiziert wird.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab