Using the WYSIWYG Editor

One of the most useful elements of the EdukaCMS is the WYSIWYG Editor. WYSIWYG stands for What You See Is What You Get and refers to the way the editor presents clean, formatted text similar to that you would find in a Word Processor, while in the background it creates all the necessary code to present the page. It is most useful for editing your website when you have little or no experience with HTML and CSS - the languages used to create websites.

This tutorial will show you how to make the most of the WYSIWYG Editor to ensure your website looks great.

The Interface

The WYSIWYG Editor's toolbar is divided into 10 sets of icons, grouped by function.

The WYSIWYG Toolbars

Using the WYSIWYG Tools

View Settings

The View settings icons allow you to change appearance of the WYSIWYG Editor.

View Source Icon View Source

This will replace your formatted content with the underlying code. In some situations it is quicker and easier to go in an edit the code directly. This is only recommended if you have experience with HTML and CSS, or you have been given instructions to do so by your Web Designer. To return to the formatted view, click on the View Source icon again.

Full Screen Icon Full Screen

The Full Screen icon makes your editor fill the screen, making it easier to see your content, particularly on small screens. It also removes the distraction of the surrounding interface. To return to the normal view, click on the Full Screen icon again.

Undo/Redo

These icons allow you undo and redo recent steps since the last time you saved the page.

Undo Icon Undo

Clicking on the undo icon will step back through your changes until the point of your last save.

Redo icon Redo

Clicking on the redo icon will step forward through your changes until the most recent change. This is useful if you have accidentally clicked Undo too many times.

Copy/Paste

The Copy and Paste icons allow you to insert text from another application or screen or transfer content from your CMS into another application or screen.

Copy Icon Copy

To use the Copy utility, highlight the text you would like to copy, then click on the Copy icon. The text is now in your computer's clipboard and can be pasted into another document. You can also do this by pressing CTRL+C or Command+C on your keyboard.

Paste icon Paste

To use the Paste utility, highlight and copy the text your would like to paste into your website. Place the cursor at the point you would like place the content and click. Now click on the Paste icon in the toolbar. Your content will appear where you placed the cursor. You can also do this by pressing CTRL-V or Command-V on your keyboard.

Some web browsers will not allow the use of these buttons for security reasons. If you find yourself in this situation, use the keyboard shortcuts mentioned above instead.

Bold/Italic/Underline

These tools allow you to change the basic appearance of your text. They should be used sparingly.

Bold icon Bold

To make your text bold, highlight the words you would like to appear bold, and click on the Bold icon. This should be used when you want to give a word or phrase more importance than those surrounding it.

Italic icon Italic

Italic text should be used to give a word emphasis, for example, a product name, or title of a book, etc. To make a word or phrase italic, highlight the area you would like to appear italic and click on the Italic icon.

Underline icon Underline

The Underline tool places a line below the world or phrase it is applied to. Because this is the default state for clickable links within a website, it is highly recommended that you do not underline your text on a website. If you want to give a word or phrase more emphasis, use bold instead or an alternative colour instead.

Alignment

The alignment tools allow you to adjust the alignment of your content. Highlight your content and then click on the appropriate icon to change the alignment of your text.

Left Align Icon Left Align

This will make your text align to the left margin. It is the most common alignment used online.

Center Align Icon Centre Align

This will centre your text on the page. It is recommend you use this sparingly as it reduced readability and should only be used for headings, images or captions.

Right Align Icon Right Align

This will make your text align to the right margin. It is usually used for images, captions or numerical data in tables.

Justified Icon Justified

This will spread your text out to stretch evenly from the left to right margin creating a uniform box shape. It is recommend you avoid using this method as it makes text hard to read.

Lists

There are two kinds of lists you can use on a web page - unordered and ordered. To create a list, highlight the content that will make up the list, then click on the appropriate list style's icon.

Bulleted List Icon Unordered Lists

An unordered list is also known as a bullet list. By default, the list items with have a bullet (round dot) in the left margin and they will appear indented from the surrounding content. These are used for general lists where the order of the list items is not important.

If you click on the small arrow next the icon, you can choose the style of bullet to use with your list.

Numbered List Icon Ordered Lists

An ordered list is a numbered list. By default, the list items will have a number in the left margin and they will appear indented from the surrounding content.

If you click on the small arrow next to the icon, you can choose the style of numbering to use with your list.

Formats

The Formats button is where you will find all the custom styles your Web Designer has setup for you to format your content. Depending on your website, there may be a few or many options in the drop-down list.

To apply a style from the Formats menu follow these instructions:

  • Highlight the content you would like to format.
  • Click on Formats in the toolbar.
  • Scroll through the available styles and select the one you would like to use by clicking on it.

The style should now be applied to your content.

Paragraph

The paragraph button allows you to apply paragraph formatting to your content, most commonly headings. To covert your text into a heading follow these instructions:

  • Highlight the text you would like to make into a heading.
  • Click on Paragraph in the toolbar.
  • Choose the level of heading you would like to apply and select it by clicking on it.

Your text should now appear as a heading.

Headings on a website should form a hierarchy. The most important heading on the page (usually the page name) should be set to Header 1. Sub-headings should then use Heading 2. Sub-sections below that, Heading 3 and so on.

Links

Links allow you to connect pages within your website to each other and other websites. The EdukaCMS makes it easy to add remove links from your website content using the link tools.

Add Link icon Add Link

To add a link, highlight the text or link you would like people to click on then select the Add Link icon. A popup window will open asking you for the link details.

Add New Link Screen

The popup ask you for the following information:

Link URL

You can either type a web address into the box starting with "http://" or you can use the CMS tools to link to a Page.Link to Page icon

Click on Insert button once you've selected the appropriate link.

Target

This determines where the link will open. You can choose:

  • Open in the Same Window - the default setting.
  • Open in a New Window - usually used when linking to an external site.
Title

The text entered here will appear as a tooltip when somebody hovers their mouse over the link.

Remove Link icon Remove Link

To quickly remove a link from your content, highlight the link then click on the Remove Link icon.

Link to an asset

To link to an asset (an image or pdf file) we have a specific tutorial.

Images

Add Image icon Add Image

To add an image to your content, place your cursor where you would like the image to appear and click on the Add Image button . This will open the Add Image screen.

Please enter an image description.

Select your image. See the File Management section of the manual for more information on how to use the interface.

Image Description

The image description is displayed when a user hovers their mouse over the image. You can leave it blank if you don't want to display a message. Entering a description is good for SEO if it is informative and descriptive.

Dimensions

You can change the width and height of the image here however we could recommend against it. It's much better to format the image correctly before you upload it than try and adjust things afterwards. See the tutorial on Preparing Images for more information.

Click on Insert button once you're happy with the details and the image will appear in your content.

Plugins

The Plugins icon allows you to add a CMS Plugin to your page. Plugins expand the functionality of your website to include features such as contact form, news article lists, event listings and search results. In most cases these will be setup by your Web Designer so it is unlikely you need to use them.

Plugin icon Add Plugin

To add a plugin, place the cursor where you would like the plugin to appear and click on the Add Plugin icon. This will open the plugin interface.

Select a Plugin from the drop-down box and type a unique name into the ID box.

The Plugin ID cannot include space or - or _ characters.

Click on Insert button when you're done.

For information on setting up individual plugins, see the Plugins section of the Manual.