Rich-Text-Editor-Konfiguration

Sie müssen einige der mit dem RichText Editor verbundenen Funktionen aktivieren, sind sich aber nicht sicher, wie Sie dies tun sollen.

Lösung

Um dem RichText Editor zusätzliche Funktionen hinzuzufügen, passen Sie die Komponente RichText Editor an. Da es nicht empfohlen wird, Änderungen im Ordner /libs vorzunehmen, ist es notwendig, diese Änderungen zu überlagern.

1. Erstellen Sie den Ordner /apps/foundation/components.
2. Kopieren Sie den Knoten /libs/foundation/components/text in den obigen Ordner.
3. Navigieren Sie mit dem Content Explorer von CRX zu /apps/foundation/components/text/dialog/items/text. Alle verfügbaren Funktionen werden von einer verknüpften Eigenschaft dieses Knotens aktiviert oder deaktiviert. Um die neu aktivierte Funktion zu sehen, muss die Seite has neu geladen werden.

Hinweis: Alle nachfolgend definierten enableXXXX-Eigenschaften werden als Boolean angenommen, sofern nicht anders angegeben. Außerdem sind die fettgedruckten Texte Eigenschaften des Text-Knotens unter /apps.

• enableParagraphFormat (true|false)

Hinweis: Um weitere Formate zu definieren, legen Sie unter dem Knoten "text" einen nt:unstrukturierten Knotennamen "formats" an. Fügen Sie für jeden Absatzformattyp einen untergeordneten nt:unstrukturierten Knoten (unter dem Knoten "formats" mit einem beliebigen Namen) hinzu, der eine Eigenschaft "tag" und eine Eigenschaft "description" enthält. Die Eigenschaft "tag" definiert das Block-Tag, das auf entsprechende Textfragmente angewendet wird (z.B. "p" für Absätze, "h1" für Überschriften erster Ordnung usw.). Die Eigenschaft "description" wird in der Dropdown-Box für den Anzeigenamen verwendet (z.B. "Paragraph", "Heading 1", etc.).

• enableStyle (true|false)

Hinweis: Die folgenden beiden Knoten müssen definiert werden. Die CSS-Datei muss manuell als Teil des Headers aller Templates, die die RTE verwenden, eingebunden werden.

1. Fügen Sie nt:unstrukturierten Knoten (unter dem Knoten "text") namens "externalStyleSheets" hinzu, um die externen Stylesheets zu definieren. Fügen Sie jedes Stylesheet als Eigenschaft mit einem beliebigen Namen hinzu. Der Wert der Eigenschaft sollte einen Repository-Pfad zum Stylesheet definieren - zum Beispiel "/path/to/some/stylesheet.css".
2. Fügen Sie nt:unstrukturierten Knoten (unter dem Knoten "text") namens "cssStyles" hinzu, um die Stile zu definieren, die auf ein Textfragment angewendet werden sollen. Definieren Sie für jeden Stil eine Eigenschaft. Der Eigenschaftsname definiert den anzuwendenden CSS-Klassennamen. Dieser Wert muss mit dem Namen in der CSS-Datei aus dem vorherigen Schritt übereinstimmen. Der Eigenschaftswert definiert den Text, der in der Dropdown-Liste angezeigt wird, um den Stil zu identifizieren.

• enableSpecialChars (true|false)

Hinweis: Nach Vorgabe erscheinen nur die Sonderzeichen Marke (™), eingetragen (®) und Copyright (©). Für weitere Sonderzeichen muss Folgendes erforderlich sein:

Erstellen Sie einen nt:unstrukturierten Knoten (unter dem Knoten "text") namens specialCharsConfig.

Erstellen Sie einen nt:unstrukturierten Knoten namens chars unter dem Knoten specialCharsConfig. Unter dem Zeichenknoten können Sie Zeichen und Zeichenbereiche angeben, die im Dialog erscheinen sollen.

1. Für einzelne Zeichen legen Sie einen nt:unstrukturierten Knoten an. Dieser Knoten enthält eine Entity-Eigenschaft mit dem Wert des Sonderzeichens. Zum Beispiel würde ein Knoten "copyright" mit der Eigenschaft "entity" und value© das Zeichen © hinzufügen. Die Entity-Notation muss das Format &....; haben, wenn ein einzelnes Zeichen definiert wird.
2. Legen Sie für den Zeichenbereich einen nt:unstrukturierten Knoten mit einem beliebigen Namen an. Dieser Knoten hat die Eigenschaften rangeStart (Typ: Long) und rangeEnd (Typ: Long). Diese Eigenschaften definieren einen Zeichenbereich. Zum Beispiel rangeStart: 65, BereichEnde: 90 fügt dem Dialog die Buchstaben A bis Z hinzu. Bei der Angabe eines Zeichenbereichs müssen Sie die entsprechende Unicode-Nummer angeben.

• Die functionality/outdent ist standardmäßig aktiviert. Sie können sie deaktivieren, indem Sie ein annt:unstructured „listButtons“ ohne Eigenschaften hinzufügen. die anderen Buttons ("ordered", "unordered") must explizit konfiguriert werden, wenn der Knoten listButtons" hinzugefügt wird.

• Die Ankerfunktionalität ist standardmäßig aktiviert. Um sie zu deaktivieren, fügen Sie einen nt:unstrukturierten Knoten namens "linkButtons" hinzu. Fügen Sie unter dem Knoten "linkButtons" die Eigenschaften "createlink", "unlink" und "anchor" hinzu. Jede Eigenschaft ist vom Typ "Boolean". Jede Eigenschaft legt fest, ob die entsprechende Schaltfläche aktiviert oder deaktiviert ist.

• enableSubSuperScript (true|false)

• enableFontSize (true|false)

• enableSourceEdit (true|false)

• enableFont (true|false)

• enableColors (true|false)

Um Tabelle in RTE zu aktivieren, gehen Sie wie folgt vor:

1. Knoten rtePlugins (nt:unstrukturiert) anlegen unter /libs/foundation/components/text/dialog/items/text
2. Erstellen Sie eine node (nt:unstructured) unter/libs/base/components/text/dialog/items/text/rtePlugins
3. Fügen Sie dem Tabellen-Knoten eine String-Eigenschaft mit dem Wert zu *.

Spezielle Hinweise:

• Der Cache des Client-Browsers ist ein großes Problem bei der Konfiguration des Texteditors. Wenn eine Aktivierungsfunktion im Browser nicht angezeigt wird, muss der Browser-Cache vollständig geleert werden.
• Es gibt eine angehängte Musterkonfiguration, die Sie ausprobieren können.
• Dieses Anbauteil ermöglicht alle RTE-Funktionen.
  

Hinweis: die Konfiguration wird unter /libs gespeichert. Außerdem wurde die statische.css von geometrixx unter /etc/design um einen weiteren Style erweitert.

Gilt für

Liste CQ5.2