Loading...
Loading...
Temas personalizados, integración de carga de archivos y funciones de devolución de llamada para eventos en SunEditor v3.
SunEditor incluye 4 temas predefinidos. Importa el archivo CSS y pasa el nombre del tema a las opciones.
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 defaultCada tema define aproximadamente 130 propiedades CSS personalizadas organizadas en categorías. Modifícalas para personalizar cualquier parte del editor.
Colores para el área de contenido editable (texto, fondos, bordes)
--se-caret-colorColor del cursor de texto--se-edit-font-colorColor de texto predeterminado en el editor--se-edit-background-colorFondo del contenido del editor--se-edit-border-*Escala del borde del área de contenido (claro → oscuro)--se-edit-anchorColor de resaltado del enlace--se-edit-active / hover / outlineColores de contorno de selección, desplazamiento y enfoqueBarra de herramientas, barra de estado y estilo de capa exterior
--se-main-background-colorBarra de herramientas y fondo de la interfaz--se-main-colorColor del texto/icono de la barra de herramientas--se-main-border-colorcolor del borde de la barra de herramientas--se-hover-color (6 levels)6 niveles de tono progresivos al pasar el cursor--se-active-color (11 levels)11 niveles de tono activo progresivoVentanas modales de diálogo, menús desplegables y superficies de control
--se-modal-background-colorFondo de diálogo modal--se-modal-colorColor del texto modal--se-dropdown-font-colorcolor del texto del menú desplegable--se-controller-*Colores del controlador de componentes (imagen/vídeo)Colores de retroalimentación de éxito/error e indicadores de carga
--se-success-color (9 levels)Paleta de éxito de 9 niveles (oscuro → claro)--se-error-color (9 levels)Paleta de errores de 9 niveles (oscuro → claro)--se-loading-colorColor del indicador de cargaTotal: ~130 variables CSS por tema. Copie un tema predefinido como punto de partida y modifique los colores.
Crea un archivo CSS que defina todas las variables bajo el selector de tu tema. El nombre de la clase debe seguir el patrón: se-theme-{name}.
Defina todas las variables CSS bajo los selectores .sun-editor.se-theme-{name} y .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 el archivo CSS en tu aplicación y configura la opción de tema para que coincida con el nombre de tu 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
});