Konfigurieren des Rich-Text-Editors configure-the-rich-text-editor

Der Rich-Text-Editor (RTE) bietet Autorinnen und Autoren eine große Bandbreite an Funktionen zum Bearbeiten von Textinhalten. Symbole, Auswahlfelder, Symbolleisten und Menüs werden für eine WYSIWYG-Textbearbeitung bereitgestellt.

Informationen zur Verwendung der Authoring-Funktionen des RTE finden Sie unter Verwenden des Rich-Text-Editors für das Authoring. Der RTE kann konfiguriert werden, um die in den Authoring-Komponenten verfügbaren Funktionen zu aktivieren, zu deaktivieren und zu erweitern. Der folgende Workflow veranschaulicht die empfohlene Reihenfolge für die RTE-Konfigurationsaufgaben in Experience Manager.

Abbildung: Sequenz von Schritten, um das Konfigurieren des RTE zu erlernen

Grundlegendes zur Touch-optimierten und klassischen Benutzeroberfläche understand-touch-enabled-ui-and-classic-ui

Die Touch-optimierte Benutzeroberfläche ist die Standard-Benutzeroberfläche für Experience Manager. Adobe hat die Touch-optimierte Benutzeroberfläche mit responsivem Design für die Authoring-Umgebung eingeführt. Die Touch-optimierte Benutzeroberfläche wurde für Touch- und Desktop-Geräte entwickelt. Diese Benutzeroberfläche unterscheidet sich deutlich von der ursprünglichen klassischen Benutzeroberfläche.

Abbildung: Rich-Text-Editor-Symbolleiste in der Touch-optimierten Benutzeroberfläche

Abbildung: Rich-Text-Editor-Symbolleiste in der klassischen Benutzeroberfläche

Verschiedene Bearbeitungsmodi editingmodes

Autoren können Textinhalte in Experience Manager mithilfe der verschiedenen Komponentenmodi erstellen und bearbeiten. Die Symbolleistenoptionen für das Erstellen und Formatieren von Inhalten sowie das Benutzererlebnis von RTE-aktivierten Komponenten in verschiedenen Bearbeitungsmodi variieren je nach RTE-Konfigurationen.

Inline-Bearbeitung inline-editing

Beim Öffnen (durch langsames Doppelklicken) kann der Inhalt innerhalb der Seite bearbeitet werden. Dazu steht Ihnen eine kompakte Symbolleiste mit sehr grundlegenden Optionen zur Verfügung.

Abbildung: Inline-Bearbeitung mit einfacher Symbolleiste in der Touch-optimierten Benutzeroberfläche

In der klassischen Benutzeroberfläche ermöglicht ein langsamer Doppelklick auf die Komponente die Inline-Bearbeitung, und der Inhalt wird orange umrandet. Wenn die Inhaltssuche geöffnet ist, wird oben im Fenster eine Symbolleiste mit den verfügbaren RTE-Formatierungsoptionen angezeigt. Ist der Content Finder nicht geöffnet, werden die Formatierungsoptionen nicht angezeigt und Sie können nur grundlegende Textbearbeitungen vornehmen.

Bearbeitung im Vollbildmodus full-screen-editing

Experience Manager-Komponenten können im Vollbildmodus geöffnet werden. Dabei wird der Seiteninhalt überdeckt und der gesamte Bildschirm ausgefüllt. Die Bearbeitung im Vollbildmodus ist quasi eine detaillierte Version der Inline-Bearbeitung, da sie die meisten Bearbeitungsmöglichkeiten bietet. Wenn Sie sich im Inline-Bearbeitungsmodus befinden, kann sie durch Klicken auf in der kompakten Symbolleiste geöffnet werden.

Im Dialogfeld-Vollbildmodus stehen neben einer detaillierten RTE-Symbolleiste auch die in einem Dialogfeld verfügbaren Optionen und Komponenten zur Verfügung. Dies gilt nur für ein Dialogfeld, das neben anderen Komponenten einen RTE enthält.

Abbildung: Die detaillierte RTE-Symbolleiste bei der Bearbeitung im Vollbildmodus in der Touch-optimierten Benutzeroberfläche

Bearbeitung in einem Dialogfeld dialog-editing

Wenn Sie auf eine Komponente doppelklicken, wird ein Dialogfeld zur Bearbeitung des Inhalts geöffnet. Das Dialogfeld wird über der vorhandenen Seite geöffnet. In bestimmten Fällen kann dieses Dialogfeld auch als Popup-Fenster geöffnet werden. Dies ist beispielsweise der Fall, wenn eine Textkomponente Teil einer Spalte in einem mehrspaltigen Seitenlayout ist und zu wenig Platz für die Anzeige des Dialogfelds vorhanden ist.

Abbildung: Dialogfeld-Bearbeitungsmodus in Touch-optimierter Benutzeroberfläche

