ZartUI · 富文本编辑器规范预览

富文本编辑器 · 完整演示

工具栏共 23 个操作项，分 6 组，组间以分隔线隔开

默认字体

苹方

微软雅黑

宋体

等宽字体

14

12

14

16

18

20

24

28

32

Aa

原始大小写

全部大写

全部小写

首字母大写

预设颜色

自定义颜色

渐变色

→

预设颜色

自定义颜色

渐变色

→

正文

标题 1

标题 2

标题 3

正文

线型：

宽度：

px

颜色：

预设颜色

自定义颜色

渐变色

→

边框位置：

全部清除

富文本编辑器示例

这是一段正文内容，支持加粗、斜体、下划线、~~删除线~~等文字样式。

可以通过顶部工具栏调整字体、字号、颜色，设置段落格式与对齐方式，以及插入图片和表格。

工具栏操作项 · 图标说明

撤销

重做

清除格式

默认字体

字体选择

14

字号选择

缩小字号

增大字号

加粗

斜体

下划线

删除线

Aa

大小写

文字颜色

填充颜色

正文

段落格式

左对齐

居中对齐

右对齐

两端对齐

插入图片

边框设置

悬停：背景 #F5F7FA 激活：背景 #EEF5FF，图标 #3388FF 禁用：图标 #A8B4C8

规范参数

属性	值
图标按钮尺寸	`28×28px`，圆角 `4px`
图标尺寸	渲染 `18×18px`，viewBox `0 0 16 16`，全部线状，stroke-width 1.5
图标默认色	`#223355`
图标 hover	背景 `#F5F7FA`
图标激活	背景 `#EEF5FF`，图标 `#3388FF`
图标禁用	`#A8B4C8`，pointer-events: none
下拉箭头颜色	`#223355`
组间分隔线	宽 `1px`，高 `16px`，颜色 `#E9ECF2`，margin `0 4px`
字号顺序	字号选择 → 缩小字号 → 增大字号（从左到右）
填充图标	线状油漆桶（画笔体 + 手柄 + 水滴），底部色条显示当前填充色（默认 `#FFEB3B`）
颜色底部色条	宽 `14px`，高 `3px`，圆角 `1px`，显示当前颜色
颜色面板宽度	`220px`
预设色板	16 色，`20×20px`，8 列，gap `4px`
自定义颜色	原生 color picker + HEX 输入框 + 应用按钮
渐变色	8 个预设渐变 + 自定义双端点颜色拾取器 + 实时预览条
表格下拉选项	插入表格 / 插入行列 / 删除行列 / 合并拆分单元格
编辑区内边距	`16px`，行高 `1.8`
外框描边	`1px solid #DDE1EB`，圆角 `8px`