Using the WYSIWYG editor

The following image shows all of the buttons that are available to contributors while working with the WYSIWYG (“What You See Is What You Get”) editing tool.

The full text editor toolbar and its buttons

Each of the buttons found within the WYSIWYG tool bar are described below.

1: Undo and Redo

undo and redo

The undo and redo buttons function the same way as they would in any word processing program. Similar to most word processors, the CTRL+Z and CTRL+Y shortcuts can be used for undo and redo respectively.

2: Text align

text align options

The text align button are used to align your text width-wise on the page. The available options include left aligned, centre aligned, right aligned and justify. To use these, simple click anywhere in the paragraph block which you want to align and click on the desired button.

3: Bold, italicize, and underline

bold and underline

These buttons are used to bold, italicize and underline text respectively. These behave the same as any other text processor. To use these, simply highlight the text which you which to alter, and click the desired button.

4: Superscript and subscript

superscript and subscript

The superscript and subscript buttons will turn regular text into superscript and subscript text respectively. To use these, highlight the text which you wish to modify, and click the desired button.

5: Non-breaking spaces

non breaking space buttons

The full non-breaking space and the narrow non-breaking space are space characters that keep two adjacent segments together on the same line.

Non-breaking spaces in English

In English, the full non-breaking space is often recommended in the following scenarios:

  • Between figures and abbreviations or symbols, such as "100 km".
  • Between date numbers and month names, such as "January 25".
  • In other cases where a line break could be disruptive to the reader, such as in "World War II".

Non-breaking spaces in French

In French, the full non-breaking space is typographically required in the following scenarios, among others:

  • Before a colon (:), a closing quotation mark (») and a dash (–).
  • After an opening quotation mark («) and a dash (–).
  • Between figures and abbreviations or symbols, such as "100 km".
  • In, before or after abbreviations, such as "p. ex." or "M. Untel".
  • Between date numbers, month names and years, such as "25 janvier 2016".
  • In names, such as "de Gaulle".

The narrow non-breaking space is recommended before the semi-colon (;), the exclamation mark (!) and the question mark (?). Due to software limitations, it is normally omitted in writing in French Canada, while being substituted for a regular non-breaking space in Europe.

6: Special characters

Special Characters

The special characters button contains a selection of special characters which are difficult to input via keyboard. To use this, put your cursor at the location that you want the special character to appear, then click the button. A pop-up will then appear from which you will be able to select the desired character.

7. List

creating list buttons

The list buttons allow you to insert ordered (alphanumeric) lists and unordered (bulleted) respectively. To use these, put your cursor at the desired location and press the desired button. This will begin your list. By pressing the "Enter" key, a new list item will be added to the list. On any list item, you can use the "Tab" and "Shift+Tab" shortcuts to indent or outdent the selected list item, thus creating or removing a child from the list item above it.

8: Hyperlink

Link button options

The link, unlink and anchor buttons are to be used as follows. References made from CKSource documentation, (8 August 2012)

Link button

The link button is used to convert any plain text into a hyperlink that users of the website can then click to be taken to a different page. To use this, highlight the text which you want to convert into a link and click the button. Upon doing so, a pop-up will appear with additional fields and tabs. These are described below:

 

Adding links pop up window with options

