Loading...
Loading...
Anpassade teman, uppladdningsintegration och händelseåteranrop för SunEditor v3.
SunEditor levereras med fyra inbyggda teman. Importera CSS-filen och skicka temanamnet till alternativen.
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 defaultVarje tema definierar ~130 anpassade CSS-egenskaper organiserade i kategorier. Åsidosätt dem för att anpassa valfri del av redigeraren.
Färger för det redigerbara innehållsområdet (text, bakgrunder, ramar)
--se-caret-colorTextmarkörens färg--se-edit-font-colorStandardtextfärg i redigeraren--se-edit-background-colorBakgrund för redigeringsinnehåll--se-edit-border-*Innehållsområdets kantskala (ljus → mörk)--se-edit-anchorLänkmarkeringsfärg--se-edit-active / hover / outlineMarkering, muspekare, fokuskonturfärgerVerktygsfält, statusfält och yttre skal
--se-main-background-colorVerktygsfält och skalbakgrund--se-main-colorFärg på text/ikon i verktygsfältet--se-main-border-colorFärg på verktygsfältets kantlinje--se-hover-color (6 levels)6 progressiva svävartonnivåer--se-active-color (11 levels)11 progressiva aktiva tonnivåerDialogmodaler, rullgardinsmenyer och kontrollytor
--se-modal-background-colorBakgrund för modal dialog--se-modal-colorModal textfärg--se-dropdown-font-colorTextfärg i rullgardinsmenyn--se-controller-*Färger på komponentkontroller (bild/video)Färger och indikatorer för lyckat/felfeedback
--se-success-color (9 levels)9-nivåers framgångspalett (mörk → ljus)--se-error-color (9 levels)9-nivåers felpalett (mörk → ljus)--se-loading-colorFärg på laddningsspinnarenTotalt: ~130 CSS-variabler per tema. Kopiera ett inbyggt tema som utgångspunkt och ändra färgerna.
Skapa en CSS-fil som definierar alla variabler under ditt temas väljare. Klassnamnet måste följa mönstret: se-theme-{name}.
Definiera alla CSS-variabler under selektorerna .sun-editor.se-theme-{name} och .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;
/* ... */
}Importera CSS-filen till din app och ställ in temaalternativet så att det matchar ditt temanamn.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});