Стилизация
Настройте внешний вид DHTMLX RichText, переопределив CSS-переменные на контейнере редактора и его дочерних элементах.
В этом руководстве показано, как применить тёмную тему и настроить строку меню, панель инструментов, всплывающие элементы и область контента с помощью CSS-селекторов классов.
Структура по умолчанию и имена классов
RichText использует следующие основные классы для построения интерфейса:
| Имя класса | Описание |
|---|---|
.wx-richtext | Корневой контейнер виджета RichText |
.wx-richtext-menubar | Контейнер строки меню |
.wx-richtext-menu | Контейнер выпадающего меню строки меню |
.wx-richtext-toolbar | Контейнер панели инструментов |
.wx-editor-area | Контейнер основной редактируемой области контента |
Используйте эти классы в пользовательских CSS-селекторах для переопределения внешнего вида редактора.
Переопределение стилей по умолчанию
Чтобы переопределить стили по умолчанию, задайте CSS-переменные на контейнере #root или на конкретных дочерних элементах:
<div id="root" style="width: 100%; height: 100%;"></div>
<style>
#root,
.wx-richtext-menu {
--wx-background: #404151;
--wx-background-alt: #212329;
--wx-color-primary: #14B195;
--wx-color-font: #FFFFFF;
--wx-border: 1px solid #6B6C79;
--wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
--wx-button-active: rgba(20, 177, 149, 0.22);
--wx-icon-color: var(--wx-color-font);
--wx-color-font-alt: #9FA1AE;
--wx-color-font-disabled: #9FA1AE;
--wx-popup-border: var(--wx-border);
color-scheme: dark;
}
.wx-richtext-menu {
border: var(--wx-border);
}
</style>
Эти стили применяют тёмный фон, настраивают цвета кнопок и иконок, а также улучшают видимость для тёмных тем интерфейса.
Поддерживаемые CSS-переменные
| Имя переменной | Описание |
|---|---|
--wx-background | Цвет фона редактора и всплывающих элементов |
--wx-background-alt | Альтернативный фон для строки меню |
--wx-color-primary | Акцентный цвет для ссылок, цитат и маркеров изменения размера изображений |
--wx-color-font | Основной цвет шрифта (для редактора, строки меню и панели инструментов) |
--wx-color-font-alt | Альтернативный цвет шрифта |
--wx-color-font-disabled | Цвет отключённого текста (для элементов строки меню и панели инструментов) |
--wx-border | Стиль рамки, применяемый по всему редактору |
--wx-color-secondary-hover | Фон состояния наведения для кнопок в строке меню и панели инструментов |
--wx-button-active | Фон активного состояния для кнопок в строке меню и панели инструментов |
--wx-icon-color | Цвет иконок стрелки выпадающего списка на панели инструментов |
--wx-popup-border | Рамка для всплывающих элементов |
Рекомендации
- Используйте
color-scheme: darkдля улучшения стилизации нативных элементов ввода в тёмном режиме - Избегайте изменения свойств, связанных с макетом (таких как
display,position), без веской причины
Для настройки типографики по тегам (семейство шрифтов, размер шрифта, цвет, фон для h1, p, blockquote и других блочных тегов) используйте свойство конфигурации defaultStyles с соответствующими CSS-правилами. Полный шаблон смотрите в руководстве по конфигурации.
Живое демо
В примере ниже к RichText применён пользовательский стиль:
Связанные статьи: Конфигурация