Loading...
Loading...
Користувацькі теми, інтеграція завантаження та зворотні виклики подій для SunEditor версії 3.
SunEditor постачається з 4 вбудованими темами. Імпортуйте CSS-файл та передайте назву теми до 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 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
});