Dokumentation

Installieren und konfigurieren Sie den Editor und steuern Sie ihn aus Ihrem Code. 108 Anleitungen und Referenzseiten.

Hier beginnen

Schnellstart

RichTextEditor 2.6.12 zum Laufen bringen: einen Einrichtungsweg wählen, den ersten Editor erstellen, HTML lesen und speichern und häufige Probleme bei der Einrichtung beheben.

Konfigurationsreferenz

Alle Konfigurationsoptionen von RichTextEditor: Einstellungen des Editor-Kerns, intelligente Typografie, Iframe-Sicherheit und mehr als 100 Plugin-Optionen für KI, Export, Seitenaufteilung, Barrierefreiheit und Inhaltssicherheit.

Alle Methoden

Vollständige Referenz der JavaScript-API-Methoden von RichTextEditor-Instanzen: Methoden für Inhalt, Auswahl, Befehle, Dialoge und Lebenszyklus.

AI Toolkit

Referenz zum AI Toolkit: der Dialog Ask AI, AI Chat, AI Review, der Hook aiToolkitResolver, der Vertrag für Operationen, eigene Aktionen und BYOK.

Erste Schritte

So installieren, einrichten und konfigurieren Sie den Editor.

Schnellstart

RichTextEditor 2.6.12 zum Laufen bringen: einen Einrichtungsweg wählen, den ersten Editor erstellen, HTML lesen und speichern und häufige Probleme bei der Einrichtung beheben.

Installation (div)

RichTextEditor auf einem div-Element installieren: rte.js einbinden, die Instanz erstellen und HTML-Inhalt aus Ihren eigenen Skripten lesen oder setzen.

Installation (textarea)

RichTextEditor auf einer textarea installieren: Der Editor synchronisiert das HTML automatisch zurück in das Formularfeld, sodass vorhandene Formular-POSTs weiter funktionieren.

Initialisierung

RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.

Konfiguration

RichTextEditor lässt sich auf verschiedene Weise konfigurieren, damit die Bearbeitung zu Ihren Anforderungen passt.

Konfigurationsreferenz

Alle Konfigurationsoptionen von RichTextEditor: Einstellungen des Editor-Kerns, intelligente Typografie, Iframe-Sicherheit und mehr als 100 Plugin-Optionen für KI, Export, Seitenaufteilung, Barrierefreiheit und Inhaltssicherheit.

Skin

Skin und Theme konfigurieren: Skins der Symbolleiste wechseln, CSS-Variablen überschreiben und den Rahmen des Editors an Ihr Produkt anpassen.

Inhalt setzen und abrufen

Die üblichen Wege, den HTML-Inhalt von RichTextEditor per JavaScript zu setzen und zu lesen, auch vor dem Absenden eines Formulars.

React-State & Cursor-Probleme

Kontrollierten oder unkontrollierten State für RichTextEditor in React wählen. Aktuelles HTML speichern, veraltete Autosave-Antworten verhindern und Cursorsprünge, erneutes Mounten und Cleanup im Strict Mode diagnostizieren.

Formularvalidierung & Pflichtfelder

Ein Pflichtfeld mit RichTextEditor validieren, ohne leeres HTML als Inhalt zu zählen. Die textarea synchronisieren, barrierefreie Fehler anzeigen und die Validierung auf dem Server wiederholen.

FAQ

Antworten auf häufige Fragen zu Integration, Konfiguration, Lizenzierung, Browserunterstützung und Fehlerbehebung bei RichTextEditor.

KI

KI-Schreibwerkzeuge und die Anbindung Ihres eigenen Anbieters.

AI Toolkit

Referenz zum AI Toolkit: der Dialog Ask AI, AI Chat, AI Review, der Hook aiToolkitResolver, der Vertrag für Operationen, eigene Aktionen und BYOK.

KI-Anbieter, Streaming & DOCX

Eingebaute Anbieter-Resolver für OpenAI, Anthropic und Azure OpenAI, Streaming per Server-Sent Events und DOCX-Export auf dem Server.

BYOK-Schlüsseltresor (Schlüssel pro Mandant)

Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.

Dokumente & Schreiben

Word-Export, Seitenlayout, strukturierte Inhalte und Eingabe.

DOCX-Genauigkeit & Sicherheit

Die getestete Matrix für HTML zu DOCX, der Request-Vertrag, Konventionen für Review-Markup, die Sicherheitsgrenze bei Bildern und bewusste Grenzen.

Seitenumbruch & juristische Nummerierung

Seitenweise Ansicht (A4, Letter und Legal, mit Kopf- und Fußzeilen und Seitenzahlen) und mehrstufige juristische Nummerierung, in der Standardlizenz enthalten.

Fußnoten, Format übertragen & Groß-/Kleinschreibung

Automatisch nummerierte Fußnoten, ein Werkzeug zum Übertragen der Zeichenformatierung und Groß-/Kleinschreibung ändern (UPPER, lower, Title, Sentence) – in der Standardlizenz.

Strukturierte Inhalte

RichTextEditor-Dokumentation zu strukturiertem JSON, Markdown-Konvertierung, statischem HTML-Rendering und Validierung.

Diktat

Sprache zu Text über die Web Speech API. Mikrofon-Schaltfläche in der Symbolleiste, Zwischenergebnisse live, optional aktivierbar.

Mobiler Symbolleistenmodus

Optionales mobiles Stylesheet mit Tippzielen von 44x44, horizontal scrollender Symbolleiste, fixiertem Kopfbereich und Dialogen als Bottom Sheets.

Zusammenarbeit

Kommentare, Änderungsverfolgung und Bearbeitung in Echtzeit.

Zusammenarbeit & Review

Referenz der Plugins für Zusammenarbeit und Review: Slash-Befehle, @-Erwähnungen, Änderungsverfolgung, Kommentare, Versionsverlauf und Präsenz mit Yjs.

Yjs-CRDT-Engine pro Knoten

Wie textSync: 'crdt' intern funktioniert: die Bindung pro Knoten, die Kodierung der Awareness, der Undo-Manager pro Autor und der Dispatcher in rte.js.

Bilder & Uploads

Bilder und Dateien hochladen, speichern und durchsuchen.

Dateien hochladen

Sichere Datei-Uploads für RichTextEditor konfigurieren: mit eigenem Handler, Validierung, Fortschritts-Callbacks und Kontrollen für die Speicherung auf dem Server.

Pfad der Bildergalerie

Den Dialog „Insert Gallery“ auf Ihre eigenen Bilder richten: der JSON-Vertrag für Ordner, wie aus einem Ordner eine URL wird, und Endpoint-Code für ASP.NET, ASP.NET Core und PHP.

Bilder als Dateien speichern

Bildeinrichtung für die Produktion: Upload- und Galerieordner anlegen, den Upload-Handler verbinden, das Einbetten als Base64 abschalten, Base64 auf dem Server ablehnen und vorhandene Base64-Bilder in Dateien verschieben. ASP.NET Core, ASP.NET und PHP.

Probleme beim Bild-Upload beheben

Bild-Uploads in RichTextEditor Schritt für Schritt diagnostizieren: fehlende Requests, Fehler 403 und 413, ungültige Antworten, defekte Bild-URLs und nach dem Speichern verlorene Bilder.

Cloud-Upload-Anbieter

Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.

Anpassen & erweitern

Symbolleisten, Befehle, Ereignisse und eigene Plugins.

API-Grundlagen

Der Editor stellt clientseitige Methoden bereit, mit denen Sie Inhalte lesen und aktualisieren.

Referenz der Symbolleisten- & Menüeinträge

Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.

Alle Befehle (execCommand)

Vollständige Befehlsreferenz für execCommand(): Befehle für Formatierung, Blöcke, Listen, Tabellen, Medien und Dialoge mit ihren Argumenten.

Alle Eigenschaften

Die schreibgeschützten Eigenschaften einer RichTextEditor-Instanz, über die Sie aus Ihrem Code auf zugehörige Objekte des Editors zugreifen. Mit Beispielen.

Alle Methoden

Vollständige Referenz der JavaScript-API-Methoden von RichTextEditor-Instanzen: Methoden für Inhalt, Auswahl, Befehle, Dialoge und Lebenszyklus.

Ereignisse behandeln

Referenz zu runjsevent: Symbolleisten-Schaltflächen mit eigenen JavaScript-Handlern verbinden und im Anwendungscode auf Editor-Befehle reagieren.

