Toolbar Options

Overview

The toolbar of the WYSIWYG editor provides much the same functionality as a standard word processor, as well as some additional web development and OU Campus-specific options.

The Classic Editor and JustEdit toolbars are almost identical in terms of functionality. 

Classic Editor

Toolbar in Classic Editor

JustEdit 

Toolbar in JustEdit

Toolbar Row 1

Most of the tools available on the first row of a toolbar for the WYSIWYG are basic text formatting and linking. The descriptions of the functionality available for each tool is provided on this page. A few of the features have a more in-depth description; links are provided to those pages.

Toolbar Row 2

A brief description of the functionality available with each tool on row 2 of the toolbar is provided in the tables below. Several of the features require a more in-depth description and links to those pages are provided also. Content on this page includes:

Toolbar Row 3

The third toolbar is available only in the Classic Editor. It contains two functions, tables and forms. In JustEdit tables are available in Row 2 under Miscellaneous Functionality, and forms have been phased out in favor of LDP Forms. 

In Classic Editor for tables and forms, the additional features are available after the initial table or form has been inserted on the page. Place the cursor within the element and the editing tools will become available.

 File Tools (Save, Save As, Revert, Restore)

Classic Icon JustEdit Icon Tool Description
Save button Save Icon

Save

Click 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 use save-in-place, use the keyboard shortcut CTRL+S for Windows or CMD+S for Mac.

Save button Not available in JustEdit

 

Save As

Click to save the current file with a new file name and exit the WYSIWYG Editor.

Revert button Not available in JustEdit Revert to Last Saved

Click to undo all changes and revert the content in the editable region to its original state.

Not available in Classic Exit Icon Exit Without Saving

Click to exit the editable region without saving your changes. 

Auto Draft Button Autodraft Icon Auto Draft

Click to restore the content to its last auto-saved point.

For more information, visit the Auto Draft page.

 Cut, Copy, Paste, Find, Replace

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands via the WYSIWYG toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts.

Classic Icon JustEdit Icon Tool Description
Cut button Cut Icon Cut

To remove content from the document in order move it somewhere else, highlight the content and click the icon. The keyboard shortcut is CTRL+X for Windows or CMD-X for Mac. 

Copy button Copy Icon Copy

To copy a content from the page, highlight the content and click the icon. The keyboard shortcut is CTRL+C for Windows or CMD-C for Mac.

Paste button Paste Icon Paste

To paste content on to a page, click the location the content should be placed on the page and click the icon. The keyboard shortcut is 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 code when text is copied from a page in a web browser), and pasting from Word, where it removes any MSO formatting that is not appropriate for a web site. The Paste function always cleans up the content to be pasted to remove any formatting or code that is not compliant with the requirements of the WYSIWYG Editor.

Paste as Plain Text button Paste as Plain Text Icon Paste as Plain Text

Clicking the icon keeps it selected until clicked again, and all pastes going forward until exiting the WYSIWYG Editor will be plain text. This removes all formatting.

Find button Included under the Find/Replace Icon Find

Click to search for text on the current page.

Find and Replace button Find/Replace Icon Find/Replace

Click to search for text on the current page and then replace that text with other text.

 Undo Redo Functions

Classic Icon JustEdit Icon Tool Description
Undo button Undo Icon Undo

Click to undo the last changes made in this session one by one.

Redo button Redo Icon Redo

Click to redo changes that were previously undone and should be restored.

 Spell Check

Classic Icon JustEdit Icon Tool Description
Spellchecker button Spellcheck Icon Toggle Spell Checker

Click to spell check the region that is being edited. Misspelled words are underlined with a red, squiggly line. Change the incorrectly spelled word with the suggested words provided or choose one of the other options 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 Levels 1 through Level 9 the ability to add words to the dictionary as well.

In JustEdit, the drop-down menu on this icon lists the available languages for which to run the spellcheck.

For more information about adding words to the custom dictionary, visit the Custom Dictionaries page.

 Remove Formatting

Classic Icon JustEdit Icon Tool Description
Remove Formatting button Clear Icon Remove Formatting

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

 Font Formatting

Classic Icon JustEdit Icon Tool Description
Bold button Bold Icon Bold

Applies bold formatting to selected text.

Italic button Italic Icon Italic

Applies italicized formatting to selected text.

Underline button Underline Icon Underline

Applies underlined formatting to selected text.

Please note that underlined text often 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, click Insert/Edit Link).

Strikethrough button Strikethrough Icon Strikethrough

Applies strikethrough formatting to selected text.

 Lists, Indents

Classic Icon JustEdit Icon Tool Description
Unordered List button Bulleted List Icon Unordered list

Turns the selected text into an bulleted list. Example:

  • Apples
  • Oranges
  • Bananas
Ordered List button Numbered List Icon Ordered list

Turns the selected text into a numbered list. Example:

  1. Click the Go button.
  2. Enter the text to search on.
  3. Click Start.
Outdent button Decrease Indent Icon Decrease Indent

