The content editor has a collection of tools located at the top of the main Body/Description and Sidebar complementary content of content types, in order to edit and customize format of the contents. WYSIWYG stands for What You See Is What You Get.

Screenshot of functionality available in the WYSIWYG toolbar.

WYSIWYG icon Title and function
Source code button. Source allow users to view and edit the HTML code behind the content.
Undo and redo buttons. Undo and redo allow users to undo or redo any actions. Users can use keyboard shortcuts to undo (Ctrl+Z) and redo (Ctrl+Y).
Find and replace buttons. Find and replace help users to find, replace, or replace all specific words, symbols or sentences in lengthy contents. See also: How to use Find and replace.
Select all button. Select all allow users to select all the contents. Users can also use keyboard shortcut (Ctrl+A).
Spell checker button. Spell Check As You Type (SCAYT) help users to check for any typos or misspellings in the content shown by red squiggly lines. It is always on by default; select Disable SCAYT to turn spell check off.
accessibility check icon Accessibilty checker help users to check for accessibility errors in the content shown by an orange highlighted box with recommeneded fixes. Note: this is not all accessbility errors. A manual accessibility check is still strongly recommened.
Bold and Italic buttons. Bold and italic formats are used to emphasize specific texts. Bolded text format is used to make texts stand out. Italic text format is used for non-English words and publications. See also: University of Waterloo Writing Style Guide for more information.
Block quote button. Block quote is used to highlight quotes. Quotation marks are not needed if Block quote is used. See also: How to add a Block quote.
Strikethrough button. Strike through allows users to cross-out texts. See also: Inline Styles.
Subscript and superscript buttons. Subscript and superscript is used to make texts or numbers appear above or below the baseline of regular texts, (i.e., GmailTM, C6H12O6, 30 cm2).
Remove format button. Remove format clears off all the formatting in selected texts.
Insert/Remove Numbered List and Insert/Remove Bulleted List buttons. Insert/remove numbered and bulleted list creates ordered or unordered lists. Use numbered list type when the order of the list is important (e.g., recipes, steps/instructions, and etc.). See also: How to create a bulleted or numbered list and bulleted list writing guideline.
Decrease Indent and Increase Indent buttons. Decrease and increase indent are used to adjust the levels of bulleted/numbered lists.
Align image left, center and align right buttons. Align image to left, center and right allow users to align the position of the selected image to the left, center or right. It also automatically wraps the image around the texts. See also: How to add an image.
Insert float clear button. Insert float clear enable users to insert text below a left or right aligned image, as opposed to beside it. See also: How to insert a clear float.
Link and unlink icons. Link and unlink is used to create or remove links in the content. See also: How to add link text.
Anchor button. Anchor adds an anchor tag to a place within the page so that users can easily go to a specific location on the page. See also: How to add and link to anchors.
Separate the teaser and body of this content button. Separate the teaser and body of this content allow users to add a teaser break. The content before the teaser break will appear on the listing page in People profiles, custom listing page, News, Events, Blog, and promoted People profile on homepage.
Formatting styles drop down menu. See below: Styles.
Templates button. Templates is used to create column templates, expandable/collapsable content (Body only), and quick links (Sidebar complementary content and Promotional item only).
Table button. Table is used to create tables. See also: How to add table.
Insert horizontal line button. Insert horizontal rule allows users to add a horizontal line in the set faculty colour used to separate contents within a page. See also: How to add a horizontal rule.
Facebook, Twitter, Livestream, YouTube and Vimeo buttons. Social media widgets (from left to right) includes Facebook widget, Twitter widget, Livestream widget, YouTube widget and Vimeo widget. These tools are used to embed social media feed and videos into the body and/or sidebar complementary content.
Add/edit mailman subscription form button. Add/edit mailman subscription form allow users to sign up for a mailing list registered with the Mailman service. See also: How to add a Mailman subscription widget.
Add/edit tableau visualization button. Add/edit Tableau visualization allow users to create different types of visualizations.
Add/edit tint wall button. Add/edit Tint visualization allow users to create a social hub which connects social feeds (i.e., Twitter, Facebook, Instagram, etc.). See also: How to add Tint visualization.
Add/Edit MailChimp. Add/edit MailChimp allows users to create a MailChimp subscription link.
Power BI Add/edit Power BI allows users to embed a Microsoft Power BI report into the body content of a page.
CodePen Add/edit CodePen embed allows users to embed CodePen into the body content of a page.
Show blocks button. Show blocks is able to show/hide paragraph marks and other hidden formatting symbols. It is useful for advance layout task.
Maximize button. Maximize is used to increase viewing area to full screen by transforming the WCMS editing area to the size of the monitor screen.
Insert paragraph here. Insert paragraph here allow users to insert a paragraph where the red dashed line is. Useful for inserting a paragraph after a table or template.
Add/Edit timeline. Add/Edit Timeline allows users to insert an Embedded Timeline.
Add/Edit Image gallery. Add/Edit Image gallery allows users to embed an image gallery.
Add/Edit Facts and Figures. Add/Edit Facts and Figures allows users to embed facts and figures about the department.
Add/Edit Call to Action. Add/Edit Call to Action allows users to embed a call to action button.
Add/Edit embedded maps. Add/Edit Embedded Maps allows users to embed a map from Google Maps.


Styles can be found under the dropdown option in the WYSIWYG toolbar. There are three types of styles:

Block Styles

Styles Function
Paragraph style. Paragraph is the most common type of style. This style is used when writing content under the heading. This is also a default style.
Heading 2, heading 3, heading 4, heading 5 and heading 6 styles. Headings are used to tag the headings in the page. Headings must be used in sequence and cannot be skipped (i.e. H1, H2, H3, H2 and cannot be H1, H3, H5).
Preformatted text style. Preformatted text style creates a <pre> tag in the HTML, which displays texts in a fixed-width font and preserves both spaces and line breaks when they are written in the HTML. Learn more about Preformatted text in About Technology website.
Address style. Address creates an <address> HTML tag. It is used to represent contact information, such as address, name of author, telephone number and etc. for the content.
No underline style. No underline give users an option to format texts as heading 2 without the horizontal line.
Highlight style. Highlights are used to emphasize texts that needs the users’ attention by changing it to a lighter font colour and slightly bigger size. See also: How to add Highlight text.
Caption styles. Caption is used to provide descriptions (caption) below an inserted image. It displays a smaller font size text in a bordered box.

Inline Styles

Styles Function
Inline styles which includes inserted text and deleted text. These styles are used to markup updates and modifications in a document. See also: How to add markup for inserted/deleted text.