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).

Visuals

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.

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: