WYSIWYG Toolbar

This section lists the function of all toolbar buttons in the WYSIWYG.

Figure B.2. The WYSIWYG toolbar

The WYSIWYG toolbar

Content Control

  1. Source mode toggle. Toggles between HTML source code view and point-and-click view. Using HTML source mode allows you to manually adjust the HTML code if required.

  2. Templates. This button opens a popup that lists pre-built templates that can be inserted into the editor. See the Templates section for help on creating templates.

  3. Cut. Remove the selection and add it to the clipboard so it can be pasted in elsewhere.

  4. Copy. Add the selection to the clipboard so it can be pasted elsewhere.

  5. Paste. Insert previously copied content where the cursor currently is.

  6. Paste as plain text. Insert previously copied content where the cursor currently is, stripping out any formatting.

  7. Paste from Microsoft Word. Insert content copied from Microsoft Word where the cursor currently is. This function removes extraneous markup generated by Word so it doesn't clutter up the HTML code on your page.

  8. Check spelling. Checks the spelling of your content.

  9. Check spelling as you type. Allows you to enable real-time checking of the content as you type it.

  10. Undo. Undo the previous action you performed.

  11. Redo. Redo an action you just undid.

  12. Find. Search for a string in your content.

  13. Replace. Search for a string in your content and replace it with a different string.

  14. Select all. Select all content. This is useful if you want to copy everything or clear the content.

  15. Remove formatting. Turns the selection into plain text. For instance, if you have bold text, select the text and clicking this button will remove the bold formatting.

Text Elements

  1. Bold. If text is selected, this button will make it bold. If it's already bold then this formatting will be removed. If no text is selected then bold will be enabled (or disabled) for text you now type.

  2. Italics. If text is selected, this button will italicize it. If it's already in italics then this formatting will be removed. If no text is selected then italics will be enabled (or disabled) for text you now type.

  3. Underline. If text is selected, this button will underline it. If it's already underlined then this formatting will be removed. If no text is selected then underline will be enabled (or disabled) for text you now type.

  4. Strikeout. If text is selected, this button will add a line through the text. If it's struck-out then this formatting will be removed. If no text is selected then strikout will be enabled (or disabled) for text you now type.

  5. Subscript. If text is selected, this button will make it subscript (below the line). If it's already subscript then this formatting will be removed. If no text is selected the subscript will be enabled (or disabled) for text you now type.

  6. Superscript. If text is selected, this button will make it superscript (above the line). If it's already superscript then this formatting will be removed. If no text is selected the superscript will be enabled (or disabled) for text you now type.

  7. Numbered list. This button inserts a numbered list where the cursor is. If you have several paragraphs selected it will turn them into a numbered list.

  8. Bullet list. This button inserts a bulleted list where the cursor is. If you have several paragraphs selected it will turn them into a bulleted list.

Paragraph Alignment

  1. Decrease indent. This button decreases the indent (left margin) of the current paragraph(s).

  2. Increase indent. This button increases the indent (left margin) of the current paragraph(s).

  3. Blockquote. This button adds a margin to the left and right of the current paragraph(s).

  4. Create Div Container. This button is used for inserting a HTML DIV element.

  5. Left-align paragraph. Makes the current paragraph(s) left aligned.

  6. Center paragraph. Makes the current paragraph(s) centered.

  7. Right-align paragraph. Makes the current paragraph(s) right aligned.

Page Elements

  1. Insert hyperlink. Turn the current selection into a link. This button will open a dialog with various options for creating the link. Click the Browse Server button to find a file or page from your web site to link to. Refer to File Browser for more information.

  2. Remove hyperlink. If the current selection is a hyperlink this removes the link.

  3. Insert anchor. This inserts a marker at the current location that you can subsequently link to.

  4. Insert image. Insert an image at the current location. This button opens a dialog with various options for inserting an image. Click the Browse Server button to find an image on your web site. Refer to File Browser for more information.

  5. Insert Flash. Insert an Adobe Flash move at the current location. This button opens a dialog with various options for inserting a Flash movie. Click Browse Server to find a Flash movie to insert from your web site. Refer to File Browser for more information.

  6. Insert horizontal line. Insert a horizontal line at the current location.

  7. Insert special character. This button will open a dialog with a list of special characters you can choose to insert at the current cursor location.

Forms

  1. Insert form. Opens a dialog with various options for creating a form. Once you have created a form you can then insert form elements.

  2. Insert checkbox. Opens a dialog with options for inserting a checkbox in the current location.

  3. Insert radio button. Opens a dialog with options for inserting a radio button in the current location.

  4. Insert single-line text field. Opens a dialog with options for inserting a text input in the current location.

  5. Insert multi-line text field. Opens a dialog with options for inserting a text area input in the current location.

  6. Insert select box. Opens a dialog with options for inserting a drop-down select box in the current location.

  7. Insert button. Opens a dialog for inserting a button (such as a form submit button) in the current location.

  8. Insert image button. Opens a dialog for inserting an image button in the current location. Click the Browse Server button to find an image from your web site. Refer to File Browser for more information.

  9. Insert hidden field. Opens a dialog for inserting a hidden form value in the current location.

Tables

  1. Insert table. Opens a dialog with options for inserting a table in the current location.

Text Formatting

  1. Styles dropdown. This drop-down allows you to format the current selection using a pre-defined style. This list can be customized - refer to Customizing the WYSIWYG for more information.

  2. Formatting dropdown. This drop-down allows you to format the current selection so it is a heading or otherwise.

  3. Font dropdown. This drop-down allows you to change the font face of the current selection.

  4. Size dropdown. This drop-down allows you to change the font size of the current selection.

  5. Text colour. This drop-down allows you to change the text colour of the current selection.

  6. Background colour. This drop-down allows you to change the background colour of the current selection.

Miscellaneous Buttons

  1. Show/hide blocks. This button is used to expose HTML blocks (such as paragraphs) to give you more control over content and its layout.

  2. About WYSIWYG editor. This button opens a dialog with information about the WYSIWYG editor.