Anpassung des Seiten-Authorings

ACHTUNG

In diesem Dokument wird beschrieben, wie Sie das Seiten-Authoring in der modernen Touch-optimierten Benutzeroberfläche anpassen. Es gilt nicht für die klassische Benutzeroberfläche.

AEM bietet verschiedene Möglichkeiten zum Anpassen der Funktionsweise des Seiten-Authorings (und der Konsolen) Ihrer Authoring-Instanz.

  • Clientlibs

    Mit clientlibs können Sie die Standardimplementierung erweitern, um neue Funktionen zu realisieren, während Sie die Standardfunktionen, -objekte und -methoden wiederverwenden. Beim Anpassen können Sie Ihre eigene clientlib unter /apps. Die neue clientlib muss:

    • die Authoring-clientlibcq.authoring.editor.sites.page als Abhängigkeit aufweisen
    • der entsprechenden cq.authoring.editor.sites.page.hook-Kategorie angehören
  • Überlagerungen

    Overlays are based on node definitions and allow you to overlay the standard functionality (in /libs) with your own customized functionality (in /apps). Wenn Sie eine Überlagerung erstellen, ist keine identische Kopie des Originals erforderlich, da sling resource merger Vererbung ermöglicht.

Hinweis

Weitere Informationen finden Sie in der JS-Dokumentation.

Diese Funktionen können auf verschiedene Arten verwendet werden, um die Seiten-Authoring-Funktionen in Ihrer AEM-Instanz zu erweitern. Unten behandeln wir allgemein eine Auswahl von Möglichkeiten.

Hinweis

Weitere Informationen finden Sie unter:

Dieses Thema wird auch in der AEM Gems-Sitzung Anpassung der Benutzeroberfläche für AEM 6.0 behandelt.

ACHTUNG

Sie dürfen keinerlei Änderungen im Pfad /libs vornehmen,

da der Inhalt von /libs überschrieben wird, wenn Sie die Instanz das nächste Mal aktualisieren. (Außerdem kann der Inhalt auch durch Anwenden von Hotfixes oder Feature Packs überschrieben werden.)

Die empfohlene Methode zur Konfiguration und für andere Änderungen sieht wie folgt aus:

  1. Recreate the required item (i.e. as it exists in /libs) under /apps
  2. Nehmen Sie die gewünschten Änderungen in /apps vor.

Neue Ebene hinzufügen (Modus)

Wenn Sie eine Seite bearbeiten, gibt es verschiedene verfügbare Modi. Diese Modi werden mithilfe von Ebenen implementiert. Sie ermöglichen Zugriff auf verschiedene Funktionen für denselben Seiteninhalt. Die Standardebenen sind: Bearbeiten, Vorschau, Anmerken, Entwickler und Targeting.

Ebenenbeispiel: Live Copy-Status

Eine Standard-AEM-Instanz stellt die MSM-Ebene bereit. Diese Ebene greift auf Daten für Multi-Site-Management zu und hebt sie in der Ebene hervor.

To see it in action you may edit any We.Retail language copy page (or any other live copy page) and select the Live Copy Status mode.

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

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

Codebeispiel

Dies ist ein Beispielpaket, das die Erstellung einer neuen Ebene (Modus) zeigt. Hier ist es eine neue Ebene zur MSM-Ansicht.

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Hinzufügen einer neuen Auswahl-Kategorie zum Asset-Browser

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

Codebeispiel

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

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Filtern von Ressourcen

Beim Authoring von Seiten muss der Benutzer oft aus verschiedenen Ressourcen (z. B. Seiten, Komponenten, Assets usw.) auswählen. Dabei kann beispielsweise eine Liste verwendet werden, aus der der Autor ein Element auswählen muss.

Um die Größe der Liste (auf die relevanten Einsatzszenarios) zu beschränken, kann ein Filter in Form eines benutzerdefinierten Prädikats implementiert werden. Wenn z. B. 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.

Hinweis

Die Implementierung einer benutzerdefinierten Eigenschaft durch die Implementierung der Schnittstelle com.day.cq.commons.predicate.AbstractNodePredicate funktioniert auch in der klassischen Benutzeroberfläche.

In diesem Knowledge Base-Artikel finden Sie ein Beispiel für die Implementierung einer benutzerdefinierten Eigenschaft in der klassischen Benutzeroberfläche.