Decreases the indent of a paragraph. Each consecutive click moves text further to the left.

Indent button Increase Indent Icon Increase Indent

Increases the indent of a paragraph. Each consecutive click moves text further to the right.

Blockquote icon Blockquote Icon Blockquote

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

 Text Placement (Vertical)

Classic Icon JustEdit Icon Tool Description
Superscript button Superscript Icon Superscript

Formats the selected text as superscript text.

Subscript button Subscript Icon Subscript

Formats the selected text as subscript text.

 Align, Justify (Horizontal)

Classic Icon JustEdit Icon Tool Description
Alight Left button Align Left Icon Align Left

Aligns a block-level element such as a paragraph or a heading to the left margin.

Alight Center button Align Center Icon Align Center

Center aligns a block-level element such as a paragraph or a heading within the left and right margin.

Alight Right button Align Right Icon Align Right

Aligns a block-level element such as a paragraph or a heading to the right margin.

Alight Full button Align Full Icon Align Full

Justifies text making it flush on both the left and right side

 Link Tools, WYSIWYG Help Documentation

Classic Icon JustEdit Icon Tool Description
Insert/Edit Link Icon Insert/Edit Link Icon Insert/Edit Link

To create a hyperlink:

  1. Select the text or image for the link.
  2. Click the Insert/Edit Link icon. If applicable, the modal contains existing link information.
  3. Click the Browse icon to select an internal page to which to link.
  4. After locating the file, click Select Link.
  5. Click Insert.

For links to pages internally, a page should generally be chosen from a production server, publish target, or an auxiliary server.  An unpublished file on the staging server or publish target can also be chosen by choosing the staging server or publish target from the drop-down, navigating to the file, and selecting the HTML version that is available. Links can also be made across sites within an account with the file browser by clicking Sites in the breadcrumb and choosing the appropriate site. If Dependency Manager has been enabled for the account, dependency tags instead of URLs are inserted into the source of the page when inserting a link.

For links external to the site, the complete 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 entered.

For more information about links and linking, visit the Insert/Edit Link page.

Insert/Edit Mailto button Mailto Icon Create or Modify a Mailto Link

To create a mailto link, select the text or image for the link, then click the icon. If applicable, the resulting modal contains existing mailto information. Properties for the mailto link can be defined including the email address that is provided when the link is clicked.

For more information, visit the Mailto Link page.

Unlink button Unlink Icon Unlink/Remove Link

Click within the hyperlink and click the Unlink icon to remove a hyperlink.

Note: For unlinking anchors, the Unlink icon works with anchors in Internet Explorer. It will not work on anchors in Firefox, Safari, or Chrome.

Insert/edit anchor button Anchor Icon Insert/Edit Anchor

To create an anchor:

  1. Position the cursor where the anchor should be placed or select the text or image.
  2. Click the Insert/Edit Anchor icon.
  3. In the Anchor Name field, enter the name for the anchor. It is not necessary to enter a # (hash tag).
  4. Click Insert.

To modify an existing anchor:

  1. Click the existing anchor shown in the editing area.
  2. Click the Anchor icon on the toolbar.
  3. The Insert/Edit Anchor modal shows the existing text for the anchor.
  4. Make the modification to the text and click Update.

The specifics of valid anchor names can be found in the HTML 4.01 and HTML 5 pages.

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

Font Properties (Family, Size, Format, Styles)

Classic Icon JustEdit Icon Tool Description
Font Family button  Font Family Icon Font Family

This Font Family drop-down displays a 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, position the cursor where text where the text should be inserted and select a font from the drop-down list, then begin typing. Text can also be selected and the formatting applied. Note that the appearance in the WYSIWYG Editor may not reflect the newly applied styling. From the drop-down deselect the font size to stop applying it in the WYSIWYG by clicking on it again. The markup is added as a span, i.e.:

<span style="font-family: 'book antiqua', palatino;">on the bright plume</span>

Font Size button  Font Size Icon Font Size

This Font Size drop-down changes the size of 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, position the cursor where text is to be inserted, select a size from the drop-down list, then begin typing. From the drop-down deselect the font size to stop applying it in the WYSIWYG by clicking on it again. The markup is added as a span, i.e.:

<span style="font-size: x-large;">&nbsp;This is a font size application.</span>

Format  Formats Icon 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, visit the Format Drop-Down page.

Font Styles button  Styles Icon Styles

This drop-down sets the style of any selected text. The styles available are configured by the system administrator. Note that when applying a class from a Styles drop-down and then selecting another class from the Styles drop-down, both styles are applied to the text, i.e.:

<span class="compare note">This paragraph has two classes applied.</span>

 Text Color, Text Background

Classic Icon JustEdit Icon Tool Description
Select Text Color button Text Color Icon Select Text Color

