WYSIWYG Editor Advice

Advice on using the WYSIWYG Editor

About the WYSIWYG Editor
The editor controls are similar to those found in Word for Windows and are designed to allow you to enter your text more or less as it will appear on your web page. The editor uses font declarations to display fonts, whereas your web pages uses style declarations. This means that there is a slight difference in size for some font sizes but this is not significant. If you have set your content area text to a particular font face, size and colour using Style Management then any text you enter initially into the editor should reflect this.

Setting Font Faces and Sizes
You can select font faces and sizes from the drop down menu then begin to enter text in the editor. Alternaltively, you can highlight areas of text then select font faces and sizes and the text will change to your choice. The same is true for setting text to bold, italic, underline and text colour.

Aligning or Justifying Text
You can align all text within the text editor to left, centre or right by clicking the approriate justify icon above the text entry area.

Creating Bulleted Lists
To start a bulleted list click the bulleted list icon then hit the Return key to place the cursor on a new line. This should present you with a bullet allowing you to enter your text. Hitting Return will generate a bullet on the next line and so on. Hitting Return twice will end the bulleted list. If the editor places a bullet in front of the text before the bulleted list, where it's not required, then after you have finished your list, simply delete this bullet point.

Decreasing and Increasing the Indent
Clicking the Indent icons will increase or decrease the indent for all text within the editor.

Inserting a Horizontal Rule
Click this icon to place a horizontal rule the full width of the editor at the current cursor position. To adjust the width of the rule, position the cursor over the rule until the following icon appears

If you left click your mouse, small squares will appear above and below the rule to the left, right and center. You can now use your mouse to drag the rule to the required width.

Inserting a Link to an External Website
Clicking on this icon will open a dialogue box that requests

First the type of link. This can be a link to a web site or a link to an e-mail address.
Second the link address. This can be a link to a domain name such as www.somedomain.com or a link to a particular page on a domain such as www.somedomain.com/index.html.
Third the link text. This is the text that the user will click on to activate the link.

With all links it's very easy to make a minor typing error that renders the link useless. Therefore you're strongly advised to always log on to your site and click on any links that you've inserted to make sure that they actually link to where you intended.

Inserting an Internal Link to a Page on Your Website
Clicking on this icon will open a dialogue box that requests

First the page that you wish to link to. Simply select the required page from the select list.
Second the link text. This is the text that the user will click on to activate the link.

If you delete any pages from your site you should make a point of checking for any internal links that you may have inserted on other pages to the deleted page, since these links will become dead.

Inserting a Table
This option allows you to insert a simple table into a content area. The table treats the top row of the table as the table heading. This causes any text in the heading to appear in bold and be centered. It also has the effect of locking the heading to any cell in the same column. For most users this is unimportant but for disabled users, who may be using a web page reader, it causes the heading above a cell to be read out before the cell contents are read out which is important to help the user to make sense of the table.
Clicking on this icon will open a dialogue box that requests

First the number of rows and columns required in the table. The table heading is treated as a row.
Second the width of the table as a percentage of the available width or in pixels.
Third the alignment and border thickness of the table
Fourth the cell spacing and padding of the table. The cell spacing is the amount of space between the cells of the table in pixels. The cell padding is the amount of space between the contents of the cells and the outer edge of the cells.

To adjust the width of the table, position the cursor over any of the outer edgets of the table until the following icon appears

If you left click your mouse, small squares will appear above and below the table to the left, right and center. You can now use your mouse to drag the table to the required width.

Viewing the Editor Contents as HTML
Clicking this icon will toggle the view in the text area between how the text will appear in your web page and the actual HTML code that will be inserted in your web page. Viewing the text as HTML will allow you to paste HTML code directly into your page should you wish to do so.

Viewing the Text Contents in a Large Screen Editor
Clicking this icon will allow you to view your text in a large screen editor.

Tips on Entering Text
You can enter your text directly into the text editor. However, another alternative is to compose your text offline in a simple text editor such as Notepad. This option allows you to save your text content to your hard drive which will create a backup in the unlikely event that your site could go down with the loss of all your content.
It is possible to create your content with Word for Windows then paste it into the editor and this will produce the required results. However, this is not recommended since Word inserts many unnecessary tags into the text that causes a very bulky file and therefore slow download.

Back to Edit Content Area Text