--- id: "rich-text" title: "富文本编辑与纯文本回退" category: "输入组件" document_type: "component-specification" spec_status: "local-current-draft" element_ui: "2.15.6" vue: "2.6.14" page: "../index.html#spec-rich-text" source_data: "../component-data.json" official_components: [] template_components: ["el-input"] scenario_count: 6 verification: "scenario-checklist-not-full-test-pass" --- # 富文本编辑与纯文本回退 专题 `rich-text` · 输入组件 · Element UI 2.15.6 ## 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-input`。 ## 通用基线 - 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。 - 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。 - 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。 - 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。 - 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。 - 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。 - 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。 - 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。 - 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。 - 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 本页用法与分类 默认用法：当前仅采用可输入的纯文本回退；富文本编辑器待选型，工具表和状态表是未来接入规范。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 采用范围 | 纯文本输入是当前能力，富文本格式编辑是待接入能力。 | 只需文字时使用当前文本域；确需格式、链接或图片时先完成编辑器选型与验收，不能把表格说明当可用工具。 | | 功能配置 | 段落、标题、加粗、列表、链接、图片等是编辑功能，不是几种视觉皮肤。 | 未来按实际内容需求启用预设工具，不提供任意字体和配色；当前没有这些可操作工具。 | | 当前输入限制 | 当前文本域四行、长度上限和计数按本页已有说明执行。 | 输入按纯文本处理，不解析HTML，也不执行持久化保存；需要改变限制时同步约定计数口径。 | | 自动状态与草案 | 当前聚焦沿用输入规则；富文本错误、保存中、图片失败和格式选中为拟定状态。 | 未来接入后由实际校验、请求和选区触发；不得把错误或保存中作为用户自由选样式。 | 使用边界：不要把静态中文工具清单写成已实现功能，也不要把纯文本回退和完整富文本编辑器当成可以立即切换的两套样式。 ## 组件规则 - **RICH-TEXT-R01**：【适用边界】Element UI 2.15.6 没有官方富文本编辑器。本专题先定义扩展合同，编辑器仍待选型和版本锁定；下方工具与状态表均为静态规范说明，唯一可输入示例是原生 Element 文本域的纯文本回退，不具有加粗、链接插入、图片上传或富文本保存能力。 - **RICH-TEXT-R02**：【工具与视觉】工具名称使用中文，按需启用段落、标题、加粗、列表、链接、图片、撤销、重做和清除格式；默认不提供任意字体、字号和颜色选择。界面复用统一系统中文字体（macOS优先苹方，Windows通常微软雅黑，兼容回退不作为任选样式）、14px/400 正文、12px/400 次级操作及现有色值；内容样式使用受控段落/标题规则，新增表现须集中定义，不能任意粘贴出其他字体和颜色。 - **RICH-TEXT-R03**：【输入与粘贴】纯文本回退将输入作为纯文本值处理，不解析HTML；当前演示不执行持久化保存。未来富文本粘贴须清理来源字体、字号、颜色和不支持的结构，保留允许的段落、列表、链接与图片。空白、空段落或仅有空标签视为空内容；图片能否独立满足必填由字段明确约定。统计口径、长度上限、粘贴超限处理与服务端一致，不静默丢失内容；撤销/重做覆盖编辑和格式变更，不能把已提交数据当作未保存草稿撤销。 - **RICH-TEXT-R04**：【链接与图片】链接插入需显示链接文字和目标地址，验证允许的协议及地址格式，拒绝脚本协议；非法地址就近给出红字错误，保留草稿。图片上传规则复用上传组件的格式、大小与数量限制，提供上传中、失败、重试、替换和移除状态；失败只标记对应图片并保留正文，不伪报成功，上传未完成时按明确规则阻止发布。 - **RICH-TEXT-R05**：【状态与反馈】默认白底、正文深灰、直角、边框灰；聚焦只变原边框为主题蓝，不增加外圈。错误边框、短提示和图标同步错误红，纠正后共同恢复。只读保留正文和复制能力，工具不可修改内容；禁用使用浅灰背景和禁用灰，不接收输入、上传或格式操作。加载与保存结果需明确反馈，不以变色代替状态文字。 - **RICH-TEXT-R06**：【输出与交付】未来富文本必须声明保存格式、允许的标签/属性/样式和输出清理策略；客户端与服务端均过滤不允许的脚本、事件属性和危险链接，展示端不直接渲染未经清理的 HTML。预览与最终展示使用同一渲染合同，草稿切换、取消、保存、失败重试及撤销边界需验收。编辑器选型前不得把这些拟定交互标成已实现。 - **RICH-TEXT-R07**：纯文本回退的宽度沿用输入框专题，填满所在内容列；内容在列内换行，字数计数预留空间。未来富文本工具栏按容器换行，不能横向撑开页面。 ## 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **RICH-TEXT-S01**：当前回退：中文、换行、表情和长文本输入；计数与上限一致；明确不解析 HTML、不模拟富文本成功。 - [ ] **RICH-TEXT-S02**：拟定工具：全部中文名称；仅预设字体和颜色；鼠标与键盘可达，状态与选区变化明确。 - [ ] **RICH-TEXT-S03**：拟定粘贴与空内容：外来文档/网页粘贴、空白、空段落、超限；清理后内容无静默丢失，撤销可恢复当前草稿编辑。 - [ ] **RICH-TEXT-S04**：拟定链接与素材：非法协议、空链接、图片超限、上传中/失败/重试；正文与草稿保留，结果反馈真实。 - [ ] **RICH-TEXT-S05**：拟定状态：默认、聚焦、错误、纠正、只读、禁用、保存中与失败；边框/提示/图标协同，禁用阻断全部编辑入口。 - [ ] **RICH-TEXT-S06**：拟定输出合同：保存格式、标签/属性/样式白名单、服务端清理、预览一致性；切换与取消不误提交，验收后才标记扩展能力已实现。 ### 专题验收重点 当前只验证中文静态说明与原生文本域输入、计数、直角和焦点样式。富文本编辑、粘贴清理、链接插入、图片上传、撤销、预览和输出清理须在编辑器选型后验收，不得提前记为通过。 ## 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

