Anpassen und Erweitern des universellen Editors customizing-extending

Erfahren Sie mehr über die verschiedenen Erweiterungspunkte und anderen Funktionen, mit denen Sie das Inhaltserstellungserlebnis des universellen Editors anpassen können, um die Anforderungen Ihrer Inhaltsautorinnen und Inhaltsautoren zu unterstützen.

Überblick overview

Der universelle Editor ermöglicht zwei Arten der Anpassung an die Anforderungen Ihres Projekts.

Beide Arten werden in den folgenden Abschnitten beschrieben.

Anpassen des universellen Editors customizing

Der universelle Editor bietet mehrere integrierte Optionen zur Anpassung seiner Funktionen.

Deaktivieren der Veröffentlichung disable-publish

Bestimmte Authoring-Workflows erfordern, dass Inhalte vor der Veröffentlichung überprüft werden. In solchen Fällen sollte die Option zur Veröffentlichung für Autorinnen und Autoren nicht verfügbar sein.

Die Schaltfläche Veröffentlichen kann daher in einer App vollständig unterdrückt werden, indem die folgenden Metadaten hinzugefügt werden.

<meta name="urn:adobe:aue:config:disable" content="publish"/>

Filtern von Komponenten filtering-components

Bei Verwendung des universellen Editors können Sie die zulässigen Komponenten pro Container-Komponente einschränken. Dazu müssen Sie ein zusätzliches Skript-Tag einführen, das auf die Filterdefinition verweist.

<script type="application/vnd.adobe.aue.filter+json" src="/static/filter-definition.json"></script>

Eine Filterdefinition könnte wie folgt aussehen, wodurch ein Container so eingeschränkt würde, dass nur Text und Bilder hinzugefügt werden können.

[
  {
    "id": "container-filter",
     "components": ["text", "image"]
   }
]

Anschließend können Sie über Ihre Container-Komponente auf die Filterdefinition verweisen, indem Sie die Eigenschaft data-aue-filter hinzufügen, wobei die Kennung des zuvor definierten Filters übergeben wird.

data-aue-filter="container-filter"

Durch das Festlegen des Attributs components in einer Filterdefinition auf null werden alle Komponenten zugelassen, als gäbe es keinen Filter.

[
  {
    "id": "another-container-filter",
     "components": null
   }
]

Bedingtes Anzeigen und Ausblenden von Komponenten im Eigenschaftenbedienfeld conditionally-hide

Obwohl eine oder mehrere Komponenten allgemein für Ihre Autorinnen und Autoren verfügbar sein können, kann es in bestimmten Situationen vorkommen, dass dies nicht sinnvoll ist. In solchen Fällen können Sie Komponenten im Eigenschaftenbedienfeld ausblenden, indem Sie den Feldern des Komponentenmodells das Attribut condition hinzufügen.

Bedingungen können mithilfe des JsonLogic-Schemas definiert werden. Wenn die Bedingung zutrifft, wird das Feld angezeigt. Wenn die Bedingung nicht zutrifft, wird das Feld ausgeblendet.

Beispielmodell
code language-json
 {
    "id": "conditionally-revealed-component",
    "fields": [
      {
        "component": "boolean",
        "label": "Shall the text field be revealed?",
        "name": "reveal",
        "valueType": "boolean"
      },
      {
        "component": "text-input",
        "label": "Hidden text field",
        "name": "hidden-text",
        "valueType": "string",
        "condition": { "===": [{"var" : "reveal"}, true] }
      }
    ]
 }
Bedingung trifft nicht zu
Ausgeblendetes Textfeld
Bedingung trifft zu
Eingeblendetes Textfeld

Benutzerdefinierte Vorschau-URLs custom-preview-urls

Sie können eine benutzerdefinierte Vorschau-URL über eine Meta-Konfiguration urn:adobe:aue:config:preview angeben, die beim Klicken auf die Schaltfläche Seite öffnen in der oberen rechten Symbolleiste des Editors geöffnet wird.

Dies ist besonders nützlich für Anwendungen mit bestimmten Vorschauanforderungen, z. B. bei der Verwendung von Edge Delivery Services mit WYSIWYG-Authoring.

Fügen Sie dazu einfach die gewünschte Vorschau-URL wie im folgenden Beispiel in ein Meta-Tag der instrumentierten App ein.

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

Erweitern der Benutzeroberfläche des universellen Editors extending

Als Adobe Experience Cloud-Service kann die Benutzeroberfläche des universellen Editors mit App Builder und Experience Manager erweitert werden.

Benutzeroberflächenerweiterungen sind JavaScript-Anwendungen, die mit Adobe App Builder erstellt wurden und in Benutzeroberflächenanwendungen eingebettet werden können, die unter Unified Shell in Adobe Experience Cloud ausgeführt werden, z. B. im universellen Editor. Sie können Ihre eigenen Schaltflächen und Aktionen zum Kopfzeilenmenü und Eigenschaftenbereich hinzufügen sowie eigene Ereignisse für den universellen Editor erstellen.

Weitere Informationen zu diesen Möglichkeiten finden Sie in den folgenden Ressourcen:

  1. Erweiterbarkeit der Benutzeroberfläche – Dies ist die Entwicklerdokumentation für die Benutzeroberflächenerweiterung.
  2. Anleitung für die Erweiterung der Benutzeroberfläche – Schritt-für-Schritt-Anleitung zur Entwicklung Ihrer eigenen Erweiterung
  3. Erweiterungspunkte für den universellen Editor – Dokumentation zu den Erweiterungspunkten spezifisch für den universellen Editor
TIP
Wenn Sie es vorziehen, anhand von Beispielen zu lernen, sehen Sie sich bitte das folgende Tutorial an: Tutorial zur Erweiterbarkeit der AEM-Benutzeroberfläche. Obwohl der Fokus des Tutorials auf der Erweiterung der Inhaltsfragment-Konsole liegt, ist das Konzept zur Implementierung einer Benutzeroberflächenerweiterung im universellen Editor identisch.

Mit dem Extension Manager in AEM Sites können Sie Ihre Erweiterungen auf Instanzbasis aktivieren oder deaktivieren, auf Erweiterungen von Adobe zugreifen, einschließlich der Erweiterungen für den universellen Editor, und vieles mehr.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab