Anpassen der Seitenbearbeitung customizing-page-authoring

Adobe Experience Manager as a Cloud Service bietet verschiedene Mechanismen, mit denen Sie die Seitenbearbeitungsfunktion (und die Konsolen) Ihrer Autoreninstanz anpassen können.

Client-Bibliotheken clientlibs

Mit Client-Bibliotheken können Sie die Standardimplementierung um neue Funktionen erweitern und gleichzeitig Standardfunktionen, -objekte und -methoden wiederverwenden.

Bei der Anpassung können Sie unter /apps. Ihre eigene Client-Bibliothek erstellen. Die neue Client-Bibliothek muss:

Siehe Verwenden Client-seitiger Bibliotheken für AEM as a Cloud Service.

Überlagerungen overlays

Überlagerungen basieren auf Knotendefinitionen und ermöglichen es Ihnen, Standardfunktionen (in /libs) durch Ihre eigenen benutzerdefinierten Funktionen (in /apps) zu überlagern.

Wenn Sie eine Überlagerung erstellen, ist keine 1:1-Kopie des Originals erforderlich, da die Sling-Ressourcenzusammenführung das Vererben zulässt.

Weitere Informationen finden Sie unter JS-Dokumentationssatz.

Weitere Informationen zu Überlagerungen finden Sie unter Überlagerungen für Adobe Experience Manager as a Cloud Service.

Neue Ebene hinzufügen (Modus) add-new-layer-mode

Beim Bearbeiten einer Seite sind verschiedene Modi verfügbar. Diese Modi werden mithilfe von Ebenen implementiert. Diese ermöglichen den Zugriff auf verschiedene Funktionstypen für denselben Seiteninhalt. Zu den standardmäßigen AEM-Modi gehören Bearbeiten, Layout, Entwickler, Timewarp, Live Copy-Status und Targeting.

Ebenenbeispiel: Live Copy-Status layer-example-live-copy-status

Eine standardmäßige AEM-Instanz stellt die MSM-Ebene bereit. Diese greift auf Daten im Zusammenhang mit Multisite-Management zu und hebt sie in der Ebene hervor.

Um sie im Einsatz zu sehen, können Sie jede Sprachkopie im WKND-Beispielinhalt bearbeiten und den Live Copy-Status-Modus auswählen.

Sie finden die MSM-Ebenendefinition (als Referenz) in:

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Codebeispiel code-sample

Dies ist ein Beispielpaket, das zeigt, wie eine Ebene (Modus) für die MSM-Ansicht erstellt wird.

Den Code dieser Seite finden Sie auf GitHub.

Hinzufügen einer neuen Auswahl-Kategorie zum Asset-Browser add-new-selection-category-to-asset-browser

Der Asset-Browser zeigt Assets verschiedener Typen/Kategorien an (z. B. Bilder und Dokumente). Die Assets können auch anhand dieser Asset-Kategorien gefiltert werden.

Codebeispiel code-sample-1

aem-authoring-extension-assetfinder-flickr ist ein Beispielpaket, das das Hinzufügen einer Gruppe zur Asset-Suche demonstriert. Dieses Beispiel verbindet sich mit dem öffentlichen Stream von Flickr und zeigt ihn im Seitenbereich.

Den Code dieser Seite finden Sie auf GitHub.

Filtern von Ressourcen filtering-resources

Beim Authoring von Seiten müssen Benutzende oft aus verschiedenen Ressourcen auswählen.

Um die Liste in einer angemessenen Größe und auch für den Anwendungsfall relevant zu halten, kann ein Filter in Form eines benutzerdefinierten Prädikats implementiert werden. Wenn z. B. die Benutzerin oder der Benutzer durch die pathbrowser-Granite-Komponente den Pfad zu einer bestimmten Ressource auswählen kann, können die gezeigten Pfade auf folgende Art gefiltert werden:

Weitere Details zum Erstellen einer benutzerdefinierten Eigenschaft finden Sie in diesem Artikel.

Hinzufügen einer neuen Aktion zu einer Komponenten-Symbolleiste add-new-action-to-a-component-toolbar

Jede Komponente verfügt in der Regel über eine Symbolleiste, die Zugriff auf eine Reihe von Aktionen bietet, die für diese Komponente durchgeführt werden können.

Codebeispiel code-sample-2

aem-authoring-extension-toolbar-screenshot ist ein Beispielpaket, das die Erstellung einer benutzerdefinierten Symbolleistenaktion zum Rendern von Komponenten demonstriert.

Den Code dieser Seite finden Sie auf GitHub.

Hinzufügen eines neuen Editors für Bearbeitung im Kontext add-new-in-place-editor

Standardmäßiger Editor für Bearbeitung im Kontext standard-in-place-editor

Bei der Standardinstallation von AEM:

Das folgende Beispiel zeigt die Definition von Seitenverhältnissen für das Bildbeschneidungs-Plug-in der Bildkomponente.

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>

Erstellen eines neuen Editors für Bearbeitung im Kontext creating-a-new-in-place-editor

So erstellen Sie einen neuen Editor für Bearbeitung im Kontext (innerhalb Ihrer clientlib):

Codebeispiel zum Erstellen eines neuen Editors für Bearbeitung im Kontext code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor ist ein Beispielpaket, das die Erstellung eines neuen Editors für die Bearbeitung im Kontext in AEM demonstriert.

Den Code dieser Seite finden Sie auf GitHub.

Hinzufügen einer neuen Seitenaktion add-a-new-page-action

So fügen Sie der Seitensymbolleiste eine neue Seitenaktion hinzu, z. B. die Aktion Zurück zu Sites (Konsole).

Codebeispiel code-sample-3

aem-authoring-extension-header-backtosites ist ein Beispielpaket, das die Erstellung einer benutzerdefinierten Kopfzeilenleistenaktion demonstriert, mit der der Benutzer zurück zur Sites-Konsole springt.

Den Code dieser Seite finden Sie auf GitHub.

Anpassen des Aktivierungsanfrage-Workflows customizing-the-request-for-activation-workflow

Der vorkonfigurierte Workflow, Aktivierungsanfrage:

Um das Verhalten bei dieser Aktivierung anzupassen, können Sie den  Aktivierungsanfrage-Workflow überlagern: