Toolbar

Contents

  1. Intro 

The Toolbar

Within the WYSIWYG editor, there are a variety of functions available to the user to properly update the page. Below is a list of all the functions available. Keep in mind that the site adminstrator can remove items and provide you with a limited toolbar.

editor-s

File Functions

Save button Save

Click on the "Save" button to save the current file on the staging server. Remember, it will not be live on the production server until it is published by an authorized approver.

Save button Save As...

Click on the "Save As" button to save the current file with a new file name.

Revert button Revert the editor to its original state

Click on the "Revert" button to undo all changes.

Cut, Copy, Paste, Find Functions

Cut button Cut

To cut a portion of the document, highlight the desired portion and click on the "Cut" button (keyboard shortcut - CTRL+X).

Copy button Copy

To copy a portion of the document, highlight the desired portion and click on the "Copy" button (keyboard shortcut - CTRL+C).

Paste button Paste

To paste a portion that has already been cut (or copied), click on the location where you want to place the desired text on the page and click on the "Paste" button (keyboard shortcut - Ctrl+V).

This button will not work in Firefox without tweaking some settings. To learn how to do this, click here.

Paste from Word button Paste from Word

To paste from Microsoft Word, click on the "Paste from Word" button. This will open a new window where you can paste then insert your text.

Paste as Plain Text button Paste as Plain Text

To paste as plain text, click on the "Paste as Plain Text" button. This will open a new window where you can paste then insert your text. This will also remove any special formatting tags that programs such as Microsoft Word may have added.

Find button Find

Click on the "Find" button to search for text on the current page.

Find/Replace button Find/Replace

Click on the "Find/Replace" button to search for text on the current page then replace that text with other text.

Undo Redo Functions

Undo button Undo

Click on the "Undo" button to undo changes you have done one-by-one.

Redo button Redo

Click on the "Redo" button to redo changes you have undone and want back in place.

Spell Check Function

Spellchecker button Spellchecker To check spelling, click on the spell checker button or right click on the mouse and scroll down to "Check spelling".

You will be taken to the first incorrectly spelled word. You can then choose to:

- Change the incorrectly spelled word with the suggested words provided
- Ignore the incorrectly spelled word (i.e. not make any changes to it).
Formatting Function

Remove Formatting button Remove Formatting

To remove all formatting, highlight the text to be updated and click on the "Remove Formatting" button. This will return the text back to the default settings.

Basic Font Properties

Bold button Bold

Turns selected text into bold text.

Italic button Italic

Turns selected text into italicized text.

Underline button Underline

Turns selected text into underlined text.Please note that underlined text usually means that a word or phrase is a link to another web page. In this case however, the underline formatting does not create a link (to create a link, see the "Insert/Edit Link" Button below).

Strikethrough button Strikethrough

Turns selected text into strikethrough text.

List and Indent Functions

Unordered List button Unordered list

Turns the selected text into an bulleted list. Example:

  • Apples
  • Oranges
  • Bananas
Ordered List button Ordered list

Turns the selected text into a numbered list. Example:

  1. The first subject is...
  2. Next I'd like to point out that...
  3. Finally we can see that…
Outdent button Outdent

To decrease the indent of a paragraph, click on the "Outdent" button. Each consecutive click will move text further to the left.

Indent button Indent

To increase the indent of a paragraph, click on the "Indent" button. Each consecutive click will move text further to the right.

Script Functions

Superscript button Superscript

Turns selected text into superscript text.

Subscript button Subscript

Turns selected text into subscript text.

Alignment Functions

Alight Left button Align left

Moves all selected text to the left.

Alight Center button Align center

Centers all selected text.

Alight Right button Align right

Moves all selected text to the right.

Alight Full button Align full

Moves all selected text to the left and the right.

Link Tools

Insert/Edit Link button Insert/edit link

To create a hyperlink, select the text or image for the link, then click on the "Insert/edit link" button. If applicable, the pop-up window will contain existing link information. You can use the link manager to navigate to the page to which you want to link. The full URL of the page to be linked can be typed in the URL text box. A target window information (optional) and an anchor name (if linking to an anchor - optional) can also be supplied.

When finished, click on the "Insert Link" button to insert the hyperLink you just created, or click on "Remove Link" to remove an existing link. Clicking on "Cancel" will close the window and return to the editor.

Insert/Edit Mailto button Create or modify a mailto link

To create a mailto link, select the text or image for the link, then click on the "Insert/edit mailto" button. If applicable, the pop-up window will contain existing mailto information. You can use the mailto manager to enter the e-mail address and subject of the e-mail to be sent.

Unlink button Unlink

Select in the hyperlink and click on the "Unlink" button to remove a hyperlink

NOTE: The unlink button will only work on anchors in Internet Explorer. It will not work in Firefox, Safari, or Chrome.

Insert/edit anchor button Insert/edit anchor

To create an anchor, select the text or image for the anchor, then click on the "Insert/edit anchor" button. A pop-up window will contain existing anchor information. Enter the name of the anchor and click on the "Insert" button.

Font Properties

Font Family button Font Family

This button displays a drop-down list of the standard fonts recognized by most web browsers. To change the font of existing text, select the text and choose a font from the drop-down list. To start typing new text with a specific font, click on the cursor at the position where you want to begin typing, select a font from the drop-down list, then begin typing. To use a font that is not available in the list, choose "Custom..." and a pop-up screen will request the new font's name. Keep in mind that custom fonts may not be available for display in all browsers.

