BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
8/18/2014

WYSIWYG Toolbar

Within the WYSIWYG Editor is a toolbar, which has a variety of functions available to the user to utilize in order to make editing the page easier.

Icons represent every available function to the user. Clicking on any icon performs an action, either directly to the page, or to the selected text and graphics. Some icons display more options in a drop-down menu fashion, or in a pop-up window display.

The availability of a function is based on the selected items, or the location of the cursor on the page. For example, if nothing is selected, functions such as Insert Link are dimmed, signifying that this function is not available at the moment. For the Insert Link function button to be available, the user must first select text or a graphic.

In many cases, right-clicking offers contextual functions. For example, right-clicking within a table provides a list of available table editing and formatting functions. Additionally, commonly used control key combinations are available such as Ctrl-X, Ctrl-C, and Ctrl-V for cut, copy, and paste respectively.

Keep in mind that the account administrator can remove items and create custom toolbars, which can be assigned to users, sites, directories, pages, and editable regions.

Toolbar Reference

WYSIWYG Toolbar 

 

A brief description of the functionality available with each icon is provided in the tables on the following pages. Links to the tables on this page are listed in the ON THIS PAGE sidebar. Several of the features require a more in-depth description. Links to those files are provided from the IN THIS SECTION navigation.

 

Next Page

 

 

  

File Functions

Save button Save

Click on the Save icon to save the current file on the Staging Server and exit the WYSIWYG Editor. Remember, it will not be live on the Production Server until it is published. To save the content in place when not ready to exit the WYSIWYG Editor, use the keyboard shortcut (CTRL+S for Windows or CMD+S for Mac) to save-in-place.

 

Save button Save As...

Click on the Save As icon to save the current file with a new file name and exit the WYSIWYG Editor.

 

Revert button Revert to Last Saved

Click on the Revert to Last Saved icon to undo all changes and revert the content in the editable region to its original state.

 

Auto Draft Button Auto Draft

Click on the Auto Draft icon to restore the content to its last auto-saved point. For more information:

Using Auto Draft

 

Previous PageNext Page

 

Cut, Copy, Paste, Find Functions

Cut button Cut

To cut a portion of the document, highlight the desired portion and click on the Cut icon (keyboard shortcut is CTRL+X for Windows or CMD+X for Mac).

Mozilla Firefox, Chrome, and Safari disable the use of this feature. To Cut using one of those browsers, use the keyboard shortcuts. 

 

Copy button Copy

To copy a portion of the document, highlight the desired portion and click on the Copy icon (keyboard shortcut is CTRL+C for Windows or CMD+C for Mac).

Mozilla Firefox, Chrome, and Safari disable the use of this feature. To Copy using one of those browsers, use the keyboard shortcuts. 

 

Paste button Paste

To paste a portion that has already been cut or copied, click on the location the desired text should be placed on the page and click on the Paste icon (keyboard shortcut - Ctrl+V for Windows or CMD+V for Mac).

This pastes only valid content, code, and styling. The paste automatically switches between a traditional paste (e.g. pasting the coding when text is copied from a page in a web browser), and pasting from Word, removes the MSO formatting that is not appropriate for a website, as needed. The Paste function always cleans up the content to be pasted to remove any formatting or coding that is not compliant with the requirements of the WYSIWYG Editor.

Mozilla Firefox, Chrome, and Safari disable the use of this feature.  To Paste using one of those browsers, use the keyboard shortcuts. 

 

Paste as Plain Text button Paste as Plain Text

To paste as plain text, click on the Paste as Plain Text icon. The icon will stay selected or sticky until clicked again, and all pastes going forward until exiting the WYSIWYG Editor will be plain text. This will remove all formatting.

Both Mozilla Firefox and Safari disable the use of this icon. To Paste using one of those browsers, use the keyboard shortcuts. To learn how to enable the use of this feature in Firefox, click here. Keep in mind that this requires modify a script and is not simply a check box.

 

Find button Find

Click on the Find icon to search for text on the current page.

 

Find/Replace button Find/Replace

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

 

Previous PageNext Page

  

Undo Redo Functions

Undo button Undo

Click on the Undo icon to undo the last changes made in this session one-by-one.

 

Redo button Redo

Click on the Redo icon to redo changes that were just undone and should be restored.

 

Previous PageNext Page

  

Spell Check Function

Spellchecker button Toggle Spell Checker

To check spelling, click on the Toggle Spell Checker icon or right click on the mouse and scroll down to check spelling.

All of the misspelled words are underlined with a red, squiggly line. Then:

  • Change the incorrectly spelled word with the suggested words provided
  • Ignore the incorrectly spelled word (e.g., not make any changes to it)
  • Add to the word to the dictionary: Level 9 and 10 administrators can add marked words to a site-wide dictionary, and administrators can give users below Level 9 the ability to add words to the dictionary as well

Learn more about the spell checking.

 

Previous PageNext Page

  

Remove Formatting Function

Remove Formatting button Remove Formatting

To remove all formatting for a selection, highlight the text to be updated and click on the Remove Formatting icon. This returns the selected text back to the default settings.

 

Previous PageNext Page

  

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 icon).

 

Strikethrough button Strikethrough

Turns selected text into strikethrough text.

 

Previous PageNext Page

  

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 icon. Each consecutive click will move text further to the left.

 

Indent button Indent

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

 

Blockquote Icon Blockquote

Blockquote is a block-level element that can be used to set-off quotations or to cite material.

 

Previous PageNext Page

  

Script Functions

Superscript button Superscript

Turns selected text into superscript text.

 