规则草案：富文本编辑器待选型。下面的工具和状态是静态说明；底部文本域可输入纯文本，不会执行富文本操作。

中文工具 拟定用途 使用边界
段落、标题、加粗 建立内容层级 只允许公共规范预设样式，不开放任意字体、字号和颜色
有序列表、无序列表 表达步骤或并列内容 粘贴后归一化缩进与行距
插入链接 关联文字与目标地址 校验地址、协议与显示文字；错误保留草稿
插入图片 使用合规尺寸的正文素材 复用上传中、失败、重试、替换与移除规范
撤销、重做、清除格式 恢复编辑或移除外来格式 仅作用于当前草稿；不撤回已提交数据

状态说明（静态）

状态 界面说明 拟定行为
空内容 字段标签始终可见，占位提示为禁用灰 必填校验排除空白和空标签，不仅判断字符串长度
内容错误 请填写内容或修正链接地址 边框与短提示同时变红，纠正后共同恢复
图片上传失败 图片上传失败，请重试 仅标记失败图片，正文保留；不能出现上传成功的假状态
只读 正文深灰、白底 可以阅读和复制，不能编辑或上传
禁用 浅灰背景、禁用灰 阻止输入及工具操作，不触发新校验

纯文本回退（可输入）

这里只演示普通多行文本输入，最多 300 个 UTF-16 代码单元；不解析 HTML，也不支持富文本工具。

``` ## 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ## 来源与关联 - 来源线索：2026-09-15参考运营后台C《首存活动》https://wt37gq.axshare.com/#g=1&id=i50z9y&p=%E9%A6%96%E5%AD%98%E6%B4%BB%E5%8A%A8 ：页面前段下方截图显示WEB/H5内容详情与富文本工具栏。位图只能证明工具栏外观，不能证明实际编辑或保存；扩展边界以version专题为准。。 - [打开本专题页面](../index.html#spec-rich-text) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`rich-text`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ## 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 / 聚焦 | 白底、正文深灰、边框灰、直角；聚焦仅现有边框主题蓝，不增加外圈。 | | 错误 / 纠正（拟定） | 边框、错误短提示和图标共同使用错误红，纠正后共同恢复。 | | 只读 / 禁用（拟定） | 只读保留白底深正文和复制；禁用使用浅灰背景、禁用灰，阻止全部编辑操作。 | | 工具 / 选中（拟定） | 普通工具使用正文或操作蓝，选中工具复用主题蓝与选中浅蓝，不新增一套编辑器配色。 | 工具与富文本状态表为规则草案；只有纯文本回退演示可输入。颜色和字体复用公共规范，选型前不声明富文本交互已实现。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ## 业务落地场景 - [活动管理 · 编辑活动 · 纯文本内容](../../showcase/index.html?example=rich-text#campaigns) · [场景文档](../../showcase/docs/campaigns.md)；落地范围：只覆盖纯文本回退，没有富文本格式编辑能力。 - [广告管理 · 新增/编辑广告 · 纯文本内容](../../showcase/index.html?example=advert-editor#adverts) · [场景文档](../../showcase/docs/adverts.md)；落地范围：只覆盖纯文本回退，没有富文本工具栏。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)