Loading...
Loading...
Egyéni témák, feltöltési integráció és eseményvisszahívások a SunEditor v3-hoz.
A SunEditor 4 beépített témával rendelkezik. Importáld a CSS fájlt, és add át a téma nevét az optionsnak.
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 defaultMinden téma ~130 CSS egyéni tulajdonságot definiál, kategóriákba rendezve. Ezeket felülírva testreszabhatod a szerkesztő bármely részét.
A szerkeszthető tartalomterület színei (szöveg, hátterek, szegélyek)
--se-caret-colorSzövegkurzor színe--se-edit-font-colorAlapértelmezett szövegszín a szerkesztőben--se-edit-background-colorSzerkesztői tartalom háttere--se-edit-border-*Tartalomterület szegélyének skálája (világos → sötét)--se-edit-anchorLink kiemelésének színe--se-edit-active / hover / outlineKijelölés, rámutatás és fókusz körvonalszíneiEszköztár, állapotsor és külső héj stílusa
--se-main-background-colorEszköztár és shell háttér--se-main-colorEszköztár szövegének/ikonjának színe--se-main-border-colorEszköztár szegélyének színe--se-hover-color (6 levels)6 progresszív lebegési hangszint--se-active-color (11 levels)11 progresszív aktív hangszínszintPárbeszédpanelek, legördülő menük és vezérlőfelületek
--se-modal-background-colorModális párbeszédablak háttere--se-modal-colorModális szöveg színe--se-dropdown-font-colorLegördülő menü szövegszíne--se-controller-*Komponensvezérlő (kép/videó) színeiSiker/hiba visszajelzés színei és betöltésjelzők
--se-success-color (9 levels)9-szintű sikerpaletta (sötét → világos)--se-error-color (9 levels)9 szintű hibapaletta (sötét → világos)--se-loading-colorSpinner színének betöltéseÖsszesen: ~130 CSS változó témánként. Másolj egy beépített témát kiindulópontként, és módosítsd a színeket.
Hozz létre egy CSS fájlt, amely definiálja a témád szelektora alatti összes változót. Az osztály nevének a következő mintát kell követnie: se-theme-{name}.
Definiáld az összes CSS változót a .sun-editor.se-theme-{name} és .sun-editor-editable.se-theme-{name} szelektorok alatt.
/* 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;
/* ... */
}Importáld a CSS fájlt az alkalmazásodba, és állítsd be a témabeállítást a téma nevének megfelelően.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});