Loading...
Loading...
Temi personalizzati, integrazione con i sistemi di caricamento file e callback per gli eventi per SunEditor v3.
SunEditor include 4 temi predefiniti. Importa il file CSS e specifica il nome del tema nelle opzioni.
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 defaultOgni tema definisce circa 130 proprietà CSS personalizzate, organizzate in categorie. Sovrascrivile per personalizzare qualsiasi parte dell'editor.
Colori per l'area di contenuto modificabile (testo, sfondi, bordi)
--se-caret-colorColore del cursore del testo--se-edit-font-colorColore del testo predefinito nell'editor--se-edit-background-colorInformazioni di base sull'editor--se-edit-border-*Scala dei bordi dell'area dei contenuti (da chiaro a scuro)--se-edit-anchorColore di evidenziazione del collegamento--se-edit-active / hover / outlineColori di contorno di selezione, passaggio del mouse e messa a fuocoBarra degli strumenti, barra di stato e stile del guscio esterno
--se-main-background-colorSfondo della barra degli strumenti e della shell--se-main-colorColore del testo/icona della barra degli strumenti--se-main-border-colorcolore del bordo della barra degli strumenti--se-hover-color (6 levels)6 livelli progressivi di tono al passaggio del mouse--se-active-color (11 levels)11 livelli di tono attivi progressiviFinestre di dialogo modali, menu a tendina e superfici di controllo
--se-modal-background-colorSfondo della finestra di dialogo modale--se-modal-colorColore del testo modale--se-dropdown-font-colorcolore del testo del menu a tendina--se-controller-*Colori del controller dei componenti (immagine/video)Colori di feedback di successo/errore e indicatori di caricamento
--se-success-color (9 levels)Tavolozza del successo a 9 livelli (da scuro a chiaro)--se-error-color (9 levels)Tavolozza degli errori a 9 livelli (da scuro a chiaro)--se-loading-colorColore dello spinner di caricamentoTotale: circa 130 variabili CSS per tema. Copia un tema predefinito come punto di partenza e modifica i colori.
Crea un file CSS che definisca tutte le variabili sotto il selettore del tuo tema. Il nome della classe deve seguire il modello: se-theme-{name}.
Definisci tutte le variabili CSS sotto i selettori .sun-editor.se-theme-{name} e .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;
/* ... */
}Importa il file CSS nella tua app e imposta l'opzione del tema in modo che corrisponda al nome del tuo tema.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});