In the Link Info Tab

  • The Link Type drop down box, allows you to choose from 3 options:
    1. URL: choose this option to add a link to a new page, once selected the following fields appear
      1. Protocol drop down list: You can choose between the following options http://, https://, ftp://, news://, or <other>. If you paste a link in the URL field, the editor will automatically select the appropriate protocol.
      2. URL field:  This is the destination of the link. For any link which is not under your direct website, use the full URL address (e.g. http://www.thewebsiteiamlinking.ca). If you are linking to another page on your direct website, use the relative URL address (/newpage). This will ensure that there are no errors with the links, if the site URL should change.
    2. Link to anchor in the text: choose this option to link to an anchor in the existing page
    3. Email: to create a link to an e-mail address
  • Target Tab
    • Target: This sets whether the link will open in the same window or a new window. For accessibility reasons, you should never set a link to open in a new window. If you must, you have to indicate in the link text that it opens in a new window (e.g. "Link (new window)"). 
  • Advanced Tab contains further options, that are not necessary for the link to work, but maybe useful. 
    • ID – A unique identifier for the link element in the document (id attribute). 
    • Language Direction – The direction of the text: left to right (LTR) or right to left (RTL) (dir attribute).
    • Access key – A keyboard shortcut to access the link element (accesskey attribute).
    • Name – Obsolete. The name of the link element (name attribute).
    • Language Code – The language of the link element specified according to RFC 1766 (lang attribute).
    • Tab Index – The tab order of the link element (tabindex attribute).
    • Advisory Title – The text of the tooltip that is shown when the mouse cursor hovers over the link (title attribute).
    • Advisory Content Type – The content type of the link (type attribute).
    • Stylesheet Classes – The class of the link element (class attribute). Note that an link element might be assigned more than one class. If this is the case, separate class names with spaces.
    • Linked Resource Charset – The character set of the linked resource (charset attribute).
    • Relationship – The relationship between the current document and the link target (rel attribute).
    • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

Unlink button

After a link has been created, you can always remove the link by placing your cursor anywhere within the link text and pressing the Unlink button. 

Anchor

To create an anchor, press the anchor button, the anchor properties window will appear, enter a name in the Anchor Name Text box to create an Anchor. 

9: Add an image

add an image

The image button inserts an image into the WYSIWYG. To use this, place your cursor at the desired location and click the image button. A popup will appear with three options. These are:

        Upload: Here you can upload a new image. To do so, click the "Choose file" button. This will open up a navigator where you can select any file from your computer. Once you have selected a file, click "Next". At this point, you must enter alt text for the image (required for accessibility); however, you should not set the Title text. If the image is complex, provide in the long description field a link towards a page with a full description of the image. Once done, click "Save". You will then be shown the options you have selected so far, the only thing left to do is to click "Submit". You should now see your new image within your WYSIWYG.

        Library: Here, you can select any image which has already been uploaded to the website. After clicking on the desired image, click "Submit". You will now be shown all the default options associated with the image. At this point, you can overwrite the alt and title text if what is provided is not sufficient. Upon completing the changes, if any, click the "Submit" button. You should now see the image within your WYSIWYG.

        My Files: This section behaves exactly the same way as Library, however, the image which you may select are limited to those which you have personally uploaded.

Link to new page on step by step process to add images to the text editor

10: Build a table

Toolbar button that allows users to create data tables

The table button provides options to build a table. Once the table button is selected the Table Properties window will open, and includes two tabs.

  • Table properties
  • Advanced (options not used)

 

table properties

Below is an overview of all Table Properties tab elements:

  • Rows – the number of rows in the table (obligatory).
  • Columns – the number of columns in the table (obligatory).
  • Headers - for accessibility reasons, it is important to identify table headers, this option allow you to identify which table cells are to be used as headers. (First Row, First Column or Both)
  • Caption – the label of the table that is displayed on top of it.
  • Summary – the summary of the table's content structure that is available for assistive devices like screen readers. It is a good practice to provide your table with a meaningful summary text in order to make it more accessible to users with disabilities.
  • The remaining options should not be used, as they make reference to styling the table. They will be stripped out by the text editor filter to ensure corporate styling is used and to prevent style conflicts.       

11: Templates

adding a template to the text editor

The templates button is used to add pre-defined templates to the text editor.  For example, to add a two-column layout within the body of your text. 

To add a template, put your cursor at the desired location. Then, click on the templates button. A window will appear with a dropdown list of available templates. Upon selecting a template, it will be instantly added to your text editor. Then, you can replace the default content that appears in the text editor with your content.

12: Horizontal line

Adding a horizontal line, button

The horizontal line button will add a separator to your content. To use this, position your cursor at the location where you want the separator to appear and click the button. You will notice that if you ever select a location in the middle of a paragraph, click this button will forcibly divide your paragraph into two separate paragraphs.

13: Defining headers and paragraph format

Adding semantic headings using paragraph format button

The format dropdown list is used to provide semantic meaning for someone reading the text. This is what you will use to define all your headers. An important thing to note when defining headers is that a parent child hierarchy must be used. A "Heading 3" cannot contain another "Heading 3" or higher. A second "Heading 3" could, however, be used to denote the start of a new section at the same level as the first. The hierarchy of the headings (from highest to lowest) are as follows:

  1. Heading 1: Note that there can only ever be one "Heading 1" on any page (usually the page title). Because of this, you should never use this within the WYSIWYG.
  2. Heading 2
  3. Heading 3
  4. Heading 4
  5. Heading 5
  6. Heading 6

The following is an example to help clarify how heading hierarchy works.

        Heading 1: Starbucks Menu (This is my page title)

                  Heading 3: Drinks (A section title)

                              Heading 4: Espresso Beverages

                              Heading 4: Brewed Coffee

                              Heading 4: Chocolate Beverages

        Heading 3: Food (A section title)

                              Heading 6: Breakfast

                              Heading 6: Bakery

As we can see above, the “Heading 1” is reserved for my page title. Then after that, we can use any of the remaining headings for the next level. In this example, we use “Heading 3”. We could just have easily used “Heading 2” through “Heading 5” since there is only one other level below these. Under both “Heading 3”, any one of “Heading 4”, “Heading 5” or “Heading 6” are valid.

14: Styles

styles

The style dropdown is used to add classes to certain elements. Doing so will change the visual look of items within the WYSIWYG. To use this, put your cursor on the text which you want to apply a class, a select the appropriate class from the dropdown. Note that some classes are element-specific (e.g. some things can only be applied to headings).

15: Paste

Pasting options

The paste buttons (paste, paste as plain text, and paste from word) are used to paste content and reformat it, if needed. To use these, simple place your cursor at the location you want the pasted text to appear and click the desired button. Upon pasting your content into the pop-up window, click “OK”. The content should then appear within the text editor window.

16: Make WYSIWYG tool full-screen

Button to make the text editor full screen

Clicking this button will make the text editor full-screen.

17: Visual representation

Button to visually represent block items

This button will provide a visual representation of the elements within the text editor. This can be very useful when attempting to add style classes to certain elements.

18: Spell checker

Spell checking options

The integrated spell checker will check your spelling against Canadian English and Canadian French dictionaries. If you click on the spell check button in the toolbar, you will be presented with the following options:

  • Disable SCAYT: Selecting this option will disable the spell checking as you type feature.
  • Options: The options dialog allows you to ignore words in specific cases, such as ignoring words in capital letters.
  • Languages: This option allows you to change the dictionary used for spell checking. For example, you could change Canadian English to British English or Spanish, if desired.
  • Dictionaries: This option would allow you to create or retrieve a personal dictionary. By default, the dictionary is stored in a browser Cookie.
  • About SCAYT: This will open a dialog box providing information on the spell checking tool used.
  • Check Spelling: This will open a dialog box that provides more advanced options for checking the spelling of words.

19: Accessibility checker

Accessibility checker button

The  "Check Accessibility" button can be found at the end of the text editor's toolbar. Clicking on it will activate the tool. If there are any issues detected, the tool will highlight them and will provide a pop-up window with information on the issues found. For some things, it may suggest ways to automatically correct the issue.

20: Source

The Source button allows you to view the raw HTML code generated for your content. It allows you to make adjustments to the HTML code that would reflect changes to your content. Basically, this means that you can write your content using the WYSIWG editor, using raw HTML, or by a combination of both. You can switch between the HTML code and your content in the WYSIWYG anytime by pressing the Source button.

The following features are available in the HTML code editor (source):

  • Syntax colouring: tags and attributes are coloured to make them easy to distinguish
  • Auto indentation: while writing HTML code, indentation of tags is automatically done for you
  • Auto completion: switching back to the WYSIWYG editor would automatically close any tags accidentally left open
  • Regex search and replace: Allows you to conduct a regular expression based search and replace operation by clicking either the:
    • Find button: For search
    • Replace button: For search and replace

 While you are in the HTML editor

Help

 

21: Using the oembed ckeditor plugin

This document offers a brief tutorial on using the customized oembed_ckeditor plugin to embed accessible YouTube videos. The tutorial is made with the assumption that the reader is already fairly familiar with ckeditor or other WYSIWYG editors.

The plugin allows content creators to embed a YouTube video with additional accessibility features. Specifically, indicator icons for the availability of closed captions and an audio description, and a link for the audio description. A screenshot of a sample embedded video is shown below.

 

 

Using the plugin

To use the plugin, click the oembed YouTube icon shown below in your editor toolbar.

 

 

Plugin popup dialog

You should now see a pop-up dialog window titled “YouTube Media Dialog”, a screenshot is provided below for reference. Use the “Configure” tab to configure and embed an accessible YouTube video. The “Help” tab provides a brief description of the configuration tab’s fields and options. The final tab, labelled “Helpful links” provides a few resources helpful in creating audio descriptions and adding closed captions to YouTube videos.

 

 

Embedding a video

To embed a video, use the configure tab to enter or paste the video URL in the “YouTube URL” text field. This field cannot be left blank, and the URL has to be of the format “http://...” Or "https://..." (e.g "https://www.youtube.com/watch?v=4eTgTKKHU7Y"). Shortened URLs are also supported, but not recommended.

The remaining fields and options can be left blank or unmodified. Doing so will embed the video on the page without the additional accessibility indicators and link.

Configure additional options (see sections below) then click “Ok” to embed the video.

 

 

Accessibility options

Closed captioning

The checkbox shown below is used to show or hide the closed captions icon indicator.

Checked: CC icon shown.

Unchecked: CC icon hidden.

 

Audio description

The second URL text field, labelled “Audio description URL” is used to add the indicator icon (above) and link for an available audio description. Unlike the video URL field, this field is not required and can be left blank. However, it requires the same format as the video URL (“http://...” or “https://...”).

If the audio description URL field is left blank or an invalid URL is provided the audio description (AD) icon and link will be hidden, but the video will embed normally.

 

 

Formatting options

Resize type

This option allows the resizing of the embedded video frame to stretch or shrink the video from its original dimensions.

The resize type selection menu provides three options: no resize (default), responsive resize and specific resize.

Note: these options are for initial sizing of embedded video only, all three options provide automatic resizing of video as the window resizes.

  • No resize (default): this option keeps the default dimensions based on selected aspect ratio (16:9 -> 560x315, 4:3 -> 420x315).
  • Responsive resize: this option stretches or shrinks the video frame to specific dimensions while retaining the original aspect ratio. As shown below, choosing this option will enable the max width and max height fields.
  • Specific resize: this option allows resizing the video frame freely, ignoring the original aspect ratio. Choosing this option will enable entering the exact desired width and height values.

 

Alignment

Similar to text-alignment on a page. This option provides four alignment options: none, left, centre, and right. None defaults to left in most cases, while the other three options align the embedded frame to the left, centre, or right side of the page.

 

 

Modifying an embedded video

To modify or delete an embedded video, double-click the element in the WYSIWYG editor. This will open the configuration dialog where you can modify the options. To delete the element, click it once to select it then press delete or backspace to remove it or use the delete button from the configuration dialog.

NOTE: On Internet Explorer, you cannot select a widget. Therefore, to delete an embedded video, you have to use the button in the dialog.

Double-click anywhere inside the outline to open the plugin dialog for this element where you can modify or delete it.

 

 

» Submit feedback
    Status: 
  • Accepted
    Topics: 
  • Support
    Types: 
  • User Guide
Back to top