Anatomy
Bold
Italic
Underline
Numbered list
Bulleted list
Text color
Link
Variants
Default
Toolbar
Behaviors
Default
The default variant appears as a tooltip when existing text is highlighted.
Text Color
When changing text color, a color picker appears as a popover.
Lists
Our Rich Text Editor offers numbered and bulleted lists. These lists come with one level of sub-bullets.
Mentions
Users can mention another user by using the @ symbol and picking from the displayed list.
Best Practices
When to use
Use a rich text editor to allow users to express themselves with more detail when communicating with other users. Do not use a rich text editor for simple inputs such as "name" or "address". ²
Do
Don't
Simple UI
When implementing a rich text editor, ensure that the surrounding UI is simple as to not over complicate the page. ¹
Do
Don't
Default vs Toolbar
Use the default variant when users are editing text in smaller, more restricted, spaces such as a comment popover. Use the toolbar variant when users are editing text in more spacious areas such as a message center.
Do
Don't
More
Related Pages
Additional Reading
LinksThe Anatomy Of A Great Rich Text Editor https://froala.com/blog/editor/the-anatomy-of-a-great-rich-text-editor/
Rich Text Editors: App User Experience | Flexum https://flexum.io/post/rich-text-editors-enhancing-user-experience-in-apps