Hinzufügen neuer Aktionen zu Komponenten-Symbolleisten

Jede Komponente hat (in der Regel) eine Symbolleiste, die Zugriff auf eine Reihe von Aktionen bietet, die mit dieser Komponente durchgeführt werden können.

Codebeispiel

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

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Hinzufügen eines neuen Editors für Bearbeitung im Kontext

Standardmäßiger Editor für Bearbeitung im Kontext

Bei der Standardinstallation von AEM:

  1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

    Enthält Definitionen der verschiedenen verfügbaren Editoren.

  2. Es gibt eine Verknüpfung zwischen dem Editor und den einzelnen Ressourcenarten (wie Komponenten), die ihn verwenden können:

    • cq:inplaceEditing

      Beispiel:

      • /libs/foundation/components/text/cq:editConfig

      • /libs/foundation/components/image/cq:editConfig

        • property: editorType

          Defines the type of inline editor that will be used when the in-place editing is triggered for that component; e.g. text, textimage, image, title.

  3. Weitere Einstellungen des Editors können mit einem config-Knoten, der Konfigurationen enthält, sowie einem weiteren plugin-Knoten mit notwendigen Plug-in-Konfigurationsdetails konfiguriert werden.

    Das folgende Beispiel zeigt die Definition von Seitenverhältnissen für das Bildbeschneidungs-Plug-in der image-Komponente. Beachten Sie, dass aufgrund der Möglichkeit von begrenzten Bildschirmgrößen die Beschneidungsverhältnisse in den Vollbild-Editor verlegt wurden und nur dort sichtbar sind.

    <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>
    
    ACHTUNG

    Beachten Sie, dass Beschneidungsverhältnisse, die durch die Eigenschaft ratio definiert werden, in AEM als Höhe/Breite definiert sind. Dies unterscheidet sich von der herkömmlichen Definition der Breite/Höhe und ist auf Kompatibilität mit Altsystemen zurückzuführen. Die Benutzer, die die Seite erstellen, bemerken keinen Unterschied, vorausgesetzt, dass Sie die Eigenschaft name klar definieren, da diese auf der Benutzeroberfläche angezeigt wird.

Erstellen eines neuen integrierten Editors

So erstellen Sie einen neuen integrierten Editor (innerhalb Ihrer clientlib):

Hinweis

Ein Beispiel finden Sie unter:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. Implementierung:

    • setUp
    • tearDown
  2. Registrieren Sie den Editor (einschließlich des Konstruktors):

    • editor.register
  3. Geben Sie die Verknüpfung zwischen dem Editor und jedem Ressourcentyp an (wie in der Komponente), der ihn verwenden kann.

Codebeispiel zum Erstellen eines neuen integrierten Editors

aem-authoring-extension-inplace-editor ist ein Beispielpaket, das zeigt, wie Sie einen neuen ersetzenden Editor in AEM erstellen.

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Konfigurieren mehrerer Editoren für Bearbeitung im Kontext

Es ist möglich, eine Komponente so zu konfigurieren, dass sie über mehrere integrierte Editoren verfügt. Wenn mehrere integrierte Editoren konfiguriert sind, können Sie den entsprechenden Inhalt auswählen und den entsprechenden Editor öffnen. See the Configuring Multiple In-Place Editors documentation for more information.

Hinzufügen einer neuen Seitenaktion

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

Codebeispiel

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.

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Anpassen des Aktivierungsanfrage-Workflows

Der standardmäßige Workflow Aktivierungsanfrage wird automatisch ausgelöst, wenn ein Inhaltsautor nicht über die erforderlichen Replikationsrechte verfügt.

To have customized behavior upon such activation you can overlay the Request for Activation workflow:

  1. In /apps Overlay wird der Sites -Assistent ausgeführt:

    /libs/wcm/core/content/common/managepublicationwizard

    Hinweis

    Dadurch wird die folgende common-Instanz überlagert:

    /libs/cq/gui/content/common/managepublicationwizard

  2. Update the workflow model and related configurations/scripts as required.

  3. Remove the right to the replicate action from all appropriate users for all relevant pages; to have this workflow triggered as a default action when any of the users try to publish (or replicate) a page.

Auf dieser Seite