Abbildung: Dialogfeld in der klassischen Benutzeroberfläche mit einer Symbolleiste zur Bearbeitung

Wissenswertes über RTE-Plug-ins und die zugehörigen Funktionen aboutplugins

Die Funktionen werden über eine Reihe von Plug-ins zur Verfügung gestellt, jeweils mit:

Die grundlegenden RTE-Funktionen werden durch den Wert der Eigenschaft features in einem Knoten aktiviert oder deaktiviert, der spezifisch für das entsprechende Plug-in ist.

In der folgenden Tabelle sind die derzeit verfügbaren Plug-ins aufgelistet, mit Angabe von:

Grundlegendes zu den Konfigurationspfaden und -speicherorten understand-the-configuration-paths-and-locations

Der RTE-Bearbeitungsmodus (und die Benutzeroberfläche), den Sie Ihren Autoren bereitstellen, legt den Speicherort für die Konfigurationsdetails fest, wenn Sie die RTE-Plug-ins aktivieren:

Konfigurieren Sie die folgenden Eigenschaften, die nur im Dialogfeld-Bearbeitungsmodus in der Touch-optimierten Benutzeroberfläche verfügbar sind:

Wenn der RTE im Touch-optimierten Dialogfeld verwendet wird, muss die Eigenschaft useFixedInlineToolbar auf „true“ gesetzt werden, um Probleme zu vermeiden.

Anpassen der Bearbeitung im Kontext customizing-in-place-editing

Sie können festlegen, mit welchem HTML-Selektor der Text-Editor beginnt, indem Sie die folgenden Eigenschaften konfigurieren:

Die entsprechende Eigenschaft für den Dialogfeldmodus lautet name.

Aktivieren von RTE-Funktionen durch Aktivieren von Plug-ins enable-rte-functionalities-by-activating-plug-ins

RTE-Funktionen werden über eine Reihe von Plug-ins mit jeweils einer Funktionseigenschaft bereitgestellt. Sie können die Funktionen so konfigurieren, dass die verschiedenen Funktionen der einzelnen Plug-ins aktiviert oder deaktiviert werden.

Ausführliche Konfigurationen der RTE-Plug-ins finden Sie unter Aktivieren und Konfigurieren der RTE-Plug-ins.

Beispiel: Laden Sie diese Beispielkonfiguration herunter, die die Konfiguration des RTE veranschaulicht. In diesem Paket sind alle Funktionen aktiviert.

RTE-Symbolleiste konfigurieren dialogfullscreen

Mit AEM können Sie die Benutzeroberfläche für den Rich-Text-Editor für die verschiedenen Bearbeitungsmodi unterschiedlich konfigurieren. Die Standardeinstellungen finden Sie unten. Sie können diese Standardwerte entsprechend Ihren Anforderungen überschreiben. Sie passen nur die Symbolleisteneigenschaften an, die Sie Ihren Autoren zur Verfügung stellen möchten. Sie müssen nicht alle Symbolleistenkonfigurationen angeben.

Um die Symbolleiste für dialogFullScreen zu konfigurieren, verwenden Sie die folgende Beispielkonfiguration.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Für den Inline-Modus und den Vollbildmodus werden verschiedene Benutzeroberflächeneinstellungen verwendet. Mit der Symbolleisteneigenschaft wird verwendet, um die Schaltflächen der Symbolleiste anzugeben.

Wenn die Schaltfläche selbst eine Funktion aufweist (z. B. Bold), wird sie als PluginName#FeatureName angegeben (z. B. links#modifylink).

Wenn es sich bei der Schaltfläche um ein Popover handelt (sie also einige Funktionen eines Plug-ins aufweist), wird sie als #PluginName angegeben (z. B. #format).

Trennzeichen (|) zwischen einer Gruppe von Schaltflächen können mit - angegeben werden.

