Skip to content

WYSIWYG editor

WYSIWYG (pronounced wiz-ee-wig) is a type of editing software that allows users to see and edit content in a form that appears as it would when displayed on an interface, webpage, slide presentation or printed document.

WYSIWYG is an acronym for "what you see is what you get."

The advantage of these editors is that users do not need to know any programming or markup languages to create a web document. The representation of the data is displayed in visual form, as in Microsoft Word, and can be edited. The formatting instructions are in the background of the program. WYSIWYG editors enable users to manipulate the content or layout without having to type any commands

When to use

The WYSIWYG editor is recommended when it's necessary to give the user the possibility of writing a text with different formats, such as bold, italic, underline, headings, lists... etc.

Design Guidelines

Anatomy

The WYSIWYG editor is actually a text toolbar with a set of buttons and menus grouped horizontally. These controls primarily provide text editing functionality. Formatting actions and style changes can be applied to the editable text in the text area below the text toolbar. Attaching files, embedding links and searching for keywords are additional functions that a toolbar can have.

 
1. Actions
2. Formatting
3. Paragraph
4. Other formatting options

Actions

Use “Undo” and “Redo” to undo or revert the last change made. Use “Cut”, “Copy”, and “Paste” to move pieces of text to another place within the text area, to copy text to the clipboard, or to paste copied text from the clipboard to a different place within the text area.

Formatting

Change the typeface, size, style, and color of a text.

Paragraph

Select different alignments and indents for paragraph text and indicate bulleted or numbered lists or introduce a quote.

Other formatting options

Change the font to strikethrough text or clear the text format.

Placement

WYSIWYG editors can span the entire width of the screen.

In small devices, this component is replaced with the device's editor.

WYSIWYG should be placed as a block: toolbar + description text.

Avoid placing this editor in front of any type of content.

Common icon options

The WYSIWYG editor can be customized by adding or removing icon buttons based on specific user needs such as the following options:

  1. - Redo
  2. - Undo
  3. Sans Serif - Typeface
  4. - Type size
  5. - Bold
  6. - Italic
  7. - Underline
  8. - Text color
  9. - Alignment
  10. - Numbered list
  11. - Bulleted list
  12. - Indent less
  13. - Indent more
  14. - Quote
  15. - Strikethrough
  16. - Clear Format

Resources

If the framework you're using doesn't have the component, you can use these options instead:

Vue

React