Konfiguration

Sie können das Erscheinungsbild und das Verhalten von RichText mit den folgenden Eigenschaften konfigurieren:

• menubar — Menüleiste oben ein- oder ausblenden
• toolbar — Sichtbarkeit der Symbolleiste und Schaltflächen konfigurieren
• fullscreenMode — Editor im Vollbildmodus starten
• layoutMode — zwischen dem Layout "classic" und "document" wechseln
• value — anfänglichen HTML-Inhalt festlegen
• locale — ein Lokalisierungsobjekt bei der Initialisierung anwenden
• defaultStyles — Standardstile für bestimmte Blocktypen festlegen
• imageUploadUrl — Endpunkt für Bild-Uploads festlegen
• triggers — @Erwähnungen, #Tags und benutzerdefinierte Dropdown-Trigger aktivieren (siehe Handbuch Erwähnungen und Tags)

Layout-Modi

RichText unterstützt zwei Layout-Modi für den Bearbeitungsbereich:

• "classic" — der Bearbeitungsbereich füllt die gesamte Seite aus

• "document" — der Bearbeitungsbereich imitiert eine Dokumentseite

Legen Sie die Eigenschaft layoutMode bei der Initialisierung fest, um den Modus auszuwählen:

const editor = new richtext.Richtext("#root", {
    layoutMode: "document"
});

Verwandtes Beispiel: RichText. Dokument- und klassischer Modus

Symbolleiste

Die RichText-Symbolleiste gruppiert Steuerelemente in mehrere Blöcke, die Sie anpassen können.

Standardmäßige Symbolleistensteuerelemente

Sie können die folgenden Schaltflächen und Steuerelemente in die RichText-Symbolleiste aufnehmen:

Schaltfläche	Beschreibung
undo	Macht die letzte Benutzeraktion rückgängig
redo	Stellt die zuvor rückgängig gemachte Aktion wieder her
style	Wählt einen Textstil aus (z. B. Überschrift, Absatz, Blockzitat)
font-family	Ändert die Schriftart des ausgewählten Textes
font-size	Passt die Größe des ausgewählten Textes an
bold	Wendet Fettformatierung auf den ausgewählten Text an
italic	Wendet Kursivformatierung auf den ausgewählten Text an
underline	Unterstreicht den ausgewählten Text
strike	Wendet Durchstreichformatierung an
subscript	Formatiert den Text als tiefgestellt
superscript	Formatiert den Text als hochgestellt
text-color	Ändert die Textfarbe
background-color	Ändert die Hintergrundfarbe (Hervorhebung) des Textes
align	Legt die Textausrichtung fest (links, zentriert, rechts, Blocksatz)
indent	Erhöht den Absatzeinzug
outdent	Verringert den Absatzeinzug
line-height	Passt den Zeilenabstand (Zeilenhöhe) an
quote	Formatiert den Text als Blockzitat
bulleted-list	Erstellt eine Liste mit Aufzählungszeichen
numbered-list	Erstellt eine nummerierte Liste
link	Fügt einen Hyperlink ein oder bearbeitet ihn
image	Fügt ein Bild ein
line	Fügt eine horizontale Linie ein
clear	Entfernt alle Formatierungen aus dem ausgewählten Text
print	Öffnet den Druckdialog
fullscreen	Schaltet den Vollbildmodus um
mode	Wechselt zwischen den beiden Layout-Modi: classic und document
shortcuts	Zeigt eine Liste der verfügbaren Tastenkombinationen an
separator	Fügt einen visuellen Trenner zwischen Steuerelementen ein

Verwenden Sie die Eigenschaft toolbar, um die Symbolleiste als Array von Steuerelement-Namensstrings zu definieren:

new richtext.Richtext("#root", {
    toolbar: [
        "undo",
        "redo",
        "separator",
        "style",
        "separator",
        "font-family",
        "font-size",
        "separator",
        "bold",
        "italic",
        "underline",
        "strike",
        "separator",
        "text-color",
        "background-color",
        "separator",
        "align",
        "line-height",
        "outdent",
        "indent",
        "separator",
        "bulleted-list",
        "numbered-list",
        "quote",
        "separator",
        "link",
        "image",
        "separator",
        "clear",
        "separator",
        "fullscreen",
        "mode"
        // andere Schaltflächen
    ],
    // andere Konfigurationseigenschaften
});

