Loading...
Loading...
Pielāgotas tēmas, augšupielādes integrācija un notikumu atzvanīšanas funkcijas SunEditor v3.
SunEditor komplektā ir iekļautas 4 iebūvētas tēmas. Importējiet CSS failu un nododiet tēmas nosaukumu opcijas.
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 defaultKatra tēma definē ~130 CSS pielāgotus rekvizītus, kas sakārtoti kategorijās. Varat tos ignorēt, lai pielāgotu jebkuru redaktora daļu.
Rediģējamā satura apgabala krāsas (teksts, foni, apmales)
--se-caret-colorTeksta kursora krāsa--se-edit-font-colorNoklusējuma teksta krāsa redaktorā--se-edit-background-colorRedaktora satura fons--se-edit-border-*Satura apgabala robežas skala (gaišs → tumšs)--se-edit-anchorSaites izcelšanas krāsa--se-edit-active / hover / outlineAtlases, norādīšanas un fokusa kontūru krāsasRīkjosla, statusa josla un ārējā apvalka stils
--se-main-background-colorRīkjoslas un čaulas fons--se-main-colorRīkjoslas teksta/ikonas krāsa--se-main-border-colorRīkjoslas apmales krāsa--se-hover-color (6 levels)6 progresīvas norādīšanas toņa līmeņi--se-active-color (11 levels)11 progresīvi aktīvie toņu līmeņiDialoglodziņu modālie elementi, nolaižamie saraksti un kontrollera virsmas
--se-modal-background-colorModālā dialoga fons--se-modal-colorModālā teksta krāsa--se-dropdown-font-colorNolaižamās izvēlnes teksta krāsa--se-controller-*Komponentu kontrollera (attēla/video) krāsasVeiksmes/kļūdas atsauksmju krāsas un ielādes indikatori
--se-success-color (9 levels)9 līmeņu veiksmes palete (tumša → gaiša)--se-error-color (9 levels)9 līmeņu kļūdu palete (tumšs → gaišs)--se-loading-colorNotiek vērpšanas krāsas ielādeKopā: ~130 CSS mainīgie katrai tēmai. Kopējiet iebūvēto tēmu kā sākumpunktu un modificējiet krāsas.
Izveidojiet CSS failu, kas definē visus mainīgos zem jūsu tēmas atlasītāja. Klases nosaukumam ir jāatbilst šādam paraugam: se-theme-{name}.
Definējiet visus CSS mainīgos selektoros .sun-editor.se-theme-{name} un .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;
/* ... */
}Importējiet CSS failu savā lietotnē un iestatiet tēmas opciju, lai tā atbilstu jūsu tēmas nosaukumam.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});