Loading...
Loading...
Benutzerdefinierte Designs, Upload-Integration und Ereignis-Callbacks für SunEditor v3.
SunEditor wird mit 4 integrierten Designs ausgeliefert. Importieren Sie die CSS-Datei und übergeben Sie den Designnamen an die Optionen.
se-theme-darkse-theme-midnightse-theme-cobaltse-theme-creamimport suneditor from 'suneditor';
// 1. Import the built-in theme CSS
import 'suneditor/src/themes/dark.css';
// 2. Pass theme name to options
const editor = suneditor.create(textarea, {
theme: 'dark', // 'dark' | 'midnight' | 'cobalt' | 'cream'
});
// 3. Change theme at runtime
editor.$.ui.setTheme('midnight');
editor.$.ui.setTheme(''); // Reset to defaultJedes Theme definiert ca. 130 benutzerdefinierte CSS-Eigenschaften, die in Kategorien organisiert sind. Überschreiben Sie diese, um jeden Teil des Editors anzupassen.
Farben für den bearbeitbaren Inhaltsbereich (Text, Hintergründe, Rahmen)
--se-caret-colorTextcursorfarbe--se-edit-font-colorStandardtextfarbe im Editor--se-edit-background-colorHintergrundinformationen zum Editor--se-edit-border-*Skala für den Rand des Inhaltsbereichs (hell → dunkel)--se-edit-anchorLink-Hervorhebungsfarbe--se-edit-active / hover / outlineAuswahl, Hover, Fokus UmrissfarbenSymbolleiste, Statusleiste und äußeres Shell-Styling
--se-main-background-colorHintergrund für Symbolleiste und Shell--se-main-colorText-/Symbolfarbe der Symbolleiste--se-main-border-colorRahmenfarbe der Werkzeugleiste--se-hover-color (6 levels)6 progressive Schwebetonstufen--se-active-color (11 levels)11 progressive aktive TonstufenDialogfenster, Dropdown-Menüs und Controller-Oberflächen
--se-modal-background-colorHintergrund des modalen Dialogs--se-modal-colorModaltextfarbe--se-dropdown-font-colorTextfarbe des Dropdown-Menüs--se-controller-*Komponentensteuerung (Bild/Video) FarbenFarben für Erfolgs-/Fehlerrückmeldung und Ladeanzeigen
--se-success-color (9 levels)9-stufige Erfolgspalette (dunkel → hell)--se-error-color (9 levels)9-stufige Fehlerpalette (dunkel → hell)--se-loading-colorFarbe des LadekreiselsInsgesamt: ca. 130 CSS-Variablen pro Theme. Kopieren Sie ein integriertes Theme als Ausgangspunkt und passen Sie die Farben an.
Erstellen Sie eine CSS-Datei, die alle Variablen unter dem Selektor Ihres Themes definiert. Der Klassenname muss dem Muster se-theme-{name} entsprechen.
Definieren Sie alle CSS-Variablen unter den Selektoren .sun-editor.se-theme-{name} und .sun-editor-editable.se-theme-{name}.
/* my-theme.css */
.sun-editor.se-theme-ocean,
.sun-editor-editable.se-theme-ocean {
/* Caret & placeholder */
--se-caret-color: #e0f2fe;
--se-drag-caret-color: #38bdf8;
--se-placeholder-color: #64748b;
/* Text */
--se-edit-font-color: #e2e8f0;
--se-edit-font-pre: #94a3b8;
--se-edit-font-quote: #94a3b8;
/* Background */
--se-edit-background-color: #0f172a;
--se-edit-background-pre: #1e293b;
/* ... */
}Importieren Sie die CSS-Datei in Ihre App und stellen Sie die Theme-Option so ein, dass sie mit Ihrem Theme-Namen übereinstimmt.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});