Verwandtes Beispiel: RichText. Vollständige Symbolleiste

Benutzerdefinierte Symbolleistensteuerelemente hinzufügen

Übergeben Sie ein Objekt an das toolbar-Array mit einem der folgenden Felder:

• type: string — erforderlich. Steuerelementtyp: "button", "richselect" oder "colorpicker"
• id: string — optional. Benutzerdefinierte Steuerelement-ID; darf nicht mit bestehenden Steuerelement-IDs übereinstimmen
• icon: string — optional. Symbol-Klassenname; wird mit dem Label kombiniert
• label: string — optional. Schaltflächenbeschriftung; wird mit dem Symbol kombiniert
• tooltip: string — optional. Tooltip, der beim Hover erscheint; standardmäßig wird label verwendet, wenn nicht festgelegt
• css: string — optional. CSS-Klasse für das Steuerelement. Integrierte Klassen: wx-primary, wx-secondary
• handler: () => void — optional. Callback, der beim Klick ausgeführt wird

Das folgende Beispiel kombiniert integrierte Schaltflächen, ein vordefiniertes Steuerelement vom Typ richselect und zwei benutzerdefinierte Schaltflächen:

new richtext.Richtext("#root", {
    toolbar: [
        // String-Einträge repräsentieren integrierte Schaltflächen
        "bold",
        "italic",
        // vordefinierte Schaltflächen akzeptieren nur { type: "button", id: string }
        {
            type: "button",
            id: "fullscreen",
        },
        // für vordefinierte richselect/colorpicker-Steuerelemente den passenden Typ setzen
        // Einträge mit einem nicht passenden Typ werden ignoriert
        {
            type: "richselect", // type: "button" würde hier ignoriert werden
            id: "mode",
        },
        // benutzerdefinierte Schaltflächen (richselect/colorpicker werden für benutzerdefinierte Steuerelemente nicht unterstützt)
        {
            type: "button",
            id: "some",
            label: "Some",
            handler: () => {/* benutzerdefinierte Logik */}
        },
        {
            type: "button",
            id: "other",
            icon: "wxo-help",
            label: "Other",
            tooltip: "Some tooltip",
            handler: () => {/* benutzerdefinierte Logik */}
        }
    ],
    // andere Konfigurationseigenschaften
});

Verwandtes Beispiel: RichText. Benutzerdefiniertes Steuerelement und vereinfachte Symbolleiste

Symbolleiste ausblenden

Setzen Sie die Eigenschaft toolbar auf false, um die Symbolleiste auszublenden:

new richtext.Richtext("#root", {
    toolbar: false,
    // andere Konfigurationseigenschaften
});

Menüleiste anzeigen

Aktivieren Sie die Eigenschaft menubar, um die obere Menüleiste über der Symbolleiste anzuzeigen. Der Standardwert ist false.

new richtext.Richtext("#root", {
    menubar: true
    // andere Konfigurationseigenschaften
});

Verwandtes Beispiel: RichText. Initialisierung mit Menüleiste

Anfänglichen Inhalt festlegen

Verwenden Sie die Eigenschaft value, um bei der Initialisierung anfänglichen HTML-Inhalt in den Editor zu übergeben:

new richtext.Richtext("#root", {
    value: "<h1>some value</h1>"
    // andere Konfigurationseigenschaften
});

Um den Inhalt nach der Initialisierung zu ersetzen oder ihn in einem Nicht-HTML-Format mit einem benutzerdefinierten Encoder zu laden, rufen Sie die Methode setValue() auf.

Verwandtes Beispiel: RichText. Arbeiten mit verschiedenen Formaten (Markdown, HTML, Text)

Anfängliche Sprache festlegen

