Skip to Content

Toolbar Options

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
    A blue floppy disk icon A black floppy disc icon 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.
    A double blue floppy disk icon. Not available Save As Saves a copy of the current file with your changes and exits the WYSIWYG editor.
    A blue floppy disk rotating with a page icon Not available Revert to Last Saved Undoes all changes and reverts the content in the editable region to its last saved state.
    Not available A black encircled X icon Exit Without Saving Exits the editable region without saving your changes.
    A red and white life preserver icon A black and white life preserver icon 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
    A blue scissors icon A black and grey scissors icon Cut Removes highlighted content from one location in order to paste it somewhere else.
    A double pages icon A double pages icon Copy Copies highlighted content in order to paste it somewhere else.
    A clipboard icon A clipboard icon 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.

    A clipboard with a "T" icon A clipboard with a "T" icon 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.
    A blue binoculars icon Included under Find/Replace Find Searches for text in the editable region.
    An "A" and "B" switching places icon A black binoculars icon Find/Replace Searches for text in the editable region and replaces it with other text.
  • Undo, Redo
    Classic Icon JustEdit Icon Tool Description
    A blue back arrow A black going back arrow Undo Undoes the last changes made in the current session one by one.
    A blue forward arrow icon A black forward arrow icon Redo Redoes changes that were previously undone, one by one.
  • Spell Check
    Classic Icon JustEdit Icon Tool Description
    A blue check with "ABC" icon A black check with "ABC" icon 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
    A white eraser icon A black "T" with an "x" icon Remove Formatting Removes all formatting and styling for highlighted text, returning it to default.
  • Font Formatting
    Classic Icon JustEdit Icon Tool Description
    A "B" icon A "B" icon Bold Bolds selected text.
    An "I" icon An "I" icon Italic Italicizes selected text.
    A "U" icon A "U" icon Underline Underlines selected text.
    A crossed-out "ABC" icon A crossed-out "S" icon Strikethrough Crosses out selected text.
  • Lists, Indents
    Classic Icon JustEdit Icon Tool Description
    A bulleted list icon A bulleted list icon Unordered List

    Turns selected text into a bulleted list, e.g.

    • Strawberries
    • Raspberries
    • Cherries
    A numbered list icon A numbered list icon Ordered List

    Turns selected text into a numbered list, e.g.

    1. Strawberries
    2. Raspberries
    3. Cherries
    A moving lines backward icon A lines moving backward icon Decrease Indent

    Moves the indent of a paragraph to the left.

    A lines moving forward icon A lines moving forward icon Increase Indent

    Moves the indent of a paragraph to the right.

    A blue quotation mark icon A black quotation mark icon Blockquote

    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
    an X-squared icon An X-squared icon Superscript

    Formats selected text as superscript.

    An X with a footnote 2 icon An X with a footnote icon Subscript

    Formats selected text as subscript.

  • Align, Justify (Horizontal)
    Classic Icon JustEdit Icon Tool Description
    A lines justified left icon A lines justified left icon Align Left

    Aligns a paragraph to the left margin.

    A lines in the middle icon A lines in the middle icon Align Center

    Centers a paragraph between the left and right margins.

    A lines justified right icon A lines justified right icon Align Right

    Aligns a paragraph to the right margin.

    An even lines icon An even lines icon Align Full

    Justifies text, making it flush to both left and right margins.

  • Link Tools
    Classic Icon JustEdit Icon Tool Description
    A silver chain link icon A black chain link icon Insert/Edit Link

    Creates a hyperlink from highlighted text.

    An envelope and paper icon An envelope icon Mailto Link

    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.

    A silver breaking chain link icon A black breaking chain link icon Remove Link

    Removes a selected hyperlink.

    An orange anchor icon A black anchor icon Insert/Edit Anchor

    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
    A blue circled question mark icon A black circled question mark icon 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
    A dropdown that says "Font family" A dropdown that says "Font family" 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.

     

    A dropdown that says "Font size" A dropdown that says "Font size" Font Size Changes the size of selected text. Custom font-size sets can be set by an administrator.
    A dropdown that says "Format" A dropdown that says "Paragraph" 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.
    A dropdown that says "Styles" A dropdown that says "Styles" 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
    An "A" with gray underneath icon An "A" with gray underneath icon Select Text Color Applies the selected color to text.
    An "ab" highlighted icon A highlighted "A" icon Select Background Color Applies the selected color to the background of text.
  • Images/Media
    Classic Icon JustEdit Icon Tool Description
    A landscape icon A landscape silhouette icon Insert/Edit Image Adds an image into the editable region.
    A film strip icon A video screen icon Insert/Edit Video Embeds a video or other type of playable media into the editable region.
  • HTML Elements
    Classic Icon JustEdit Icon Tool Description
    A horizontal line icon A horizontal line icon Insert Horizontal Line Adds a horizontal rule (<hr />). How this displays depends on your site styling.
    A "BR" icon An arrow pointing down and back icon Insert Line Break Inserts a line break (<br />).
    A copyright symbol icon A copyright symbol character 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.
    A paintbrush icon Not available Cleanup Messy Code Removes extraneous tags and adds appropriate ending tags where necessary.
    A magnifying glass and page icon A box with dotted outlines icon Show/Hide Block Elements Toggles the WYSIWYG view to show or hide block-level element labeling, such as <p> tags.
    A grid icon 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.
    An HTML icon A < > icon 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.

    A green puzzle piece and yellow pencil icon Not available CodeProtect

    Displays the position of server-side code within the editable region using the following symbol: A red square with <? inside

    Click on the symbol to open the protected region and enter server-side code (PHP). It must use the <?php ?> or <? ?> notation.

  • Additional Content
    Classic Icon JustEdit Icon Tool Description
    A blue blocks icon A black puzzle piece icon Snippets Inserts a snippet into the editable region.
    A plug and chain icon A cycling arrows icon Assets Inserts an asset into the editable region.
    Not available A black atom icon Components Inserts a component into the editable region.
    Found on Toolbar Row 3 A grid icon 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 An expanding arrows icon 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
    A grid with a pencil icon Insert/Edit Table Inserts a table into the editable region where the cursor is.
    A grid icon with blue rows Table Row Properties Edits the alignment, background color, and several other properties of table rows.
    A grid icon with a blue cell Table Cell Properties Edits the alignment, background color, and several other properties of table cells.
    An adding a row icon Insert Row Before Inserts a row above the selected row.
    An adding a row after others icon Insert Row After Inserts a row after the selected row.
    An icon where a row is colored red Delete Row Deletes the selected row.
    An icon of adding a vertical bar before two others Insert Column Before Inserts a column before the selected column.
    An icon of adding a vertical bar after two others Insert Column After Inserts a column after the selected column.
    An icon of removing a red vertical bar from two others Delete Column Deletes the selected column.
    A grid with blue cells Split Merged Table Cells Splits selected cells that have previously been merged.
    A grid with one big blue cell 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
    A form with a pencil icon Insert/Edit Form Creates or edits the form. When creating a new form, set all attributes needed for the form to function properly.
    A form with a red X icon Delete Form Deletes the selected form.
    An icon with many boxes and circles Insert/Edit Input Element Inserts or modifies input fields.
    An icon with several boxes Insert/Edit Select Element Inserts or modifies selection dropdown elements.
    A white square icon Insert/Edit Textarea Element Inserts or modifies textarea elements.
Related Content