Loading...
Loading...
Aangepaste thema's, uploadintegratie en gebeurteniscallbacks voor SunEditor v3.
SunEditor wordt geleverd met 4 ingebouwde thema's. Importeer het CSS-bestand en geef de themanaam door aan de opties.
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 defaultElk thema definieert ongeveer 130 aangepaste CSS-eigenschappen, georganiseerd in categorieën. Overschrijf deze om elk onderdeel van de editor aan te passen.
Kleuren voor het bewerkbare inhoudsgebied (tekst, achtergronden, randen)
--se-caret-colorTekstcursorkleur--se-edit-font-colorStandaard tekstkleur in de editor--se-edit-background-colorAchtergrond van de editorinhoud--se-edit-border-*Schaal van de rand van het inhoudsgebied (licht → donker)--se-edit-anchorLink markeerkleur--se-edit-active / hover / outlineKleuren voor selectie, hover en focusWerkbalk, statusbalk en buitenste schilstijl
--se-main-background-colorWerkbalk en shell-achtergrond--se-main-colorKleur van tekst/pictogram in de werkbalk--se-main-border-colorRandkleur van de werkbalk--se-hover-color (6 levels)6 progressieve zweeftoonniveaus--se-active-color (11 levels)11 progressieve actieve toonniveausDialoogvensters, dropdownmenu's en controlleroppervlakken
--se-modal-background-colorAchtergrond van een modaal dialoogvenster--se-modal-colorModale tekstkleur--se-dropdown-font-colorTekstkleur van het dropdownmenu--se-controller-*Componentcontroller (beeld/video) kleurenKleuren voor succes-/foutmeldingen en laadindicatoren
--se-success-color (9 levels)9-stappen succespalet (donker → licht)--se-error-color (9 levels)9-niveaus foutenpalet (donker → licht)--se-loading-colorLaadspinner kleurTotaal: ongeveer 130 CSS-variabelen per thema. Kopieer een bestaand thema als uitgangspunt en pas de kleuren aan.
Maak een CSS-bestand aan dat alle variabelen onder de selector van je thema definieert. De klassenaam moet het volgende patroon volgen: se-thema-{name}.
Definieer alle CSS-variabelen onder de selectors .sun-editor.se-theme-{name} en .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;
/* ... */
}Importeer het CSS-bestand in je app en stel de thema-optie in zodat deze overeenkomt met de naam van je thema.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});