- WMS: Build content and apply styles in the WYSIWYG editor

OVERVIEW

Target audience: Site Administrators, Site Managers, Site Editors

The McGill Web Management System (WMS) offers a user-friendly "What You See Is What You Get" editor for users to create and edit page content without having to code the page in HTML.

This is based on CKEditor 5. Greater detail and how-to information about the editor can be found at ckeditor.com

A comprehensive article about the best practice use of features, including the use case of the options under the Styles dropdown is available as an article on our website.

In this article:

The WYSIWG toolbar
General features
Text formatting
Creating links
Create a button link (ghost button)
Paragraph
Styles

NOTE: this article refers to a process to be used on sites that have already migrated to the New WMS.

If your site has not yet migrated see the Index of documentation for the McGill Web Management System.

The WYSIWYG toolbar

If a button is greyed out, you must highlight a portion of text to activate it.

A screenshot of a computerDescription automatically generated

General features

Top row (left to right)

Bold
Italic
Strike through
Remove formatting
Link (links to other pages)
Anchor (links within the page itself)
Indent (move the paragraph to the right)
Reverse indent (move the paragraph to the left)
Justification (left, center and right alignment)
Unordered list (bulleted list)
Ordered list (numbered list)
Header level (HTML header [H1-H6])
Styles

Bottom row (left to right)

Insert horizontal line
Block Quote styling
Media browser
Embedded Content
Table
Details
Show blocks
Special Characters
Insert a code snippet
Source - view the html tags

Text formatting

The WYSIWYG includes the usual text formatting, alignment, and indenting buttons that you can find in almost any text editor. Blockquote: Select a section of text, then press the Blockquote icon. The text will be indented on all sides and formatted to set it apart from the rest of your text.

Creating links

Anchors: Give a short, descriptive name to your anchors so you can quickly link to them, where needed.

: Select the text that you wish to convert into a hyperlink, then click the Link icon. To remove a hyperlink, click the Unlink icon.

For more information about links, see Links in the WMS.

Create a button link (ghost button)

Ghost buttons are created by applying a Style.

On the page content screen add a link.
Highlight the link and click ghost-button in the styles section of the toolbar.
Click Save.

Suggested uses:

Highlighting important links to allow visitors to scan the page and find useful information faster. 
Clearly differentiate between the importance of multiple links in a call-to-action block. 
Communicate different areas of a page with clear clickable links.

Here is an article with more information about  ghost buttons.

Paragraph

Header level dropdown: By default, text uses the Paragraph style, but you can also select from Headings 2 to 6.

Styles

Styles can be applied to different types of text when highlighted.

If an option is grey and unclickable, it is because the text is specific to a type of formatting. A detailed look at the use cases appropriate for the different styles is in this article on the Web Services website.