Konfigurieren des RTE für den universellen Editor configure-rte

Erfahren Sie, wie Sie den Rich-Text-Editor (RTE) im universellen Editor konfigurieren können.

Überblick overview

Der universelle Editor bietet sowohl im Kontext als auch im Eigenschaftenbereich einen Rich-Text-Editor (RTE), mit dem Autoren Formatierungsänderungen anwenden können, wenn sie ihren Text bearbeiten.

Dieser RTE kann mithilfe von Komponentenfiltern“ konfiguriert ​ In diesem Dokument wird beschrieben, welche Konfigurationsoptionen zusammen mit Beispielen verfügbar sind.

Konfigurationsstruktur structure

Die RTE-Konfiguration besteht aus zwei Teilen:

Diese Konfigurationen können als Teil eines Komponentenfilters“ mit ​ Eigenschaft rte definiert werden.

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

Symbolleistenkonfiguration toolbar

Die Konfiguration der Symbolleiste steuert, welche Bearbeitungsoptionen in der Benutzeroberfläche verfügbar sind und wie sie organisiert sind. Dies sind die verfügbaren Abschnitte

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike", "text_color"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Aktionskonfiguration action

Mit der Konfiguration von Aktionen können Sie das Verhalten und Erscheinungsbild einzelner Bearbeitungsaktionen anpassen. Dies sind die verfügbaren Abschnitte.

Allgemeine Aktionsoptionen common-action-options

Die meisten Aktionen unterstützen die folgenden allgemeinen Optionen:

{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

Aktionen formatieren format

Formatierungsaktionen werden verwendet, um Formatierungen anzuwenden und den Wechsel zwischen HTML-Tags zur Auswahl semantischer Varianten zu unterstützen. Die folgenden Abschnitte sind verfügbar.

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

Aktionen auflisten list

Listenaktionen unterstützen den Inhaltsumbruch zur Steuerung der HTML-Struktur. Die folgenden Abschnitte sind verfügbar.

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

Tabellenaktionen table-actions

Tabellenaktionen unterstützen den Inhaltsumbruch zur Steuerung der HTML-Struktur in Tabellenzellen:

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

Tabellenkonfigurationsoptionen table-configuration-options

Beispiele:

Wenn wrapInParagraphs: false:

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

Wenn wrapInParagraphs: true:

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>

Eigenschaften-Dialogfelder properties-dialog

Das Tabellen-Plug-in verfügt über drei Eigenschaften-Editor-Dialogfelder, die über das Menü Tabelle geöffnet werden, wenn diese Flags aktiviert sind:

Alle drei sind standardmäßig deaktiviert (Opt-in) und entsprechen dem Rest der RTE-Konfigurationsoberfläche, in der die Funktionen deaktiviert sind, bis sie von einem Verbraucher explizit aktiviert werden. Opt-in pro Verbraucher, wenn die Dialogfelder angezeigt werden sollen:

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

Optionen im Dialogfeld „Eigenschaften“ properties-dialog-options

|—|—|—|
| Option | Standard | Ergebnis |
| showTableProperties | false | Das Element Tabelleneigenschaften in der Dropdown-Liste Tabelle anzeigen |
| showRowProperties | false | Das Element Zeileneigenschaften im Untermenü Zeile anzeigen |
| showCellProperties | false | Das Element Zelleneigenschaften im Untermenü Zelle anzeigen |

Die Dialogfelder durchlaufen htmlAttrs.style auf dem entsprechenden ProseMirror-Knoten, d. h. Inline-CSS wie TinyMCE/Word, geben keine benutzerdefinierten Datenattribute aus. Die Zellenbreite schreibt auch die colwidth auf Schemaebene, sodass sie die PM-Tabellenmaschine überlebt. Der Zellentyp wird durch das Knoten-Tag übertragen (<td>/<th>).

Das prosemirror-tables Schema ist flach (table -> table_row -> cell) ohne <thead>/<tbody>/<tfoot> Abschnittsknoten, sodass intern die Kopf-/Hauptteil-/Fußzeilenabsicht einer Zeile als data-row-type auf der <tr> gehalten wird. Wenn sich der Typ einer Zeile ändert, werden die Zeilen innerhalb derselben Transaktion in der Reihenfolge Kopfzeile -> Hauptteil -> Fußzeile neu sortiert, sodass die Arbeitsfläche des Editors mit der exportierten Struktur live übereinstimmt (Kopfzeilen werden oben hochgehoben, Fußzeilen werden unten versenkt, wie TinyMCE). Diese im Editor vorgenommene Neuanordnung wird übersprungen, wenn eine Zelle sich über mehrere Zeilen erstreckt (rowspan > 1), wobei das Verschieben einer Zeile das Raster beschädigen würde. Auf dem Weg hinaus gruppiert sanitizeHTML die Zeilen in echte <thead>/<tbody>/<tfoot> Abschnitte (Kopfzeilen zuerst, Fußzeilen zuletzt) und lässt die Markierung fallen, was die gleiche Struktur TinyMCE/Word-Ausgabe erzeugt. Auf dem Weg hinein wird der umschließende Abschnitt eines <tr> wieder in den Marker gelesen, so abgeschnittene HTML-Rundfahrten.

Aktionen verknüpfen link

Link-Aktionen unterstützen die Steuerung der Zielattribute zur Verwaltung des Link-Verhaltens. Die folgenden Abschnitte sind verfügbar.

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}

Link-Konfigurationsoptionen link-options

Die unlink Aktion wird nur angezeigt, wenn der Cursor in einem vorhandenen Link positioniert wird. Die Link-Formatierung wird entfernt, während der Textinhalt beibehalten wird.

Bildaktionen image

Bildaktionen unterstützen das Umbrechen von Bildelementen, um ein responsives Bild-Markup zu generieren. Die folgenden Abschnitte sind verfügbar.

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

Bildkonfigurationsoptionen image-options

Vollbild full-screen

Die Vollbildaktion schaltet den Editor in den Vollbildmodus um und aus ihm heraus:

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

Wenn der Vollbildmodus aktiv ist, erhält der Editor-Wrapper die rte-fullscreen-wrapper. Privatkunden-Apps können diese Klasse als Ziel auswählen, um benutzerdefinierte Stile oder CSS-Eigenschaften (z. B. z-Index, Dimensionen, Überlagerung) anzuwenden. (Im universellen Editor nicht unterstützt)

Konfiguration der Einzüge indentation

Einzüge verfügen über eine Konfiguration auf Funktionsebene, die den Umfang des Einrückungsverhaltens steuert, sowie über individuelle Aktionskonfigurationen für Tastaturbefehle und Beschriftungen.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

Optionen für Einzugsumfang indentation-options

Sonderzeichen special-characters

Die special_characters Einfügeaktion öffnet ein Popover zur Zeichenauswahl, in dem Sonderzeichen (Symbole, mathematische Operatoren, Währungszeichen, Satzzeichen, Pfeile usw.) eingefügt werden können an der Cursorposition.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

Ein Standardsatz von 44 häufig verwendeten Zeichen ist standardmäßig enthalten. Die Zeichenliste kann über zwei Konfigurationsoptionen angepasst werden:

Jeder Zeicheneintrag hat character (das Unicode-Zeichen) und title (QuickInfo / barrierefreier Name).

Zeichen an Standardwerte anhängen append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

Standard-Sonderzeichen ersetzen replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

Beide Optionen zusammen both-special-character-options

In diesem Beispiel wird characters als Basis verwendet und dann werden zusätzliche Zeichen mithilfe von appendCharacters angehängt.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

CSS-Klassen css-classes

Die classes Aktion fügt ein Dropdown-Menü hinzu, das eine konfigurierbare CSS-Klasse auf RTE-Inhalte anwendet. Er wird als Element im Abschnitt advanced aufgeführt. Das Plug-in schreibt/entfernt nur Klassennamen in den erzeugten HTML. Die Consumer-App steuert das tatsächliche CSS für jede Klasse und ist für das Laden dort verantwortlich, wo der RTE-Inhalt gerendert wird (Editor, Vorschau, Veröffentlichung).

Das Dropdown-Menü wird nur angezeigt, wenn mindestens eine Option konfiguriert ist. Das Plug-in wird ohne Standardeinstellungen bereitgestellt.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

Jeder Eintrag hat einen -Wert (den in den HTML geschriebenen CSS-Klassennamen) und eine -Kennzeichnung (den in der Dropdown-Liste angezeigten, für Menschen lesbaren Text).

Das Ziel folgt der Caret-to-Caret-Wins-Regel:

Vorhandene Klassen, die nicht zur Liste der konfigurierten Optionen gehören, bleiben unberührt. Nur die verwalteten Klassen werden ein-/ausgetauscht. Benutzerdefinierte Klassen koexistieren sicher mit dem Plug-in.

Dropdown-Spiegelung:

Blocktypen block-types

Der Abschnitt blocks-Symbolleiste rendert ein Dropdown-Menü, in dem der aktuelle Block zwischen den konfigurierten Blocktypen gewechselt wird. Unterstützte Werte sind paragraph, h1-h6, code_block und blockquote.

{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

Als Text einfügen paste-as-text

Die paste_text-Editor-Aktion ermöglicht einen standardmäßigen Workflow zum Einfügen als reiner Text .

{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

Suchen und Ersetzen find-replace

Die find_and_replace-Editor-Aktion verwendet prosemirror-search (Übereinstimmungshighlights) plus ein von FIND_AND_REPLACE_PLUGIN_KEY eingegebenes Befehls-Plug-in.

{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

Sonstige Aktionen other

Alle anderen Aktionen unterstützen grundlegende Anpassungen. Die folgenden Abschnitte sind verfügbar.

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

Vollständiges Beispiel example

Im Folgenden finden Sie ein Beispiel für eine vollständige Konfiguration.

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

Details zur Aktionsoption action-details

Mehrere Optionen bieten zusätzliche Details, die Sie beachten sollten.

wrapInParagraphs wrapInParagraphs

Die wrapInParagraphs für Listen steuert die HTML-Struktur.

wrapInParagraphs: false (Standard) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

Verwenden Sie wrapInParagraphs: true bei Bedarf:

wrapInPicture

Die Option wrapInPicture für Bilder steuert die für Bildinhalte generierte HTML-Struktur.

wrapInPicture: false (Standard) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture: true wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

Verwenden Sie wrapInPicture: true bei Bedarf:

Optionen für Link-Zielgruppe link-target

Die Option hideTarget für Links steuert, ob das Attribut target in generierten Links enthalten ist und ob das Dialogfeld für die Link-Erstellung ein Feld für die Zielauswahl enthält.

hideTarget: false (Standard) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

Deaktivieren von Links auf Bildern disableforimages

Die Option disableForImages für Links steuert, ob Benutzer Links auf Bildern und Bildelementen erstellen können. Dies gilt sowohl für Inline-<img> als auch für <picture> auf Blockebene.

disableForImages: false (Standard) disableforimages-false

Benutzer können Bilder auswählen und sie in Links einschließen.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages: true disableforimages-true

Die Link-Schaltfläche ist deaktiviert, wenn ein Bild oder Bild ausgewählt wird. Benutzer können nur Links auf Textinhalten erstellen.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

Verwenden Sie disableForImages: true, wenn Sie Folgendes tun möchten:

Tag-Optionen tag

Formataktionen ermöglichen den Wechsel zwischen HTML-Varianten.

Wählen Sie semantische Tags (<strong>, <em>, <del>) für bessere Barrierefreiheit und SEO.

Textfarbe color

Mit der Option “text_color” werden dem Editor Textfarbfunktionen hinzugefügt.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

Das Plug-in analysiert auch veraltete <font color="..."> aus Gründen der Abwärtskompatibilität.

Tastaturbefehle keyboard-shortcuts

Bei den Tastaturbefehlen wird/werden das Format Mod-Key(en) verwendet, wobei:

Nicht unterstützter HTML unsupported-html

Unbekannte HTML-Tags werden standardmäßig entfernt, wenn sie vom Editor analysiert werden. Um sie beizubehalten, melden Sie sich über die unsupportedHtml an:

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};

unsupportedHtmlOptions.structuralTags (optional) unsupportedhtmloptions

Verwenden Sie unsupportedHtmlOptions.structuralTags, um zu steuern, welche zusätzlichen strukturellen Tags als unterstützte HTML behandelt werden.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};

Wenn diese Option aktiviert ist, rendert der Editor nicht unterstützte Knoten mit Wrapper-Tags (unsupported-block/unsupported-inline) und Wrapper-Klassen. Consumer-Apps sollten den Stil für diese Klasse bereitstellen (z. B. Rahmen, Abstand, Hintergrund). Die Tag-Kennzeichnung innerhalb des Blocks verwendet rte-unsupported-label, die auch angepasst werden kann.

Verbraucher-Apps sollten Stile für diese Klassen bereitstellen (z. B. Rahmen, Abstand, Hintergrund und Inline-Ausrichtung).

Wenn unsupportedHtml aktiviert ist, sollte der Benutzer das nicht unterstützte Knoten-Plug-in hinzufügen (z. B. createUnsupportedNodesPlugin()), damit beim Kopieren eines nicht unterstützten Blocks oder Inline-Knotens der innere Text in die Zwischenablage eingefügt wird (nur Text) und Benutzer den Inhalt an einer anderen Stelle einfügen können.