Ihr erstes Plugin schreiben

Ein Plugin für RichTextEditor von Anfang bis Ende bauen: Registrierung, Standardkonfiguration, eine Symbolleisten-Schaltfläche, ein Befehl, der Ereignisbus und was das Plugin mit gespeicherten Inhalten macht.

Bundle-Größe & Plugin-Auswahl

Standardmäßig steckt jedes Plugin in all_plugins.min.js. Laden Sie nur die Plugins, die Sie verwenden, und der Editor sinkt von 529 KB auf 214 KB gzip. Gemessene Vorgaben für Blog, Dokumente, Review und Zusammenarbeit, jeweils mit den Script-Tags.

Funktionen im Einzelnen

Was jede Funktion macht, wie Sie sie aktivieren und welche Optionen sie hat.

Emoji-Auswahl

Durchsuchbare Auswahl von 1,037 Emojis in acht Kategorien mit zuletzt verwendeten Einträgen und Tastaturnavigation. Emojis werden als einfache Unicode-Zeichen gespeichert.

Emoji-Autovervollständigung

Geben Sie :smile: für das Emoji ein oder einen Doppelpunkt und einige Buchstaben zur Auswahl aus einer Liste. Shortcode-Zuordnung, eigene Kürzel und Rückgängig.

Inhaltsvorlagen

Bieten Sie fertige Dokumente in einem durchsuchbaren Dialog mit Live-Vorschau an. Definition von htmlTemplates, unterstützte Formen und Auswirkungen beim Ersetzen von Inhalten.

Mathematische Formeln

Fügen Sie TeX- und LaTeX-Formeln über einen Dialog mit Live-Vorschau ein. Nutzung von KaTeX oder MathJax auf Ihrer Seite, gespeicherte Inhalte und spätere Darstellung.

Mermaid-Diagramme

Erstellen Sie Fluss-, Sequenz-, Kreis- und Gantt-Diagramme aus Mermaid-Text. Mermaid laden oder auf dem Server rendern, gespeicherte Inhalte und spätere Darstellung.

Linkvorschaukarten

Fügen Sie Links als Vorschaukarten mit Titel, Beschreibung, Symbol und Bild ein. Der Editor ruft selbst nichts ab: Verbinden Sie bookmarkResolver mit Ihrem eigenen Endpoint.

Automatisches Einbetten

Fügen Sie einen YouTube-, Vimeo-, Loom- oder anderen Videolink in einer eigenen Zeile ein und erhalten Sie einen 16:9-Player. Unterstützte Websites, eigene Anbieter und gespeichertes Markup.

Smart Chips

Inline-Chips für Datum, Personen und Links mit maschinenlesbarem Wert. Schnelle Datumsauswahl, Vorschläge aus Ihrem eigenen chipResolver und gespeichertes Markup.

Layouttabellen

Markieren Sie Tabellen zur reinen Inhaltsanordnung mit role=presentation, damit Screenreader das Raster überspringen. Befehle, Slash-Menü, API und Auswirkungen.

@Erwähnungen

Geben Sie @ ein und wählen Sie Personen aus einer festen Liste oder Ihrer eigenen Serversuche. Der Chip speichert die Personen-ID im HTML, damit Ihr Server die Erwähnung erkennen kann.

Textvorschläge am Cursor

Graue Inline-Vorschläge hinter dem Cursor aus einer eigenen Resolver-Funktion. Tab übernimmt, Esc verwirft. Kein Modell wird mitgeliefert; rufen Sie Ihren eigenen KI-Endpoint auf.

Inline-Code

Markieren Sie Wörter oder Auswahlen über die Schaltfläche oder den Befehl inlinecode als Code. Speichert ein einfaches <code>-Element; erneutes Drücken entfernt die Codeformatierung.

Abschnitte einklappen

Klappen Sie Abschnitte unter Überschriften per Pfeil oder Skript ein. Das Einklappen betrifft nur die Anzeige; im gespeicherten HTML bleiben alle Abschnitte vollständig erhalten.

Cursor zwischen Blöcken

Fügen Sie Absätze vor einer Tabelle am Dokumentanfang oder zwischen Tabellen, Trennlinien und Bildern ein: per Pfeiltaste, Klick in den Zwischenraum oder blauer Hinweislinie zwischen Blöcken.

