Sie sehen sich Hilfeinhalte der folgenden Version an:

Es ist möglich, eine Komponente in der Touch-optimierten Benutzeroberfläche so zu konfigurieren, dass sie mehrere Editoren für Bearbeitung in Kontext aufweist.

Nach der Konfiguration können Sie den entsprechenden Inhalt auswählen und den passenden Editor öffnen. Beispiel:

chlimage_1

Konfigurieren mehrerer Editoren

Um die Verwendung mehrerer Editoren für Bearbeitung in Kontext zu ermöglichen, wurde die Struktur des Knotentyps cq:InplaceEditingConfig um die Definition des Knotentyps cq:ChildEditorConfig erweitert.

Beispiel:

   /**
       * Configures inplace editing of a component.
       *
       * @prop active true to activate inplace editing for the component
       * @prop editorType ID of inplace editor to use
       * @prop cq:childEditors collection of {@link cq:ChildEditorConfig} nodes.
       * @prop configPath path to editor's config (optional)
       * @node config editor's config (used if no configPath is specified; optional)
     */
    [cq:InplaceEditingConfig] > nt:unstructured
      - active (boolean)
      - editorType (string)
      + cq:childEditors (nt:base) = nt:unstructured
      - configPath (string)
      + config (nt:unstructured) = nt:unstructured

    /**
      * Configures one child editor for a subcomponent. The name of the this node will
      * be used as DD id.
      *
      * @prop type type of the inline editor. eg: ["image"]
      * @prop title totle od the inline editor
      * @prop icon icon to represent the inline editor
    */
    [cq:ChildEditorConfig] > nt:unstructured
      orderable
      - type (string)
      - title (string)

Gehen Sie wie folgt vor, um mehrere Editoren zu konfigurieren:

  1. Definieren Sie für den Knoten cq:inplaceEditing (des Typs cq:InplaceEditingConfig) die folgende Eigenschaft:

    • Name: editorType
    • Typ: String
    • Wert: hybrid
  2. Erstellen Sie unter diesem Knoten einen neuen Knoten:

    • Name: cq:ChildEditors
    • Typ: nt:unstructured
  3. Erstellen Sie unter dem Knoten cq:childEditors für jeden Editor für Bearbeitung in Kontext einen neuen Knoten:

    • Name: Der Name jedes Knotens sollte dem Namen der Eigenschaft entsprechen, die er repräsentiert (wie bei Ablagezielen). Beispielsweise image, text.
    • Type: cq:ChildEditorConfig

    Hinweis:

    Es besteht eine Korrelation zwischen den definierten Ablagezielen und den untergeordneten Editoren. Der Name des Knotens cq:ChildEditorConfig wird als ID des Ablageziels für die Verwendung als Parameter für den ausgewählten untergeordneten Editor herangezogen. Wenn der bearbeitbare Unterbereich kein Ablageziel hat (etwa wie bei einer Textkomponente), dann wird der Name des untergeordneten Editors weiterhin als ID zur Identifizierung des entsprechenden bearbeitbaren Bereichs herangezogen.

  4.  

    Definieren Sie auf jedem dieser Knoten (cq:ChildEditorConfig) die folgenden Eigenschaften:

    • Name: type
    • Wert: Name des registrierten Editors für Bearbeitung in Kontext, beispielsweise image, text
    • Name: title
    • Wert: der Titel, den Sie in der Komponentenauswahlliste (der verfügbaren Editoren) anzeigen möchten, beispielsweise Image, Text

Zusätzliche Konfiguration für Rich-Text-Editoren

Die Konfiguration mehrerer Rich-Text-Editoren unterscheidet sich etwas vom zuvor beschriebenen Verfahren, da Sie jede einzelne RTE-Instanz separat konfigurieren können.  

Hinweis:

Weitere Informationen finden Sie unter Konfigurieren des Rich-Text-Editors.

Um mehrere RTEs verwenden zu können, benötigen Sie eine Konfiguration für jeden Rich-Text-Editor für Bearbeitung in Kontext:

  • Definieren Sie unter cq:InplaceEditingConfig den Knoten config.
    • Definieren Sie unter dem Knoten config die einzelnen RTE-Konfigurationen.
    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    config
                        text1
                            rtePlugins
                        text2
                            rtePlugins

Hinweis:

Es empfiehlt sich, den Knoten config unter cq:InplaceEditingConfig zu definieren, da jeder einzelne Rich-Text-Editor eine andere Konfiguration aufweisen kann.

Für Rich-Text-Editoren wird jedoch die Eigenschaft configPath unterstützt, wenn es nur eine Instanz des Text-Editors (bearbeitbarer Unterbereich) in der Komponente gibt. Diese Verwendung von configPath wird ermöglicht, um die Abwärtskompatibilität mit Dialogfeldern für ältere Benutzeroberflächen der Komponente zu unterstützen.

Codebeispiele

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Hinzufügen von Editoren für Bearbeitung in Kontext

Allgemeine Informationen zum Hinzufügen eines Editors für Bearbeitung in Kontext finden Sie im Dokument Anpassen der Seitenbearbeitung.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie