UI components · Form input
Rich Text Editor
Also called: WYSIWYG editor, RTE, Text editor, Content editor
An editing area like a lightweight Word. A row of tool buttons on top lets you bold text, set headings, and add lists, links, and images. What you see is what you get, and it saves formatted content.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild an announcement editor with TipTap. The toolbar on top is 40px tall, grouped as: "Paragraph ▾ (Normal / Heading 1 / Heading 2)," "Bold, Italic, Underline, Strikethrough," "Bulleted list, Numbered list, Quote," "Link, Image, Code block," and "Undo, Redo," with vertical dividers between groups. Highlight the buttons for the formatting under the cursor, and show each button's name and shortcut on hover (like "Bold Ctrl+B"). The editing area below has a min height of 320px, 16px padding, 15px body text, and line height 1.75, with the placeholder "Write your announcement…" when empty. Images can be dragged in or pasted, with upload progress shown. A status bar at the bottom shows "1,284 words · Autosaved 2:32 PM," and a draft autosaves every 30 seconds. Keep the toolbar sticky when the page scrolls. Sanitize the HTML with DOMPurify before saving.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Rich Text Editor is what you need.
Use Rich Text Editor when
- Posting articles, announcements, and help docs that mix headings, lists, and images
- Editing product descriptions and event pages that everyday users will read
- Writing emails or replies that need simple formatting like bold, links, and images
Pick something else when
Just a few lines of notes, comments, or feedback. A textarea is enough.
Use insteadTextareaWriting code or config files. Use a code editor with syntax highlighting and auto-indent.
Structured data (price, stock, specs). Split it into form fields instead of letting people format it freely in an editor.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A toolbar crammed with 20 or 30 buttons, with every font, size, color, table, and formula option out front, so the common ones are hard to find
- 02
Content pasted from Word or web pages keeps its original fonts, colors, and sizes, and the whole post's formatting falls apart
- 03
Saved HTML gets rendered on the page without sanitizing, leaving an XSS hole
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A formatting toolbar on top (buttons and dropdowns grouped by function), a WYSIWYG editing area, and a status bar at the bottom (word count, save status). A floating toolbar may pop up when you select text.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Rich text editors are for writing articles, posting announcements, editing product descriptions, and writing emails, anywhere you need formatting. There's a Toolbar on top: a paragraph/heading dropdown, bold, italic, underline, lists, alignment, link, image, quote, code, undo, and redo. Below it is a large editing area, and what you type is exactly what gets published (WYSIWYG). Some editors also pop up a small floating toolbar when you select text. Common ready-made options are TipTap, Lexical, Quill, TinyMCE, and CKEditor. Building one from scratch is almost impossible to get right.
How it differs from a Textarea: a textarea only stores plain text, while a rich text editor stores formatted HTML or JSON. For a few lines of notes or a comment, a textarea is enough. A Markdown editor takes another approach: you format with symbols like **bold** and # Heading. That suits developers writing docs, but it's a higher bar for everyday users.
Pick 8 to 12 toolbar buttons based on how often they're used, group them by function, and tuck the rest under "More." Highlight the button for whatever formatting is under the cursor (like bold). Strip the original fonts and colors when people paste from Word or web pages. Let people drag or paste images in, and show upload progress. Always sanitize the saved content against XSS before rendering it on a page. For long posts, add autosave and a word count, and keep the toolbar sticky when scrolling.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-rich-text-editor- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.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
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
rich-text-editorrich-textrichtextrich-editorwysiwygwysiwyg-editorrtetext-editormarkdown-editormd-editor
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
RichTextEditorRichEditorWysiwygEditorTiptapEditorEditorContentReactQuillQuillEditorCKEditorMarkdownEditorMdEditor
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
form controls
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026