Tabellen sortieren und Zeilen nummerieren

Sortieren Sie Tabellenzeilen nach einer Spalte mit Erkennung von Zahlen, Geldbeträgen und Daten. Ergänzen Sie automatische Zeilennummern und verschieben Sie Zeilen und Spalten über Menüs.

Lesbarkeitsstatistik

Flesch Reading Ease, Flesch-Kincaid-Schulstufe, Lesezeit sowie Wort-, Satz- und Silbenzahlen, im Browser berechnet. Anzeige im Dialog oder Abruf per Skript.

Vorlesen

Liest Dokument oder Auswahl mit der Sprachsynthese des Browsers Satz für Satz vor. Eine kleine Leiste bietet Start, Pause sowie Stimmen- und Geschwindigkeitsauswahl.

Bildbearbeitung

Bilder im Dokument zuschneiden, drehen, spiegeln, bemalen und um Text oder Filter ergänzen. Save sendet ein PNG an Ihren Upload-Handler oder bettet es als Daten-URL ein.

Rechtschreibprüfung

Browser-Rechtschreibprüfung im Bearbeitungsbereich und ein Befehl Spell Check, der ein Prüfpanel mit Vorschlägen Ihres eigenen Rechtschreibdienstes öffnet.

Sprache von Textabschnitten

Markieren Sie Wörter oder Passagen mit span lang als Französisch, Hebräisch oder andere Sprache, damit Screenreader sie richtig aussprechen (WCAG 3.1.2 Sprache von Teilen).

Oberfläche für Rechts-nach-links-Sprachen

Spiegelt Symbolleiste, Menüs, Dialoge und Statusleiste für arabische, hebräische, persische und Urdu-Nutzer automatisch oder dauerhaft. Der Inhalt bleibt unverändert.

Stile importieren

Füllt die Menüs für Absatz-, Inline-, Bild- und Linkstile mit CSS-Klassen aus den Stylesheets Ihrer Website, sortiert nach dem Element im jeweiligen Selektor.

HTML für E-Mails

getEmailHTML() kopiert berechnete Stile als Inline-Stile, entfernt Klassen und IDs und umschließt Inhalte mit einer Tabelle fester Breite für die Darstellung in E-Mail-Clients.

Mehrere bearbeitbare Bereiche

Gruppieren Sie Editoren für Titel, Zusammenfassung und Haupttext. Nur der aktive Bereich zeigt eine Symbolleiste; eine API speichert und lädt alle Bereiche gemeinsam.

Shadow DOM

Verwenden Sie den Editor in einem Shadow Root oder einer Web Component. Das Plugin kopiert Editor-Stylesheets in den Shadow Root, auch später hinzugefügte.

Barrierefreie Dialoge

Gibt Editor-Dialogen die Rolle dialog, einen aus dem Titel abgeleiteten Namen und zugängliche Feldnamen, damit Screenreader URL statt Bearbeiten ansagen.

Barrierefreiheit & Betrieb

WCAG-Konformität und der Editor im Produktivbetrieb.

Barrierefreiheit (WCAG 2.2 AA)

Konformitätsziel WCAG 2.2 Level AA, was heute funktioniert, bekannte Lücken und unterstützte Kombinationen assistiver Technologie für RichTextEditor.

Regeln der Barrierefreiheitsprüfung

Jede Regel, die die eingebaute Barrierefreiheitsprüfung auf Editor-Inhalte anwendet, was sie erkennt, welche eine Reparatur per Klick bietet, und die JavaScript-API, um die Prüfung selbst auszuführen.

Produktivbetrieb

RichTextEditor und RichTextBox.AspNetCore im Produktivbetrieb: Rate Limiting, HTTP-Retry, Audit-Logging, Health-Prüfungen, Idempotenz und BYOK.

Methodenreferenz

Jede Editor-Methode, jeweils auf einer eigenen Seite.

Ereignisse

Ereignisse, die der Editor auslöst, und wie Sie darauf reagieren.

Lieber in Aktion sehen?

Zu jeder Funktion in dieser Dokumentation gibt es eine Live-Demo, die Sie bearbeiten und untersuchen können.

Demos ansehenSupport fragen