Content editor (WYSIWYG) buttons

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.

WYSIWYG icon	Title and function
	Source allow users to view and edit the HTML code behind the content.
	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 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 allow users to select all the contents. Users can also use keyboard shortcut (Ctrl+A).
	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.
	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 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 is used to highlight quotes. Quotation marks are not needed if Block quote is used. See also: How to add a Block quote.
	Strike through allows users to cross-out texts. See also: Inline Styles.
	Subscript and superscript is used to make texts or numbers appear above or below the baseline of regular texts, (i.e., Gmail^TM, C₆H₁₂O₆, 30 cm²).
	Remove format clears off all the formatting in selected texts.
	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 and increase indent are used to adjust the levels of bulleted/numbered lists.
	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 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 is used to create or remove links in the content. See also: How to add link text.
	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 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.
	See below: Styles.
	Templates is used to create column templates, expandable/collapsable content (Body only), and quick links (Sidebar complementary content and Promotional item only).
	Table is used to create tables. See also: How to add table.
	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.
	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 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 allow users to create different types of visualizations.
	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 allows users to create a MailChimp subscription link.
	Add/edit Power BI allows users to embed a Microsoft Power BI report into the body content of a page.
	Add/edit CodePen embed allows users to embed CodePen into the body content of a page.
	Show blocks is able to show/hide paragraph marks and other hidden formatting symbols. It is useful for advance layout task.
	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 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 allows users to insert an Embedded Timeline.
	Add/Edit Image gallery allows users to embed an image gallery.
	Add/Edit Facts and Figures allows users to embed facts and figures about the department.
	Add/Edit Call to Action allows users to embed a call to action button.
	Add/Edit Embedded Maps allows users to embed a map from Google Maps.

Styles

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

Block Styles

Styles	Function
	Paragraph is the most common type of style. This style is used when writing content under the heading. This is also a default style.
	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 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 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 give users an option to format texts as heading 2 without the horizontal line.
	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 is used to provide descriptions (caption) below an inserted image. It displays a smaller font size text in a bordered box.