Font Size button Font Size

This button changes the size of any selected text. Size 1 is the largest, 3 is in the middle, and 7 is the smallest. To start typing new text with a specific font size, click on the cursor at the position where you wish to begin typing, select a size from the drop-down list, then begin typing.

Font Paragraph button Paragraph

The Paragraph button is a drop-down list of several actions that can be used to change the formatting of a selected paragraph. To select a paragraph, simply click on the cursor once anywhere inside the paragraph. The following example functions can be then be used:

Normal <p> - Sets the selected paragraph to normal.

Headings <h1> through Heading 6 <h6> - Sets the selected paragraph to a specific heading size between 1 (the largest) and 6 (the smallest).

Pre <pre> - Sets the selected paragraph format to no text wrap.

Font Styles button Styles

This button sets the style any selected text. The styles available are set by the system administrator.

Text Properties

Select Text Color button Select text color

This button sets the color of any selected text. There are 216 color choices. To start typing new text with a specific font color, click on the cursor at the location where you want to begin typing, select a color from the drop-down list, then begin typing.

Select Background Color button Select background color

This button sets the background color of any selected text. There are 216 color choices.

Insert Images/Media

Insert/Edit Image button Insert/edit image

Insert or Edit an image.  For more info, look here.

Insert/Edit Embedded Media button Insert/edit embedded media

Insert or Edit embedded media.  For more info, look here.

Misc. Graphics Tools

Horizontal Rule button Horizontal rule

To insert a Horizontal rule, click on the "Horizontal rule" button. When clicked, a popup will appear that will allow you to choose both width and height of the horizontal rule.

Insert Line Break button Insert line break

To insert a line break, click on the "Line break" button. This is the same as entering <br />.

Special Character button Insert custom character

To insert a special character, click on the "Insert Special Character" button.

A pop-up window will appear with a list of special characters. Click on the button of the character to insert into your web page. If you know the HTML and numeric equivalent, you can also enter that into the pop-up.

Cleanup Messy Code button Cleanup messy code

The "Cleanup messy code" button removes extraneous tags and adds appropriate ending tags where necessary. This helps with cross-browser functionality as well as good general practice.

Toggle Guidelines/Invisible Elemements button Toggle guidelines/invisible elements

The "Toggle guidelines/invisible elements" button adds/removes the outlines of tables and other elements, for visual purposes only.

Edit HTML Source button Edit HTML Source

The "Edit HTML Source" button takes you to the HTML Source Editor so that you can directly edit the HTML source code.  For more info, look here.

Code Protect button Code Protect

Displays the position of server side code within the WYSIWYG Editor represented by the icon codeicon, allowing for easy editing of server side code. (PHP,ASP,JSP, ColdFusion)

Table Tools

Inserts A New Table button Inserts a new table

To insert a table, select the desired location, then click on the "Insert Table" button.

A new window will pop-up with the following fields: Columns - number of columns in table; Rows - number of rows in table; Cell Padding - padding around cells; Cell Spacing - spacing between cells; Alignment - the alignment of the content within the cells; Border - thickness of the border around the cells; Width - width of table; Height - height of the table; Class - a class defining the styling of the table;
Table Caption - choose whether or not to have a caption above the table.

Fill in table details, then click on the "OK" button to insert table, or click on "Cancel" to go back to the editor.

Table Row Properties button Table row properties

Here you can edit the alignment, background color and several other properties.

Table Cell Properties button Table cell properties

Here you can edit the alignment, background color and several other properties.

Insert Row Before button Insert row before

To insert a row before another row, click inside the row cell you want the new row to preceed, then click on the "Insert row before" button.

Insert Row After button Insert row after

To insert a row after another row, click inside the row cell you want the new row to follow, then click on the "Insert row after" button.

Delete Row button Delete row

To delete a row, click inside the row you would like to remove, then click on the "Delete row" button.

Insert Column Before button Insert column before

 

To insert a column before another column, click inside the column cell you want the new column to preceed, then click on the "Insert column before" button.

Insert Column After button Insert column after

 

To insert a column after another column, click inside the column cell you want the new column to follow, then click on the "Insert column after" button.

Remove Column button Remove column

 

To delete a column, click inside the column you would like to remove, then click on the "Delete column" button.

Split Merged Table Tells button Split merged table cells

 

To split cells that have previously been merged, select the cell then click on the "Split merged table cells" button.

Merge Table Cells button Merge table cells

 

To merge cells, highlight the cells you would like to be merged, then click on the "Merge table cells" button.

Form Tools

The Form tools only build the web page interface of the form. It is up to the web site developer to build or provide the server side form processing code.  For more info, look here.
Inserts/Modify A Form button Inserts/Modify a form

Allows you to create or edit your form. When creating a new form, you will be able to set all attributes needed for your form to function properly.

Delete Form button Delete form

Highlight the form for deletion and click on the "Delete Form" button.

Insert/Modify Input Element button Insert/Modify input element

Allows you to insert or modify input field such as checkboxes, buttons, or events.

Insert/Modify Section Element button Insert/Modify section element

Allows you to insert or modify selection drop down elements.

Insert/Modify Textarea Element button Insert/Modify textarea element

Allows you to insert or modify textarea elements.