The text editor (WYSIWYG)

Learn how to use the editor in EnagagementHQ.

Deepa Prabhu avatar
Written by Deepa Prabhu
Updated over a week ago

The WYSIWYG (What you see is what you get) text editor allows you to edit and format content across your EngagementHQ site. Most notably, static pages and projects include a fully functioning text editor for project descriptions, but you will also find them in other admin areas; some text editors are reduced versions, only including some text formatting or other tools.

These are your text editor options:

Text formatting tools

Bold, Italic, Underline, Strikethrough

Format your text with bold, italics, underline, and strikethrough.

Font Family and Font Size

Change the Font Family and Font Size of your text.

Note: For consistency, we recommend using Global Styles to choose the font family and size and paragraph formatting for the heading hierarchy.

Inline Style

Change the text’s Inline Style to Big Red or Small Blue text.

Paragraph Style

Change the styling for a paragraph to:

  • Gray

  • Bordered

  • Spaced

  • Uppercase

Paragraph Format

Change between normal text and heading levels. Use this to give your text the correct hierarchy, which helps screen readers read the text.

Ordered List, Unordered List

Create ordered (numbered) and unordered (bullet) lists; use the dropdown menus to change the styling.

Decrease Indent, Increase Indent

Decrease or increase the indent on your paragraphs.

Align

Align your text to the left, center, right, or justified.

Clear Formatting

Clear any previous formatting from pasted text

Code View

Edit your content in HTML. Select Code View again to switch back to the standard text editor.

Undo

Undo your previous action in the editor

Insert tools

Emoticons

Insert emoticons into your text

Insert Horizontal line

Insert a horizontal line into your text

Insert Link

Insert hyperlinks into your text by highlighting existing text, entering the URL, or choosing the text in the Insert Link menu. You can also check the box to Open in new tab. Select the link to:

  • Open, Unlink, or Edit the link

  • Style it in Green or Thick text

Insert Image

Insert images from your project photo gallery, via URL or via upload. Once the image has loaded, select it to:

  • Replace it with another image or Remove it

  • Display it Inline with text or to Break Text and Align it to the left, center, or right

  • Insert Link to create an image link

  • Style it to have a Rounded, Bordered, or Shadowed edge

  • Add an Image Caption and Alternative Text

  • Change Size by Width and Height

Insert Table

Insert a table and select any cell for the following options:

  • Add a Table Header

  • Remove Table

  • Insert rows and columns above or below the selected cell, or remove the select row or column

  • Add a Table Style

  • Merge select cells, or create a vertical or horizontal split

  • Add a Cell Background color

  • Vertical or Horizontal Align

  • Add a Cell Style

Insert Video

Insert a video via URL or an embedded code. EngagementHQ supports videos from YouTube and Vimeo, but please note that you cannot use the link of a video from the Videos widget. Wistia videos can be embedded via HTML.

Remember, all content authors must strive to make their content as accessible as possible. Here are a few tips:

  • When formatting text, use the appropriate styling. For example, you should always use heading levels in the correct hierarchy, as this helps screen readers assess and read the text. Your page title will be Heading 1, so when creating headings in the text editor, start your hierarchy from Heading 2.

  • Similarly, you must style lists using the ordered and unordered list options rather than using hyphens or copied symbols.

  • Always use the appropriate image and add alt text to images. Brief and concise alt text greatly assists screen reader users. This is especially important if the image is a link, although you should try and avoid this.

  • Tables should be used for presenting data, and you should provide a Table Header for context. Your table should also be easy to scan, so left-aligned text is best with right-aligned numbers.

  • When inserting videos, you may want to think about also providing a transcript.

  • Test your pages across mobile, tablet, and desktop devices, particularly when using interactive elements such as accessible tables and videos.

What next?

Did this answer your question?