Loading...
Loading...
Niestandardowe motywy, integracja przesyłania danych i wywołania zwrotne zdarzeń dla SunEditor v3.
SunEditor jest dostarczany z czterema wbudowanymi motywami. Zaimportuj plik CSS i przekaż nazwę motywu do opcji.
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 defaultKażdy motyw definiuje około 130 niestandardowych właściwości CSS, uporządkowanych w kategorie. Możesz je nadpisać, aby dostosować dowolną część edytora.
Kolory obszaru edytowalnej zawartości (tekst, tła, obramowania)
--se-caret-colorKolor kursora tekstowego--se-edit-font-colorDomyślny kolor tekstu w edytorze--se-edit-background-colorTło treści edytora--se-edit-border-*Skala obramowania obszaru zawartości (jasny → ciemny)--se-edit-anchorKolor podświetlenia linku--se-edit-active / hover / outlineKolory konturu zaznaczenia, najechania kursorem i skupieniaPasek narzędzi, pasek stanu i styl powłoki zewnętrznej
--se-main-background-colorPasek narzędzi i tło powłoki--se-main-colorKolor tekstu/ikony paska narzędzi--se-main-border-colorKolor obramowania paska narzędzi--se-hover-color (6 levels)6 poziomów progresywnego tonu zawisu--se-active-color (11 levels)11 progresywnych poziomów tonów aktywnychOkna dialogowe, menu rozwijane i powierzchnie kontrolera
--se-modal-background-colorTło okna dialogowego modalnego--se-modal-colorKolor tekstu modalnego--se-dropdown-font-colorKolor tekstu menu rozwijanego--se-controller-*Kolory kontrolera komponentu (obraz/wideo)Kolory i wskaźniki ładowania informacji zwrotnych o powodzeniu/błędzie
--se-success-color (9 levels)9-poziomowa paleta sukcesu (ciemny → jasny)--se-error-color (9 levels)9-poziomowa paleta błędów (ciemny → jasny)--se-loading-colorŁadowanie koloru spinneraŁącznie: ~130 zmiennych CSS na motyw. Skopiuj wbudowany motyw jako punkt wyjścia i zmodyfikuj kolory.
Utwórz plik CSS definiujący wszystkie zmienne w selektorze motywu. Nazwa klasy musi być zgodna ze schematem: se-theme-{name}.
Zdefiniuj wszystkie zmienne CSS w selektorach .sun-editor.se-theme-{name} i .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;
/* ... */
}Zaimportuj plik CSS do swojej aplikacji i ustaw opcję motywu tak, aby odpowiadała nazwie motywu.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});