样式定制

通过在编辑器容器及其子元素上覆盖 CSS 变量，可以自定义 DHTMLX RichText 的外观。

本指南介绍如何应用深色主题，以及如何使用 CSS 类选择器定位菜单栏、工具栏、弹出层和内容区域。

默认结构与类名

RichText 使用以下核心类来构建 UI 结构：

类名	说明
.wx-richtext	RichText 组件的根容器
.wx-richtext-menubar	菜单栏容器
.wx-richtext-menu	菜单栏下拉菜单容器
.wx-richtext-toolbar	工具栏容器
.wx-editor-area	主可编辑内容区域容器

在自定义 CSS 选择器中使用这些类，可以覆盖编辑器的外观样式。

覆盖默认样式

要覆盖默认样式，请在 #root 容器或特定子元素上重新定义 CSS 变量：

<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>

注意

这些样式应用了深色背景，调整了按钮和图标颜色，并提升了深色 UI 主题下的可读性。

支持的 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 应用了自定义样式：

相关文章： 配置