Loading...
Loading...
Thèmes personnalisés, intégration du téléchargement et rappels d'événements pour SunEditor v3.
SunEditor est fourni avec 4 thèmes intégrés. Importez le fichier CSS et indiquez le nom du thème dans les options.
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 defaultChaque thème définit environ 130 propriétés CSS personnalisées, organisées en catégories. Modifiez-les pour personnaliser n'importe quelle partie de l'éditeur.
Couleurs de la zone de contenu modifiable (texte, arrière-plans, bordures)
--se-caret-colorcouleur du curseur de texte--se-edit-font-colorCouleur de texte par défaut dans l'éditeur--se-edit-background-colorContexte du contenu de l'éditeur--se-edit-border-*Échelle de bordure de la zone de contenu (clair → foncé)--se-edit-anchorcouleur de surbrillance du lien--se-edit-active / hover / outlineCouleurs de contour de la sélection, du survol et du focusStyle de la barre d'outils, de la barre d'état et de la coque externe
--se-main-background-colorarrière-plan de la barre d'outils et de la coque--se-main-colorcouleur du texte/des icônes de la barre d'outils--se-main-border-colorcouleur de la bordure de la barre d'outils--se-hover-color (6 levels)6 niveaux de tonalité de survol progressifs--se-active-color (11 levels)11 niveaux de tonalité active progressiveBoîtes de dialogue modales, listes déroulantes et interfaces de contrôle
--se-modal-background-colorarrière-plan de la boîte de dialogue modale--se-modal-colorCouleur du texte modal--se-dropdown-font-colorcouleur du texte du menu déroulant--se-controller-*Couleurs du contrôleur de composant (image/vidéo)Couleurs de retour d'information en cas de succès/d'erreur et indicateurs de chargement
--se-success-color (9 levels)Palette de réussite à 9 niveaux (foncé → clair)--se-error-color (9 levels)Palette d'erreurs à 9 niveaux (foncé → clair)--se-loading-colorCouleur du spinner de chargementAu total : environ 130 variables CSS par thème. Copiez un thème intégré comme point de départ et modifiez les couleurs.
Créez un fichier CSS qui définit toutes les variables sous le sélecteur de votre thème. Le nom de la classe doit suivre le modèle : se-theme-{name}.
Définissez toutes les variables CSS sous les sélecteurs .sun-editor.se-theme-{name} et .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;
/* ... */
}Importez le fichier CSS dans votre application et configurez l'option de thème pour qu'elle corresponde au nom de votre thème.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});