WYSIWYG HTML Editor Help

WYSIWYG is an acronym for What You See Is What You Get. The editor makes it easy to create sophisticated HTML web-pages without requiring any knowledge in the inner working of HTML.

The editor opens as a separate window when you click on the "Edit Content" link.

Editing

The Enter key will generate a new paragraph (in Internet Explorer): if you want a line break without a new paragraph, use Shift+Enter. This is the same way most word processors work.

Simply pressing Enter...

..gets a new para. But pressing Shift+Enter...
..gets a line break without a new paragraph.

Toolbar

The editor toolbar is similar to the one in Microsoft Word and should seem familiar:

  bolditalicunderlinecolorhiliteindentoutdentleftcenterrightundoredonumberbulletrulelinkimagetablecleanhtml

The toolbar buttons allow you to format the selected text.
You can select text by dragging with the mouse, just as in other applications.
Double click to select a word.

Use the pull-down to choose heading styles that conform to the site style sheet. 

Bold or Ctrl+B for Bold,
Italic or Ctrl+I for Italic.

You should probably avoid using underline in web pages: people often assume underlined text is a link. You may want to use Ctrl+U to switch off underline on text you have pasted in from elsewhere.

colorColor text brings up the Color dialogue: you should use this sparingly or your pages may become too 'busy'. You can select a color from the palette or type in a color name or hex code (starting #), if you know it.

hilite Highlight text also brings up the Color dialogue.

indent Indent text or outdentRemove indent

Justify, or align, text: Leftleft, Rightright, Centercentred.

undoUndo or redoRedo your last change.

Bullet Bullets and NumberNumbers make selected paragraphs into lists, just as in your word processor.

Link brings up the Insert link dialogue, but you need to have some text selected first. So, first you select the text (click and drag) you want to make into a link, then, click the link button and enter the URL, or address of the page you want to link to. If you open the page you want in another window you can copy the link address from the address bar then paste it into the address field.

Clean is the 'Clean up' button.

Special Toolbar buttons

Pictures or images

Image brings up the Insert Image dialogue. You can choose a picture from the website or upload a new one. The form lets you format the image:

Image address (URL): the address if you know it, otherwise click Browse.

Alternate text: The text that is displayed, or read out aloud, to users who cannot see the image. If left blank, Whizzywig inserts part of the filename.

Align: 'Normal' means the image is in-line, inside the text  Image aligned: NORMAL <-like that;
 Image aligned LEFT 'Left' floats the image to the left of the page and the text flows around it;
 Image aligned RIGHT'Right' floats the image to the right ->

Border: A number on its own gives the width of the border, in pixels, so '0' means 'no border'.

If you know a little CSS you can also specify a border using strings like
 Image border: 3px outset blue '3px outset blue' or
 Image border: thin dotted red 'thin dotted red' or
 Image border: 2px solid pink '2px solid pink

Photographs usually look better with a border set to
'1' or '1px solid black'.

Logos should normally have border set to
'0'

Margin: A number on its own gives the width of the space round the image, in pixels, so '0' means 'no margin'. 5 or 10 are sensible numbers to keep text clear of images.

If you know a little CSS you can also specify a margin using strings like
'1em' (1 'M' character wide) or
'0 5px' (0 at top and bottom, 5 pixels at sides) or
'15px 0 30px 1em' (starting at top, going clockwise, 15 pixels at the top, nothing at the right, 30 pixels at the bottom, 2 'M' characters wide at the left. Top, Right, Bottom, Left: TRBL.

opens a image previewer window that lets you  pick an image that is already in your cmsdocs directory.

In the image previewer, hover over a filename to preview it. The image previewer loads the image after one second. Click the image to insert it into your page.

Photo Albums

Adding a new photo album:

You can insert a photo album at any location in the editor.

The photo album inserted into the editor looks different from how the album will look like on the actual page. The album shown in the editor has a red border around the photos. Do not directly edit anything inside the red frame. The outer frame is black and the inserted photo album name is added to the black frame. You can edit all text inside the black frame. You can also add additional information. The text inside the black frame belongs to the photo album. If you later delete or update the photo album, the text inside the black frame is lost.

Updating or deleting a photo album.


Tables

table the table button brings up a dialogue to insert a new table -  unless you are already in a table, in which case it reveals the table editor buttons to

add_row_above Add row above the current one,

add_row_below Add row below,

delete_row Delete row
add_column_beforeAdd column before,

add_column_after Add column after,

delete_column Delete column.

table_in_cell Table in cell creates a new table inside the current table cell.

Cut and Paste

You can use Copy (or Ctrl+C) and Paste (or Ctrl+V) on the Edit menu of Internet Explorer (or whatever browser you are using). This allows you to paste text from another application (e.g. a Word document) into to the edit area. This is useful if you already have text prepared in Word, or Excel, or another web page.
After you have pasted in from another application, you should make sure you have no text selected then click the

Clean Clean up button on the toolbar.

This will make the text conform to the site style. The site style is controlled by a 'style sheet' and determines what fonts and colors to use for text and headings. Changes made to the style sheet affect every page on the site.

Clean up

If you click Clean with text selected it removes formatting (including bold, italics, etc.) from the current selection.