Loading...
Loading...
Brugerdefinerede temaer, uploadintegration og event-tilbagekald til SunEditor v3.
SunEditor leveres med 4 indbyggede temaer. Importer CSS-filen, og send temanavnet til indstillingerne.
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 defaultHvert tema definerer ~130 brugerdefinerede CSS-egenskaber organiseret i kategorier. Tilsidesæt dem for at tilpasse en hvilken som helst del af editoren.
Farver til det redigerbare indholdsområde (tekst, baggrunde, rammer)
--se-caret-colorTekstmarkørens farve--se-edit-font-colorStandard tekstfarve i editoren--se-edit-background-colorBaggrund for redigeringsindhold--se-edit-border-*Indholdsområdets kantskala (lys → mørk)--se-edit-anchorFarve for fremhævning af link--se-edit-active / hover / outlineMarkering, pegefølsom skærm, fokuskonturfarverVærktøjslinje, statuslinje og ydre skal-styling
--se-main-background-colorVærktøjslinje og skalbaggrund--se-main-colorFarve på tekst/ikon i værktøjslinjen--se-main-border-colorFarve på værktøjslinjens kant--se-hover-color (6 levels)6 progressive svævetoneniveauer--se-active-color (11 levels)11 progressive aktive toneniveauerDialogbokse, rullemenuer og controlleroverflader
--se-modal-background-colorBaggrund for modal dialog--se-modal-colorModal tekstfarve--se-dropdown-font-colorTekstfarve i rullemenuen--se-controller-*Farver for komponentcontroller (billede/video)Feedbackfarver for succes/fejl og indlæsningsindikatorer
--se-success-color (9 levels)9-niveau succespalette (mørk → lys)--se-error-color (9 levels)9-niveau fejlpalet (mørk → lys)--se-loading-colorFarve på indlæsningsspinnerenI alt: ~130 CSS-variabler pr. tema. Kopier et indbygget tema som udgangspunkt, og rediger farverne.
Opret en CSS-fil, der definerer alle variabler under dit temas vælger. Klassenavnet skal følge mønsteret: se-theme-{name}.
Definer alle CSS-variabler under selektorerne .sun-editor.se-theme-{name} og .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;
/* ... */
}Importer CSS-filen i din app, og indstil temaindstillingen, så den matcher dit temanavn.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});