Der Popup-Knoten im Inline- oder Vollbildmodus enthält eine Liste der verwendeten Popovers. Jeder untergeordnete Knoten unter dem Knoten wird nach dem Plug-in benannt (z. B. „Format“). Er verfügt über eine Eigenschaft „items“, die eine Liste der Funktionen des Plug-ins beinhaltet (z. B. „format#bold“).

Einstellungen für die RTE-Benutzeroberfläche und Content-Richtlinien rtecontentpolicies

Administratoren können die RTE-Optionen mithilfe von Content-Richtlinien steuern, anstatt die Konfiguration wie oben beschrieben durchzuführen. Inhaltsrichtlinien definieren die Designeigenschaften einer Komponente, wenn sie als Teil einer bearbeitbaren Vorlage verwendet wird. Wenn zum Beispiel eine Textkomponente, die den RTE verwendet, mit einer bearbeitbaren Vorlage verwendet wird, kann die Content-Richtlinie definieren, dass die fettgedruckte Option und einige Absatzformatierungsoptionen verfügbar sind. Inhaltsrichtlinien sind wiederverwendbar und können auf mehrere Vorlagen angewendet werden.

Die verfügbaren Optionen im RTE werden von der Benutzeroberflächenkonfiguration abwärts zu den Content-Richtlinien übertragen.

Beispielsweise können Sie die Dokumentation zur Text-Kernkomponente sehen.

Anpassen der Zuordnung zwischen Symbolleistenelementen und Befehlen iconstoolbar

Sie können die Zuordnung zwischen in der RTE-Symbolleiste angezeigten Coral-Symbolen und den verfügbaren Befehlen anpassen. Sie können keine anderen Symbole als Coral-Symbole verwenden.

Unten finden Sie einen Beispielausschnitt zur Zuordnung des Befehls „Bold“ (Fett) zum Coral-Symbol mit dem Namen textItalic.

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format#bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

Wechseln zum CoralUI 2-Rich-Text-Editor switch-to-coralui-rich-text-editor

Sie können auf einer Seite entweder die CoralUI 2-RTE-Client-Bibliothek oder die CoralUI 3-RTE-Client-Bibliothek einbeziehen. Standardmäßig enthält der Rich-Text-Editor die CoralUI 3-RTE-Client-Bibliothek. Um zum RTE von CoralUI 2 zu wechseln, führen Sie die folgenden Schritte aus.

Weiterführende Informationen further-information

Weitere Informationen zum Konfigurieren des RTE finden Sie in der Referenz zur AEM Widget-API.

Insbesondere, um die verfügbaren Plug-ins und zugehörigen Optionen anzuzeigen:

Diese können verwendet werden, um Ihren eigenen RTE zu erweitern und anzupassen. Um zum Beispiel die auf der Seite verfügbaren Anker beim Erstellen eines Links aufzulisten, können Sie eine eigene Implementierung des LinkPlugin bereitstellen.

Bekannte Einschränkungen known-limitations

Für die RTE-Funktion gelten folgende Einschränkungen:

Best Practices und Tipps best-practices-and-tips

Beheben häufiger Probleme mit dem RTE troubleshoot-issues-with-aem-rich-text-editor

Wie lassen sich mehrere Tabellenzellen auswählen?

Um mehrere Zellen in einer Tabelle auszuwählen, drücken Sie Ctrl oder Cmd und klicken Sie dann nacheinander auf die Tabellenzellen.

Führen Sie nun eine Aktion für die Auswahl durch. Legen Sie beispielsweise die Eigenschaften für die ausgewählten Zellen fest.

Hyperlinks geben beim Bearbeiten von Komponenten über die Schaltfläche „Konfigurieren“ verloren

Fügen Sie in einer Textkomponente einen Hyperlink hinzu, indem Sie ihn mithilfe der Schaltfläche „Konfigurieren“ bearbeiten. Sie können den Hyperlink verlieren, wenn Sie ihn erneut bearbeiten oder ihn ein zweites Mal validieren.

Als Problemumgehung können Sie in die Textkomponente klicken, wenn das Dialogfeld „Bearbeiten“ zum zweiten Mal angezeigt wird, um dann die Validierung des Links durchzuführen.

Dieses Problem wurde mit Einführung von AEM 6.3 behoben.

Im Quell-Bearbeitungsmodus hinzugefügter HTML-Inhalt geht verloren

Fügen Sie keinen HTML-Inhalt hinzu, in den XSS eingebettet sein könnte. AEM (nicht der RTE) entfernt ggf. HTML-Inhalt, um den XSS Antisamy-Regeln zu entsprechen.

Um sicherzustellen, dass das eingefügte HTML gespeichert wird, überprüfen Sie den gespeicherten Inhalt in CRXDE (im Inhaltsknoten).

Wenn das HTML nicht gespeichert wurde, muss sie vom RTE entfernt worden sein, da es nicht den RTE-Regeln entsprach.

Falls der Inhalt in CRXDE gespeichert wurde, jedoch nicht auf der Seite gerendert wird (zeigen Sie zum Überprüfen des Renderings die Vorschau der Seite an), wurde er aufgrund der XSS-Regeln von AEM entfernt.

Mehrfeld-Komponente funktioniert nicht erwartungsgemäß

Verwenden Sie ausschließlich CoralUI 3, um eine Komponente mit mehreren Feldern zu erstellen. Verwenden Sie keine Komponenten-Dialogfelder von CoralUI 2.

Überprüfen Sie außerdem, ob der Code und die Knotenstruktur für die Mehrfeld-Implementierung korrekt sind.

Für Admins verfügbare Konfigurationen stehen Autoren nicht zur Verfügung

Wenn Aktualisierungen an Benutzeroberflächenkonfigurationen für Administrator-, jedoch nicht für Autorenkonten übernommen werden, stellen Sie sicher, dass der Konfigurationsknoten nicht mit config benannt wurde. Verwenden Sie die Eigenschaft configPath.