跳到主要内容
前端术语库

UI 组件 · 表单输入

富文本编辑器

Rich Text Editor

也叫：富文本、所见即所得编辑器、图文编辑器、WYSIWYG、RTE、Rich Editor

像一个简易版 Word 的编辑区：上方一排工具按钮，能给文字加粗、设标题、插列表、链接和图片，所见即所得，保存的是带格式的内容。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

用 TipTap 做一个公告编辑器：上方工具栏高 40px，按分组排列「段落 ▾（正文 / 标题 1 / 标题 2）」「加粗、斜体、下划线、删除线」「无序列表、有序列表、引用」「链接、图片、代码块」「撤销、重做」，组之间用竖线分隔；光标所在文字的格式，对应按钮高亮；每个按钮悬停时显示名称和快捷键（例如「加粗 Ctrl+B」）。下方编辑区最小高度 320px、内边距 16px，正文 15px、行高 1.75，空的时候显示占位文字「请输入公告正文…」。图片可以拖入或粘贴上传，上传中显示进度。底部状态栏显示「字数 1,284 · 已自动保存 14:32」，每 30 秒自动保存一次草稿。页面滚动时工具栏吸顶。保存前用 DOMPurify 过滤 HTML。

发给

01判断

你的内容是这样吗？

对照两列，确认富文本编辑器是不是你要找的。

符合这些情况，用富文本编辑器

  • 发布文章、公告、帮助文档，需要标题、列表、图片混排
  • 编辑商品详情、活动介绍这类展示给普通用户看的图文内容
  • 写邮件、写回复时需要加粗、加链接、插图这样的简单格式

是这些情况，换成别的

  • 只写几句备注、评论、反馈

    改用多行文本框

  • 写代码或配置文件，用带语法高亮和自动缩进的代码编辑器

  • 结构固定的数据（价格、库存、规格参数），应该拆成表单字段，不要让人在编辑器里自由排版

    改用表单

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    工具栏堆了二三十个按钮，字体、字号、颜色、表格、公式全摆出来，常用的几个反而找不到

  2. 02

    从 Word 或网页粘贴进来的内容带着原来的字体、颜色和字号，整篇排版全乱

  3. 03

    保存的 HTML 不做过滤就直接渲染到页面上，留下 XSS 漏洞

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由顶部的格式工具栏（按功能分组的按钮和下拉）、所见即所得的编辑区和底部状态栏（字数、保存状态）组成，选中文字时可能弹出浮动工具条。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个大文本区域上方有一排小图标按钮：B、I、U、列表、链接、图片
  2. 2编辑区里的文字带着标题、加粗、列表等格式，看起来就像最终页面
  3. 3底部常有字数统计或「已保存」字样

04解释

详细解释

富文本编辑器用在写文章、发公告、编辑商品详情、写邮件这些需要排版的地方。上面一条 工具栏：段落 / 标题下拉、加粗、斜体、下划线、列表、对齐、链接、图片、引用、代码、撤销重做；下面是一大块编辑区，打出来是什么样，发布出去就是什么样（所见即所得）。选中一段文字时，有的编辑器还会在旁边弹出一个小的浮动工具条。常用的现成方案有 TipTap、Lexical、Quill、TinyMCE、wangEditor，自己从零写几乎不可能写好。

它和 多行文本框 的区别：多行文本框只能存纯文字，富文本编辑器存的是带格式的 HTML 或 JSON。只需要写几句备注、评论，用多行文本框就够了。Markdown 编辑器是另一种思路：用 **加粗**、# 标题 这样的符号写格式，适合开发者写文档，对普通用户门槛偏高。

工具栏按使用频率挑 8~12 个按钮、按功能分组，少用的收进「更多」；光标所在文字的格式（比如加粗）要在对应按钮上高亮。从 Word、网页粘贴进来的内容要清理掉原来的字体和颜色；图片要能拖进来、粘贴上传，并显示上传进度。保存的内容展示到页面上之前一定要做 XSS 过滤。长文章要有自动保存和字数统计，页面滚动时工具栏吸顶。

开发者信息
术语 ID
component-rich-text-editor
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ql-container
  • .ql-editor
  • .tox-tinymce
  • .ck-editor
  • .ck-editor__editable
  • .w-e-text-container
  • .ProseMirror
  • .tiptap
  • [data-lexical-editor]
  • [data-slate-editor]
  • .DraftEditor-root
  • .codex-editor
  • .bn-editor
  • .toastui-editor-defaultUI
  • .w-md-editor
  • .EasyMDEContainer
  • .vditor
  • .bytemd
  • .mce-content-body
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • rich-text-editor
  • rich-text
  • richtext
  • rich-editor
  • wysiwyg
  • wysiwyg-editor
  • rte
  • text-editor
  • markdown-editor
  • md-editor
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • RichTextEditor
  • RichEditor
  • WysiwygEditor
  • TiptapEditor
  • EditorContent
  • ReactQuill
  • QuillEditor
  • CKEditor
  • MarkdownEditor
  • MdEditor
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30