cLc Teacher Training Module 4 Page | 1

Module 4: WYSIWYG Editor

WYSIWYG stands for What You See Is What You Get.

The WYSIWYG editing tool allows Group Owners/Editors to add/edit content to cLc pages without any technical

knowledge. It can be used to input information directly onto your website. It works in a similar way to Microsoft Word so

you may already be familiar with some of its functions.

The WYSIWYG Editor can be found in any editable area of the cLc. For example, designing your ePortfolio Homepage and

when adding resources such as Blogs and Wikis.

Look for the Edit icon

You will then see the WYSIWYG Editor

cLc Teacher Training Module 4 Page | 2

The following is an overview of the icons in the WYSIWYG and what functions they perform. These functions can be

accessed using the menu bar at the top of the WYSIWYG Edit Box:

Full Screen: Changes the WYSIWYG to a full screen view. Selecting it a second time reduces it back to the original size.

Preview: This allows you to view a preview of how the page will be displayed. The following preview sizes are

available on selection 640x480 800x600 1024x768.

Print: Allows you to print the WYSIWYG content.

Search: Allows you to search and replace the web page content.

Cut: Cuts the selected text/item from view and stores it in memory.

Copy: Copies the selected text/item and stores it in memory.

Paste: Pastes the current stored item from memory and places it at the cursor position on the screen.. This will keep

any formatting from the application being copied from.

Paste From Word: Allows you to paste copied content from Word in to a text box that then inputs the content to the

WYSIWYG box. The text gets pasted into your web page without the word formatting applied to it.

Paste Text: Pastes the current stored text from memory and places it at the cursor position on the screen.

cLc Teacher Training Module 4 Page | 3

Undo: Allows you to undo the last action.

Redo: Allows you to redo your last action.

Foreground Colour: Sets/changes the colour of the currently selected text.

Background Colour: Sets/changes the colour of the currently selected text.

Bookmark: The Bookmark feature is used to create an anchor with in pages. To use the Bookmark, highlight the text,

click bookmark and then give the bookmark a name. After you have created a bookmark, highlight the text that is to be

used as a link to the bookmark (perhaps a heading), go to the hyperlink feature and select the link type “bookmark” and

the name of the bookmark you wish to use.

Hyperlink: Inserts a clickable hyperlink to another webpage or document elsewhere on the internet.

View/Edit Source: This allows you to view/edit the code HTML code. This allows more HTML literate users to enter

HTML code directly into the cLc, or copy and paste from an external web design application.

Numbering: Inserts a numerically ordered list.

Bullets: Inserts a bullet points.

cLc Teacher Training Module 4 Page | 4

Indent: Indents the selected text.

Outdent: Outdents the selected text.

Image: Inserts a selected image file.

Flash: Inserts a selected flash file.

Media: Inserts a selected media file.

Insert Table: Allows you to insert a table. Tables should always be inserted to ensure a uniform layout on your pages.

Edit table/cell: Allows you to edit the selected table or cell.

Show/Hide Guidelines: Allows you to show or hide the selected guide lines of a table.

Absolute: Allows you to slide/move a selected item/object to a selected area on the page.

Special Characters: Allows you to enter a wide selection of special characters.

Line: Allows you insert a line across the page in the selected area.

Remove Formatting: Allows you to remove the formatting.

Clear All: Allows to clear the entire content of the WYSIWYG text box.

cLc Teacher Training Module 4 Page | 5

Paragraph sizes the text to HTML standards, as shown above. (Tip: you can NOT select a text to be Heading 1 then select a

different size for text on the same line, to do this you will have to go into the View/Edit Source and enter your extra text

outside of the Heading 1 tags to ensure it is not the same size).

Font Name This feature lets you choose from 30 fonts to customise and enhance your page visually.

Font Size This features modifies the size of the Paragraph font chosen earlier, e.g. you can have “Normal” Paragraph

chosen, but display it in XX-LARGE to xx-small.

Bold: Makes the selected text bold.

Italic: Makes the selected text italics.

Underline: Makes the selected text underlined.

Strikethrough: Strikes through the selected text.

Justify Left: Justifies the selected text to the left.

Justify Centre: Justifies the selected text to the centre.

Justify Right: Justifies the selected text to the right.

Justify Full: Justifies the selected text fully.