Culture Amp
Menu

Rich Text Editor

A text area with additional capabilities for users to format the input text.

Also known as:
WYSIWYG editorHTML editor

AnchorNeed to know

  • Used to create & publish content for other users, where control over the look & feel of the content is important (e.g. survey communications) or users need to structure text to make it more readable (e.g. performance reviews & manager 1:1s).

UI Kit

To keep in mind

  • The output of a Rich Text Editor can appear in the context of a larger page, and can present information that comes from a user rather than the system. In support of this:
    • We offer only limited formatting options.
    • If the content being edited is part of a wider page, users should have the ability to preview that content in context.
  • For accessibility, there is a single tab key stop for the button groups in the toolbar, and the left and right arrows are used to navigate through each button.
  • Focus indicator

Formatting controls

Formatting controls of the same type are visually grouped to distinguish them. There are 4 types of format controls:

  1. Character format
    • Bold
    • Italic
    • Underline
  2. Paragraph format
    • Headings (With a maximum of 3 levels: H1, H2, H3)
    • Bulleted lists
    • Numbered lists
  3. Insert
    • Images
    • Links
    • Variables
  4. Clear formatting

Interactions

  • Character formatting is applied to any selected text/characters.
  • Paragraph formatting is applied to the entire paragraph surrounding the selection or cursor.
  • Common formatting functions (like bold, italic) have commonly understood keyboard bindings or shortcuts that we will support. These shortcuts will be shown as tooltips on the button action.
    • Bold: ⌘+b (Mac) Ctrl+b (Windows)
    • Italic: ⌘+i (Mac) Ctrl+i (Windows)
    • Underline: ⌘+u (Mac) Ctrl+u (Windows)
    • Link: ⌘+k (Mac) Ctrl+k (Windows)
  • No right click functionality (i.e context menus)

Adding a link

  • Highlight the text, click the link icon and add a URL to the dialog.
  • To preview the link, highlight the linked text.
  • To edit a link, highlight the linked text and choose to edit the URL.
  • To delete a link, highlight the linked text and choose delete.

Adding a variable

  • Place your cursor/caret where you want to insert the variable.
  • Select a variable from the list.
  • The variable will appear in the text area as tag displaying the variable name, and an example of the data.
  • Upon saving & previewing, the tag will be substituted with the corresponding data.
  • Use backspace/delete to remove the variable.

Adding an image

  • (Not yet built)

Minimum defaults

  • For a consistent experience across the product, all rich text editors should at least have the default set of formatting controls:
    • Bold
    • Italic
    • Underline
    • Bulleted & numbered lists

When to use and when not to use

When to use
  • Use a Rich Text Editor when the input is to be consumed by other users, and control over the look and feel of the content is needed for a clear message.
When not to use
  • The user doesn’t need control over the look & feel of the input text:
  • Collecting information that in a configuration or setting.
  • For end users who are responding to questions in a Prominent Text Field, consider using WYSIWYG-lite.

See also

External links

Here are some examples of other existing design systems: