Loading...
Loading...
Пользовательские темы, интеграция с загрузкой файлов и обратные вызовы событий для SunEditor v3.
В SunEditor поставляются 4 встроенные темы. Импортируйте CSS-файл и передайте название темы в параметры.
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 defaultКаждая тема определяет около 130 пользовательских свойств CSS, сгруппированных по категориям. Переопределите их, чтобы настроить любую часть редактора.
Цвета для редактируемой области контента (текст, фон, границы)
--se-caret-colorЦвет текстового курсора--se-edit-font-colorЦвет текста по умолчанию в редакторе--se-edit-background-colorФоновое изображение контента редактора--se-edit-border-*Масштаб границ области содержимого (светлый → темный)--se-edit-anchorЦвет выделения ссылки--se-edit-active / hover / outlineЦвета контура при выделении, наведении курсора и фокусировкеПанель инструментов, строка состояния и стиль внешней оболочки
--se-main-background-colorПанель инструментов и фон оболочки--se-main-colorЦвет текста/значка панели инструментов--se-main-border-colorцвет границы панели инструментов--se-hover-color (6 levels)6 уровней прогрессивной задержки звука--se-active-color (11 levels)11 прогрессивных уровней активного тонаМодальные диалоговые окна, выпадающие списки и поверхности контроллеров.
--se-modal-background-colorФон модального диалогового окна--se-modal-colorЦвет модального текста--se-dropdown-font-colorцвет текста выпадающего меню--se-controller-*Цвета контроллера компонентов (изображение/видео)Цветовая индикация успеха/ошибки и индикаторы загрузки
--se-success-color (9 levels)9-уровневая палитра успеха (темный → светлый)--se-error-color (9 levels)9-уровневая палитра ошибок (темный → светлый)--se-loading-colorЦвет индикатора загрузкиВсего: ~130 CSS-переменных на тему. Скопируйте встроенную тему в качестве отправной точки и измените цвета.
Создайте CSS-файл, определяющий все переменные в селекторе вашей темы. Имя класса должно соответствовать шаблону: se-theme-{name}.
Определите все переменные CSS в селекторах .sun-editor.se-theme-{name} и .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;
/* ... */
}Импортируйте CSS-файл в ваше приложение и установите параметр темы в соответствии с названием вашей темы.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});