Subscript button Subscript

Turns selected text into subscript text.

 

Previous PageNext Page

  

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

Justifies text making it flush on both the left and right sides.

 

Previous PageNext Page

  

Font Properties

Font Family button Font Family

This drop-down 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 text will be inserted, select a font from the drop-down list, then begin typing.

 

Font Size button Font Size

This drop-down changes the size of any selected text. Font size properties are configured by an administrator and labeled 1 through 7. To start typing new text with a specific font size, click on the cursor at the position where text is to be inserted, select a size from the drop-down list, then begin typing.

 

Format Drop-down Format

The Format drop-down lists built-in styles that can be applied to a selected paragraph. To apply an element from the Format drop-down, click within the paragraph (or select text), and then click the element from the drop-down. For more information:

Format Drop-Down

 

Font Styles button Styles

This drop-down sets the style of any selected text. The styles available are configured by the system administrator.

 

Previous PageNext Page

  

Text Properties

Select Text Color button Select Text Color

This icon 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 new text is to be inserted, select a color from the drop-down list, then begin typing.

 

Select Background Color button Select Background Color

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

 

Previous PageNext Page

  

Insert Images/Media

Insert/Edit Image button Insert/Edit Image

Insert or edit an image. For more information: Image Editing Tutorial.

 

Insert/Edit Embedded Media button Insert/Edit Embedded Media

Insert or edit embedded media. For more information: Inserting Video.

 

Previous PageNext Page

  

Miscellaneous Functionality

Horizontal Rule Icon Insert Horizontal Line

Adds a horizontal rule.

 

Insert Line Break button Insert line break

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

 

Special Character button Insert Special Character

To insert a special character such as an copyright symbol, registered trademark, or other characters, click on the Insert Special Character icon.

A pop-up window will appear with a list of special characters. Click on the icon of the character to insert into the page. If the HTML numeric equivalent is known, that can be entered in the pop-up as well.

 

Cleanup Messy Code button Cleanup Messy Code

The Cleanup Messy Code icon removes extraneous tags and adds appropriate ending tags where necessary. This helps with cross-browser functionality as well as good general practice.

 

 Show Hide Block Level Elements Icon  Show/Hide Block Elements

Toggles the WYSWISYG view to show or hide block-level element labeling. Each element such as <p> or <article> is displayed encapsulated with a thin border and labeled with a small tag. For more information:

Show/Hide Block Elements

 
 Toggle Guidelines/Invisible Elemements button Show/Hide Guidelines/Invisible Elements The Toggle Guidelines/Invisible Elements icon adds/removes the outlines of tables and other elements, for visual purposes only.

 

Edit HTML Source button Edit HTML Source

The Edit HTML Source icon opens a code view of the HTML source. If a user has been granted access, there is also an HTML Source Editor available for the source code editing. For more information, see Using the Source Editor.

 

CodeProtect icon 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 only).

 

Insert predefined snippet content Snippets

Click the Snippets icon in order to select preexisting snippets of HTML or text to be inserted into the page. The Snippets available are set by the system administrator. For more info, look here.

 

Insert an Asset Assets

Click the Assets icon in order to select a preconfigured asset to insert into the page. For more information about assets:

Assets Overview

 

Previous PageNext Page

  

Table Tools

Inserts A New Table button Insert/Edit Table

To insert a table, select the desired location, then click on the Insert/Edit Table icon.
The Insert/Edit Table dialog includes several fields that can be used to define the table including:

  • 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 icon to insert table, or click on Cancel to return to the editor.
For more information about tables:

 

Table Row Properties button Table Row Properties

Edit the alignment, background color and several other properties of the rows of the table.

 

Table Cell Properties button Table Cell Properties

Edit the alignment, background color and several other properties of the cells of the table.

 

Insert Row Before button Insert Row Before

To insert a row above another row, click inside the row cell the new row is to precede, then click on the Insert Row Before icon.

 

Insert Row After button Insert Row After

To insert a row below another row, click inside the row cell the new row is to follow, then click on the Insert Row After icon.

 

Delete Row button Delete Row

To delete a row, click inside the row to be removed, then click on the Delete row icon.

 

Insert Column Before button Insert Column Before

 

To insert a column before another column, click inside the column cell the new column is to precede, then click on the Insert Column Before icon.

 

Insert Column After button Insert Column After

 

To insert a column after another column, click inside the column cell the new column is to follow, then click on the Insert Column After icon.

 

Remove Column button Remove Column

 

To delete a column, click inside the column to be removed, then click on the Delete Column icon.

 

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 icon.

 

Merge Table Cells button Merge Table Cells

To merge cells, highlight the cells to be merged, then click on the Merge Table Cells icon.

 

Previous PageNext Page

  

Form Tools

The Form tools only build the client interface for the form. It is up to the website developer to provide the server side form processing code. For more information, see the Forms Tutorial or Forms Reference. The Live Delivery Platform Forms module can be used as an alternative to the WYSIWYG Editor's form tools.
Inserts/Modify A Form button Insert/Edit Form

Create or edit the form. When creating a new form, set all attributes needed for the form to function properly.

 

Delete Form button Delete Form

Highlight the form for deletion and click on the Delete Form icon.

 

Insert/Modify Input Element button Insert/Modify Input Element

Insert or modify input field such as checkboxes, icons, or events.

 

Insert/Modify Section Element button Insert/Modify Section Element

Insert or modify selection drop down elements.

 

Insert/Modify Textarea Element button Insert/Modify Textarea Element

Insert or modify textarea elements.

 

Previous Page

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)