The color for selected text may be selected by using a picker, using a hexadecimal, chosen from a palette, or by color name. Alternatively, if a custom color has already been selected, click the icon to apply the text color. There are 216 color choices on the palette. To start typing new text with a specific font color, position the cursor at the location where new text is to be inserted, choose a color, and then begin typing. To color existing text, highlight the text to be colored and choose the desired hue.

Select Background Color button Background Color Icon Select Background Color

The color for the background of the selected text may be selected in the same way that text color is selected. To start typing new text with a specific background color, click the cursor at the location where new text is to be inserted, choose a color, and then begin typing. To color the background of existing text, highlight the text to have its background colored and choose the desired hue.

 Images/Media

Classic Icon JustEdit Icon Tool Description
Insert/Edit Image button Insert Image Icon Insert/Edit Image

The Insert/Edit Image tool provides the functionality for linking to an image by browsing or by uploading, and allows for access to the Image Editor. Additional tabs and fields provide advanced options for images such as including styling and JavaScript. It also includes a preview.

For more information, visit the Image Editor and Insert/Edit Image pages. 

Insert/Edit Embedded Media button Insert Video Icon Insert/Edit Embedded Media/Video

The Insert/Edit Embedded Media tool provides the functionality for embedding media specific to several format types to an image by browsing or by uploading. Additional tabs and fields provide advanced options for embedded media such as specifying dimensions, setting audio quality options and Flash options, and previewing the source.

For more information, visit the Insert/Edit Embedded Media page.

 Miscellaneous Functionality

Classic Icon JustEdit Icon  Tool Description
Horizontal Rule Icon Horizontal Line Icon Insert Horizontal Line

Adds a horizontal rule.

<hr />

Insert Line Break button Line Break Icon Insert line break

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

Special Character button Special Character Icon Insert Special Character

To insert a special character such as an copyright symbol, registered trademark, or other symbol, click the Insert Special Character icon. The Select Special Character modal provides a selection of 200 special character from which to choose. Hover or use left and right keyboard arrows to navigate the selection. During the selection process, a preview of the character is shown with its name, HTML character reference, and numerical character entity reference. Click on the icon of the character to insert into the page. Right click the symbol and choose Copy Link from the shortcut menu to copy it to the clipboard, which allows the symbol to be repeatedly pasted on a page.Select Special Character Special Character Modal

Cleanup Messy Code button Not available in JustEdit 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 being a best practice.

 Show Hide Block Level Elements Icon Show Blocks 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, visit the Show/Hide Block Elements page.

 Toggle Guidelines/Invisible Elemements button Not available in JustEdit 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 Source Code Icon Edit HTML Source/Source Code

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, visit the HTML Source Editor page.

CodeProtect icon Not available in JustEdit CodeProtect

Displays the position of server-side code within the WYSIWYG Editor represented within the editing area with the PHP Symbols icon:codeiconThis allows for easy editing of server side code (PHP only).

For more information, visit the CodeProtect page.

Insert predefined snippet content Snippet Icon 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 information, visit the Snippets page.

Insert an Asset Asset Icon Assets

Click the Assets icon in order to select a preconfigured asset to insert into the page.

For more information, visit the Assets page.

Found on Toolbar Row 3 Table Icon Table 

This icon will bring up a drop-down menu where all table properties are now found, from inserting a new table to merging cells and editing properties.

To insert a new table, hover over Insert Table and then use the mouse to hover over the correct amount of rows and columns. Clicking will create the table.

For more information, visit the Tables page. 

Not available in Classic Editor  Expand Icon Maximize Content Region This icon, when clicked, will expand the JustEdit editable region to fill the width of the frame window. This is particularly useful when editing table transformations, where the table is extremely wide in the Editor but the transformed content fits more nicely into the editable region on the page.

Table Tools (Classic Only)

Icon Tool Description
Inserts A New Table button Insert/Edit Table

To insert a table, position the cursor, then click the icon. The Insert/Edit Table modal 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 OK to insert table, or click Cancel to return to the editor.
For more information about tables, visit the Insert/Edit page.

Table Row Properties button Table Row Properties

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

Table Cell Properties button Table Cell Properties

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

Delete Row button Delete Row

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

Remove Column button Delete Column  

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

Split Merged Table Tells button Split Merged Table Cells  

To split cells that have previously been merged, select the cell, then click the icon.

Merge Table Cells button Merge Table Cells

To merge cells, highlight the cells to be merged, then click the icon.

 Form Tools (Classic Only)

The Form tools build the client interface for the form. The site developer will need to provide the server side form processing code. The form tools available from within the Classic Editor are not the same as the Live Delivery Platform Forms.

Icon Tool Description
Inserts/Modify A Form button Insert/Edit Form

Creates or edits 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 the icon.

Insert/Modify Input Element button Insert/Edit Input Element

Inserts or modifies input fields such as checkboxes, icons, or events.

Insert/Modify Section Element button Insert/Edit Select Element

Inserts or modifies selection drop down elements.

Insert/Modify Textarea Element button Insert/Edit Textarea Element

Inserts or modifies textarea elements.

For more information, visit the Forms page.