The WYSIWYG editor toolbar is very similar to other content editing toolbars, with the addition of some web development and OU Campus-specific options. The Classic editor and JustEdit are almost identical in terms of options; any differences are noted below.
Custom toolbars can be assigned to both users and pages, and some types of files use simpler toolbars, so bear in mind you may not have every toolbar option available to you on a given file.
Toolbar Row 1Link to this section
Most of the tools available on the first row are for basic text formatting and linking.
- File Tools (Save, Save As, Revert, Restore)
Classic Icon JustEdit Icon Tool Description Save Saves the current file to the staging server and exits the WYSIWYG editor. Remember, changes don't appear on the production server until page publish. Use Ctrl+S/Cmd+S to save in place. Not available Save As Saves a copy of the current file with your changes and exits the WYSIWYG editor. Not available Revert to Last Saved Undoes all changes and reverts the content in the editable region to its last saved state. Not available Exit Without Saving Exits the editable region without saving your changes. Auto Draft
Restores content to its last auto-saved point. Pages are saved approximately every minute while a user is editing, and can be recovered up to 20 minutes later. Auto-saved drafts can only be recovered from the same computer and browser that was being used when the content was lost.
This icon is only shown in browsers that support this feature.
- Cut, Copy, Paste, Find, Replace
Many browsers disable the use of these buttons; use keyboard shortcuts instead if necessary.
Classic Icon JustEdit Icon Tool Description Cut Removes highlighted content from one location in order to paste it somewhere else. Copy Copies highlighted content in order to paste it somewhere else. Paste
Pastes copied or cut content to where the cursor is.
Only valid content, code, and styling can be pasted; any formatting not appropriate for a web site or compliant with the WSYIWYG editor is removed.
Paste as Plain Text Clicking the icon keeps it selected until clicked again. While selected, all pasted content is pasted as plain text only, with no formatting. Included under Find/Replace Find Searches for text in the editable region. Find/Replace Searches for text in the editable region and replaces it with other text.
- Undo, Redo
Classic Icon JustEdit Icon Tool Description Undo Undoes the last changes made in the current session one by one. Redo Redoes changes that were previously undone, one by one.
- Spell Check
Classic Icon JustEdit Icon Tool Description Spell Checker Spell checks the editable region. Misspelled words are underlined in red. Left-click the incorrectly spelled word to change it with the suggested words provided, ignore it, or add it to a custom dictionary.
- Remove Formatting
Classic Icon JustEdit Icon Tool Description Remove Formatting Removes all formatting and styling for highlighted text, returning it to default.
- Font Formatting
Classic Icon JustEdit Icon Tool Description Bold Bolds selected text. Italic Italicizes selected text. Underline Underlines selected text. Strikethrough Crosses out selected text.
- Lists, Indents
Classic Icon JustEdit Icon Tool Description Unordered List
Turns selected text into a bulleted list, e.g.
Turns selected text into a numbered list, e.g.
Moves the indent of a paragraph to the left.
Moves the indent of a paragraph to the right.
Marks selected text as a blockquote, using the HTML element. How blockquotes look depends on your website styling.
- Text Placement (Vertical)
Classic Icon JustEdit Icon Tool Description Superscript
Formats selected text as superscript.
Formats selected text as subscript.
- Align, Justify (Horizontal)
Classic Icon JustEdit Icon Tool Description Align Left
Aligns a paragraph to the left margin.
Centers a paragraph between the left and right margins.
Aligns a paragraph to the right margin.
Justifies text, making it flush to both left and right margins.
- Link Tools
Classic Icon JustEdit Icon Tool Description Insert/Edit Link
Creates a hyperlink from highlighted text.
Creates a mailto link (i.e., a link that prompts an email client to make a new email) from highlighted text.
A recipient email address is required. A subject for the email is optional. The "Class" dropdown can be used to add additional styling.
Removes a selected hyperlink.
Creates an anchor where the cursor is, or over selected text or an image. You don't need to enter a # before writing the anchor name.
To modify an existing anchor, click the anchor icon in the text, and then click the "Insert/Edit Anchor" icon on the toolbar.
To delete an anchor, click the anchor icon in the text, and then press Backspace or Delete. Alternatively, place the cursor in the text after the anchor, and backspace over it.
- WYSIWYG Help Documentation
Classic Icon JustEdit Icon Tool Description Help Icon
Explains how all the icons on the toolbar work.
Toolbar Row 2Link to this section
The tools available on the second row cover more complex options such as styling, media, and reusable content.
- Font Properties
Classic Icon JustEdit Icon Tool Description Font Family Changes text to a font that you choose from the dropdown list. The available fonts are the standard fonts recognized by most web browsers. Font Size Changes the size of selected text. Custom font-size sets can be set by an administrator. Format or Paragraph Applies block-level styling to the entire paragraph. The options available and their appearance vary depending on your site design. Commonly used for header styling. Styles Applies a style to selected text. The options available and their appearance vary depending on your site design. New custom styles can be added.
- Text Color and Background
Classic Icon JustEdit Icon Tool Description Select Text Color Applies the selected color to text. Select Background Color Applies the selected color to the background of text.
- HTML Elements
Classic Icon JustEdit Icon Tool Description Insert Horizontal Line Adds a horizontal rule (
<hr />). How this displays depends on your site styling.
Insert Line Break Inserts a line break (
Insert Special Character Inserts a special character such as a copyright symbol or Greek alphabet letter. Left-click a character to insert it, or right-click it to copy it to the clipboard. Not available Cleanup Messy Code Removes extraneous tags and adds appropriate ending tags where necessary. Show/Hide Block Elements Toggles the WYSIWYG view to show or hide block-level element labeling, such as
Not available Show/Hide Guidelines/Invisible Elements Adds or removes the outlines of tables and other elements, for editing purposes only. It doesn't effect how the published page looks. Edit HTML/Source Code
Opens the source code of the editable region only (not the entire page). If you can't access the source code for the page, you can still use this option. Keep in mind that any content not valid HTML is stripped out by the editor, and special characters are encoded.
If you want to embed a widget in the page, use this button to open the source code and paste the embed code in.
Not available CodeProtect
Displays the position of server-side code within the editable region using the following symbol:
Click on the symbol to open the protected region and enter server-side code (PHP). It must use the
- Additional Content
Classic Icon JustEdit Icon Tool Description Snippets Inserts a snippet into the editable region. Assets Inserts an asset into the editable region. Not available Components Inserts a component into the editable region. Found on Toolbar Row 3 Table
Brings up a menu with all table options, including inserting tables, adding and deleting rows and columns, and cell properties.
To insert a new table, hover over "Insert Table" and choose the number of rows and columns you want. Clicking creates the table.
Not available Maximize Content Region
Expands the editable region to fill the entire frame window.
Toolbar Row 3Link to this section
The third row is only available with the Classic editor. It contains two functions, tables and forms. In JustEdit, tables are available in the second row, and the forms were removed in favor of LDP Forms.
Once a table or form has been added, click on it for the additional editing options to become available.
- Table Tools
Classic Icon Tool Description Insert/Edit Table Inserts a table into the editable region where the cursor is. Table Row Properties Edits the alignment, background color, and several other properties of table rows. Table Cell Properties Edits the alignment, background color, and several other properties of table cells. Insert Row Before Inserts a row above the selected row. Insert Row After Inserts a row after the selected row. Delete Row Deletes the selected row. Insert Column Before Inserts a column before the selected column. Insert Column After Inserts a column after the selected column. Delete Column Deletes the selected column. Split Merged Table Cells Splits selected cells that have previously been merged. Merge Table Cells Merges selected cells.
- Form Tools
These forms are not the same as LDP Form Assets.
Form tools build the client interface for a form, but the site developer needs to provide the server-side form processing code.
Classic Icon Tool Description 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 Deletes the selected form. Insert/Edit Input Element Inserts or modifies input fields. Insert/Edit Select Element Inserts or modifies selection dropdown elements. Insert/Edit Textarea Element Inserts or modifies textarea elements.