WYSIWYG Toolbar

LAST UPDATED
5/3/2013

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

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.

	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 As...	Click on the Save As icon to save the current file with a new file name and exit the WYSIWYG Editor.

	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	Click on the Auto Draft icon to restore the content to its last auto-saved point. For more information: Using Auto Draft

	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). Both Mozilla Firefox and Safari disable the use of this feature. To Cut using one of those browsers, use the keyboard shortcuts. To learn how to enable the use of this feature in Firefox, see: Turning on Cut/Copy/Paste in the Firefox Browser Keep in mind that this requires modify a script and is not simply a check box.

	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). Both Mozilla Firefox and Safari disable the use of this feature. To Copy using one of those browsers, use the keyboard shortcuts. To learn how to enable the use of this feature in Firefox, see: Turning on Cut/Copy/Paste in the Firefox Browser Keep in mind that this requires modify a script and is not simply a check box.

	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. Both Mozilla Firefox and Safari disable the use of this feature. To Paste using one of those browsers, use the keyboard shortcuts. To learn how to enable the use of this feature in Firefox, see: Turning on Cut/Copy/Paste in the Firefox Browser Keep in mind that this requires modify a script and is not simply a check box.

	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	Click on the Find icon to search for text on the current page.

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

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

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

	Bold	Turns selected text into bold text.

	Italic	Turns selected text into italicized text.

	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	Turns selected text into strikethrough text.

	Unordered list	Turns the selected text into an bulleted list. Example: Apples Oranges Bananas

	Ordered list	Turns the selected text into a numbered list. Example: The first subject is... Next I'd like to point out that... Finally we can see that...

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

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

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

	Superscript	Turns selected text into ^{superscript text}.

	Subscript	Turns selected text into _{subscript text}.

	Align Left	Moves all selected text to the left.

	Align Center	Centers all selected text.

	Align Right	Moves all selected text to the right.

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

	Insert/Edit Link	To create a hyperlink, select the text or image for the link, then click on the Insert/Edit Link icon. If applicable, the pop-up window contains existing link information. Use the link manager to navigate to the page to which the text or image should link. For links to pages internally, a page should generally be chosen from a production server, publish target, or an auxiliary server; although, a file on the staging server can also be chosen. Links can also be made across sites within an account. For links external to the site, The fully qualified URL for the resource can be typed (or pasted) into the URL field. Optionally, a target window type and an anchor name can also be supplied. When finished, click on the Insert Link icon to insert the hyperlink just created. Click Cancel to close the window and return to the editor. If Dependency Manager has been turned on for the account, dependency tags instead of URLs are inserted into the source of the page when inserting a link.

	Create or Modify a Mailto Link	To create a mailto link, select the text or image for the link, then click on the Create or Modify a Mailto Link icon. If applicable, the pop-up window will contain existing mailto information. Use the mailto manager to enter the email address and subject of the email to be sent.

	Unlink	Select in the hyperlink and click on the Unlink icon to remove a hyperlink. NOTE: The Unlink icon will only work on anchors in Internet Explorer. It will not work on anchors in Firefox, Safari, or Chrome.

	Insert/Edit Anchor	To create an anchor, place the cursor where the anchor is desired or select the text or image for the anchor. Then click on the Insert/Edit Anchor Icon. A pop-up window contains any existing anchor information. Enter the name of the anchor and click on the Insert button. It is not necessary to enter a # (hash mark). The specifics of valid anchor names can be found in the HTML specifications: HTML 4.01 HTML 5

	Help Icon	The Help icon displays the help text for the WYSIWYG Editor. It show help text for all available functions, not only those limited to the toolbar being used.

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

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

	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	This icon sets the background color of any selected text. There are 216 color choices.

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

	Insert/Edit Embedded Media	Insert or edit embedded media. For more information: Inserting Video.

	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: Training Tuesday WebEx Video Tutorial Additional information about the General and Advanced tabs

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

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

	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	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	To delete a row, click inside the row to be removed, then click on the Delete row icon.

	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	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	To delete a column, click inside the column to be removed, then click on the Delete Column icon.

	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	To merge cells, highlight the cells to be merged, then click on the Merge Table Cells icon.

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

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

	Insert/Modify Input Element	Insert or modify input field such as checkboxes, icons, or events.

	Insert/Modify Section Element	Insert or modify selection drop down elements.

	Insert/Modify Textarea Element	Insert or modify textarea elements.

	Insert Horizontal Line	Adds a horizontal rule.

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

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

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

	Code Protect	Displays the position of server side code within the WYSIWYG Editor represented by the icon , allowing for easy editing of server side code (PHP only).

	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.

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

Toolbar Reference

File Functions

Cut, Copy, Paste, Find Functions

Undo Redo Functions

Spell Check Function

Remove Formatting Function

Basic Font Properties

List and Indent Functions

Script Functions

Alignment Functions

Link Tools

Font Properties

Text Properties

Insert Images/Media

Miscellaneous Functionality

Table Tools

Form Tools

Was this page helpful?

IN THIS SECTION

ON THIS PAGE

RELATED CONTENT

TAGGED WORDS