Verwenden Sie die Eigenschaft locale, um bei der Initialisierung ein Lokalisierungsobjekt anzuwenden:

new richtext.Richtext("#root", {
    locale: richtext.locales.cn
    // andere Konfigurationseigenschaften
});

Weitere Informationen und dynamisches Umschalten der Sprache mit setLocale() finden Sie im Handbuch Lokalisierung.

Im Vollbildmodus starten

Setzen Sie die Eigenschaft fullscreenMode auf true, um den Editor bei der Initialisierung im Vollbildmodus zu öffnen. Der Standardwert ist false.

new richtext.Richtext("#root", {
    fullscreenMode: true
    // andere Konfigurationseigenschaften
});

Bildeinfügung konfigurieren

RichText unterstützt zwei Modi zum Einfügen von Bildern über die Symbolleiste, die Menüleiste, Einfügen oder Drag-and-Drop. Der Modus wird automatisch anhand der Eigenschaft imageUploadUrl ausgewählt.

Bilder auf einen Server hochladen

Übergeben Sie eine URL an die Eigenschaft imageUploadUrl, um jedes eingefügte Bild an Ihren Endpunkt hochzuladen. RichText sendet die Datei als multipart/form-data (Feldname upload) und fügt die vom Server zurückgegebene URL ein:

new richtext.Richtext("#root", {
    imageUploadUrl: "https://example.com/upload"
    // andere Konfigurationseigenschaften
});

Bilder inline als Base64 einfügen

Lassen Sie imageUploadUrl weg (oder setzen Sie es auf einen leeren String), um Bilder direkt als Base64-Daten-URLs in den Dokumentinhalt einzubetten. Es ist kein Server erforderlich:

new richtext.Richtext("#root", {
    // imageUploadUrl ist nicht gesetzt, Bilder werden inline eingefügt
    // andere Konfigurationseigenschaften
});

Inline-Bilder, die größer als 1024×800 sind, werden in reduzierter Größe angezeigt (die Attribute width/height werden auf diese Grenzen begrenzt), aber die eingebetteten Bytes sind die ursprüngliche Datei in voller Auflösung — der Client skaliert sie nicht herunter oder kodiert sie neu.

Hinweis

Inline-Bilder (Base64) bleiben beim integrierten DOCX-/PDF-Export nicht erhalten. Wenn Sie auf den Export angewiesen sind, geben Sie eine imageUploadUrl an, damit Bilder auf einen externen Speicherort verweisen.

Unter Arbeiten mit dem Server finden Sie den vollständigen Request/Response-Vertrag, den der Upload-Endpunkt implementieren muss, sowie eine ausführlichere Beschreibung des Inline-Bild-Fallbacks.

Standardstile konfigurieren

Verwenden Sie die Eigenschaft defaultStyles, um Standardstile pro Blocktyp festzulegen.

Die Eigenschaft defaultStyles hat die folgende Typsignatur:

defaultStyles?: boolean | {
    "*"?: { // gilt für alle Blöcke; legt gemeinsame Eigenschaften für jeden Block fest
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    p?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    blockquote?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h1?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h2?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h3?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h4?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h5?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h6?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    }
};

Die Eigenschaft defaultStyles wendet kein CSS auf die betroffenen Blöcke an. Wenden Sie passende CSS-Stile separat an:

index.html

<div id="root"></div>

index.js

const editor = new richtext.Richtext("#root", {
    defaultStyles: {
        h2: { 
            "font-family": "Roboto",
            "font-size": "28px",
            color: "purple",
            background: "#FFC0CB"
        }
    }
});

index.css

#root h2 {
    font-family: Roboto;
    font-size: 28px;
    color: purple;
    background: #FFC0CB;
}

In diesem Beispiel verwenden alle h2-Blöcke die Schriftfamilie "Roboto" mit 28px, lila Text und rosa Hintergrund. Die passende CSS-Regel wendet dieselben Werte auf die gerenderten h2-Elemente an.

Verwandtes Beispiel: RichText. Standardwert für Typografie ändern (Schriftart, Schriftgröße usw.)