WYSIWYG is an acronym for What You See Is What You Get.

It is a program that is used to edit content (text, images, etc.) and apply styles, such as, bold, italics, and alignment at the click of a button.

The WYSIWYG Editor in allows you to add and modify the content on your website without needing to know any HTML or computer programming. If you want bold text, you just click a button and it writes the HTML code for you.

If you have ever used a word processor such as Microsoft Word then you will already be familiar with this. Many of the icons used in the WYSIWIG Editor are similar to those used in Word.

Tips before you start

There are three crucial things to remember when working with an online WYSIWYG Editor:

  1. Save your work often! automatically logs you out after 20 minutes of inactivity. So if you are halfway through adding some text and get called away from your desk you can loose all your changes. Also, if you loose Internet connection you can also loose your changes.
  2. Don’t copy and past from Microsoft Word. Word adds in its own HTML code, which can lead to unexpected results that are hard for you to fix. If you have Word documents, it’s better to copy any text from Word into Notepad or another plain-text editor first, then copy it into the Editor. Alternatively, you can paste directly into the Source area of the Editor but you will loose all your formatting and have to add it in again. See Adding and Formatting Text using the WYSIWYG.
  3. Remember what you see in the WYSIWIG might not reflect how the site looks. Most website templates available through contain special styles that are applied to text and images when it appears on the Internet. For instance, a featured text colour or a border around an image. The Editor might not display these. Save and Preview your page to see what it will look like.

If you can hand code HTML you can use the plain text Source feature of the Editor, however for the majority of users, the WYSIWYG Editor will allow you to easily manage a professional website.

Getting Started

wysiwyg_buttons.gif

To use the WYSIWYG, simply click in the main text area. Start typing as you would in any other word processor.

Use the Enter button on your keyboard to create a new paragraph. To start a new line, but not a new paragraph use Shift+Enter.

To apply styles like Bold or HTML features such as links, highlight the words that you wish to format and click the appropriate icon. The results will appear immediately inside the Text Editing Area so you can see your changes.

As well as clicking the buttons in the WYSIWYG Editor to add styles to your font, you can also use some of the shortcut keys you might already be familiar with from using other programs. For instance:

  • Ctrl+V will paste in any text you have copied.
  • Ctrl+Z will undo your last change.
  • Ctrl+A selects all the text, images, etc. in the Text Editing Area.

However, not all of the common shortcut keys will work. Pressing Ctrl+B while you have text highlighted WILL NOT turn text bold in most browsers. This is because the browser you are using (e.g. Firefox) uses Ctrl+B to do something else. In general, shortcut keys will work as long as the browser you are using doesn’t already use them to do something else.

For more information on using the WYSIWYG Editor please select one of the following links:

Overview of the WYSIWYG Editor Features

The following table contains an overview of all the features of the WYSIWYG Editor.

source.gif View or edit HTML source code (for advanced users)
template.gif Select a layout template for your content
cut.gif Cut highlighted text
copy.gif Copy highlighted text
paste.gif Paste copied text. The first icon will paste the text along with any existing formatting, the second icon will paste the text without formatting
pastefromword.gif If you must copy from MS Word use this, however this could lead to unexpected results
spellcheck.gif Spell check the HTML page.
undo.gif Undo or Redo the most recent action taken
find.gif Find a word or phrase within the text of the HTML page
findreplace.gif Find and Replace a word or phrase within the text
removeformatting.gif  Remove Formatting from highlighted text. Can be inconsistent.  For example, if you have applied a format such as bold and a heading style, this will not work. You need to turn off the style before using the Remove Format button, then switch the style back on
   Select All (Ctrl+A)
boldital.gif Bold. italic, underscore or strikethrough highlighted text
supersubscript.gif Superscript of subscript highlighted text
textcolor.gif Change the colour of the highlighted text
backgroundcolor.gif Change the background colour behind highlighted text
ol.gif Add a numbered list to highlighted text
ul1.gif Add a bulleted list to highlighted text
indent_outdent.gif Increase or Decrease indenting of highlighted text
alignment.gif Text justification. Set the alignment of highlighted text (left, centered, right, justified)
add_remove_hyperlink.gif Add or remove an external link (to another site) or internal link (to a page or document on your own site) from highlighted text
anchor.gif Insert or Edit Anchor point
image.gif Upload, Insert or Change an image into the page.
table.gif Insert a table. Number of columns, rows, table width, height, borders and alignment can also be set
hr.gif Insert a divider line (horizontal rule across the page)
specialcharacters.gif Insert special characters and symbols (trademarks, currency, etc)
style.gif Styles and Formatting determine the appearance of HTML text. You can use the drop down boxes to style specific highlighted elements (such as headings), or change the size of fonts or font type. A lot of the time you won’t need to use this – the CSS (Cascading Style Sheet) code in your template should do this automatically for you