By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
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 IconJustEdit IconToolDescription
    A blue floppy disk iconA black floppy disc iconSaveSaves 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 availableSave AsSaves a copy of the current file with your changes and exits the WYSIWYG editor.
    A blue floppy disk rotating with a page iconNot availableRevert to Last SavedUndoes all changes and reverts the content in the editable region to its last saved state.
    Not availableA black encircled X iconExit Without SavingExits the editable region without saving your changes.
    A red and white life preserver iconA black and white life preserver iconAuto 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 IconJustEdit IconToolDescription
    A blue scissors iconA black and grey scissors iconCutRemoves highlighted content from one location in order to paste it somewhere else.
    A double pages iconA double pages iconCopyCopies highlighted content in order to paste it somewhere else.
    A clipboard iconA clipboard iconPaste

    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 WYSIWYG editor is removed.

    A clipboard with a "T" iconA clipboard with a "T" iconPaste as Plain TextClicking 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 iconIncluded under Find/ReplaceFindSearches for text in the editable region.
    An "A" and "B" switching places iconA black binoculars iconFind/ReplaceSearches for text in the editable region and replaces it with other text.
  • Undo, Redo
    Classic IconJustEdit IconToolDescription
    A blue back arrowA black going back arrowUndoUndoes the last changes made in the current session one by one.
    A blue forward arrow iconA black forward arrow iconRedoRedoes changes that were previously undone, one by one.
  • Spell Check
    Classic IconJustEdit IconToolDescription
    A blue check with "ABC" iconA black check with "ABC" iconSpell CheckerSpell 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 IconJustEdit IconToolDescription
    A white eraser iconA black "T" with an "x" iconRemove FormattingRemoves all formatting and styling for highlighted text, returning it to default.
  • Font Formatting
    Classic IconJustEdit IconToolDescription
    A "B" iconA "B" iconBoldBolds selected text.
    An "I" iconAn "I" iconItalicItalicizes selected text.
    A "U" iconA "U" iconUnderlineUnderlines selected text.
    A crossed-out "ABC" iconA crossed-out "S" iconStrikethroughCrosses out selected text.
  • Lists, Indents
    Classic IconJustEdit IconToolDescription
    A bulleted list iconA bulleted list iconUnordered List

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

    • Strawberries
    • Raspberries
    • Cherries

    Click the arrow to expand the dropdown menu to choose different options for the appearance of the bullets, i.e. circle, square, etc.

    A numbered list iconA numbered list iconOrdered List

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

    1. Strawberries
    2. Raspberries
    3. Cherries

    Click the arrow to expand the dropdown menu to choose different options for numbering the list, i.e. Roman numerals, lowercase alphabet, etc.

    A moving lines backward iconA lines moving backward iconDecrease Indent

    Moves the indent of a paragraph to the left.

    A lines moving forward iconA lines moving forward iconIncrease Indent

    Moves the indent of a paragraph to the right.

    A blue quotation mark iconA black quotation mark iconBlockquote

    Marks selected text as a blockquote, using the HTML element. How blockquotes look depends on your website styling.

  • Text Placement (Vertical)
    Classic IconJustEdit IconToolDescription
    an X-squared iconAn X-squared iconSuperscript

    Formats selected text as superscript.

    An X with a footnote 2 iconAn X with a footnote iconSubscript

    Formats selected text as subscript.

  • Align, Justify (Horizontal)
    Classic IconJustEdit IconToolDescription
    A lines justified left iconA lines justified left iconAlign Left

    Aligns a paragraph to the left margin.

    A lines in the middle iconA lines in the middle iconAlign Center

    Centers a paragraph between the left and right margins.

    A lines justified right iconA lines justified right iconAlign Right

    Aligns a paragraph to the right margin.

    An even lines iconAn even lines iconAlign Full

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

  • Link Tools
    Classic IconJustEdit IconToolDescription
    An envelope and paper iconAn envelope iconMailto 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.

    An orange anchor iconA black anchor iconInsert/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 IconJustEdit IconToolDescription
    A blue circled question mark iconA black circled question mark iconHelp 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 IconJustEdit IconToolDescription
    A dropdown that says "Font family"A dropdown that says "Font family"Font FamilyChanges 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 SizeChanges 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. An option's appearance varies depending on your site design. Commonly used for header styling.
    A dropdown that says "Styles"A dropdown that says "Styles"StylesApplies 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 IconJustEdit IconToolDescription
    An "A" with gray underneath iconAn "A" with gray underneath iconSelect Text ColorApplies the selected color to text.
    An "ab" highlighted iconA highlighted "A" iconSelect Background ColorApplies the selected color to the background of text.
  • Images/Media
    Classic IconJustEdit IconToolDescription
    A landscape iconA landscape silhouette iconInsert/Edit Image Adds an image into the editable region.
    A film strip iconA video screen iconInsert/Edit VideoEmbeds a video or other type of playable media into the editable region.
  • HTML Elements
    Classic IconJustEdit IconToolDescription
    A horizontal line iconA horizontal line iconInsert Horizontal LineAdds a horizontal rule (<hr />). How this displays depends on your site styling.
    A "BR" iconAn arrow pointing down and back iconInsert Line BreakInserts a line break (<br />).
    A copyright symbol iconA copyright symbol characterInsert Special CharacterInserts 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 iconNot availableCleanup Messy CodeRemoves extraneous tags and adds appropriate ending tags where necessary.
    A magnifying glass and page iconA box with dotted outlines iconShow/Hide Block ElementsToggles the WYSIWYG view to show or hide block-level element labeling, such as <p> tags.
    A grid iconNot availableShow/Hide Guidelines/Invisible ElementsAdds or removes the outlines of tables and other elements, for editing purposes only. It doesn't effect how the published page looks.
    An HTML iconA < > iconEdit 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 iconNot availableCodeProtect

    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 IconJustEdit IconToolDescription
    A blue blocks iconA black puzzle piece iconSnippetsInserts a snippet into the editable region.
    A plug and chain iconA cycling arrows iconAssetsInserts an asset into the editable region.
    Not availableA black atom iconComponentsInserts a component into the editable region.
    Found on Toolbar Row 3A grid iconTable

    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 availableAn expanding arrows iconMaximize 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 IconToolDescription
    A grid with a pencil iconInsert/Edit TableInserts a table into the editable region where the cursor is.
    A grid icon with blue rowsTable Row PropertiesEdits the alignment, background color, and several other properties of table rows.
    A grid icon with a blue cellTable Cell PropertiesEdits the alignment, background color, and several other properties of table cells.
    An adding a row iconInsert Row BeforeInserts a row above the selected row.
    An adding a row after others iconInsert Row AfterInserts a row after the selected row.
    An icon where a row is colored redDelete RowDeletes the selected row.
    An icon of adding a vertical bar before two othersInsert Column BeforeInserts a column before the selected column.
    An icon of adding a vertical bar after two othersInsert Column AfterInserts a column after the selected column.
    An icon of removing a red vertical bar from two othersDelete ColumnDeletes the selected column.
    A grid with blue cellsSplit Merged Table CellsSplits selected cells that have previously been merged.
    A grid with one big blue cellMerge Table CellsMerges 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 IconToolDescription
    A form with a pencil iconInsert/Edit FormCreates 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 iconDelete FormDeletes the selected form.
    An icon with many boxes and circlesInsert/Edit Input ElementInserts or modifies input fields.
    An icon with several boxesInsert/Edit Select ElementInserts or modifies selection dropdown elements.
    A white square iconInsert/Edit Textarea ElementInserts or modifies textarea elements.