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

WYSIWYG Toolbar

The What You See Is What You Get (WYSIWYG) toolbar is similar to other content editing toolbars, with additional OU Campus-specific options.

A screenshot of a toolbar for editing content with many buttons. It is colored flat gray and black.
The WYSIWYG toolbar.

Shift + Click when opening an editable region to maximize the content region and give you access to Save As Save As icon.

OverviewLink to this section

When entering an editable region content editors encounter the WYSIWYG toolbar, with buttons to represent every function available to the user. Clicking a button in the toolbar performs an action, either directly to the page, or to the selected text and media. Some buttons display more options in a dropdown menu or popup box.

The availability of a function is based on the location of the cursor on the page. For example, if no object is selected the "Insert/Edit Link" is dimmed, signifying that this function is not available at the moment. For the "Insert/Edit Link" button to be available, the user must first select text or a graphic.

Right-click for contextual functions. For example, right-clicking within a table provides a list of table editing functions. 

WYSIWYG BehaviorLink to this section

The WYSIWYG editor only accepts HTML tags and strips out server- or client-side code and invalid HTML. If you need to add server- or client-side code, create a source code asset or insert it directly in the source code for a page.

The WYSIWYG editor can be toggled in site settings to an HTML5 schema to validate the page code, but if you are not already using HTML5, proceed with caution. If other components of your site are not updated, such as the XSL, this can lead to the WYSIWYG removing invalid elements or a page not passing validation at the time of page or final check.

Keyboard Shortcuts

Firefox, Chrome, and Safari prevent scripts from invoking the cut, copy, and paste commands so the corresponding buttons on the WYSIWYG toolbar do not function as expected when using browsers with these restrictions. Use keyboard shortcuts instead.

The following keyboard shortcuts function even if the related toolbar button or dropdown menu has been disabled:

  • Ctrl (PC)/Cmd (Mac) + S: Save changes to the staging server and remain inside the editor to continue working.
  • Ctrl/Cmd + X: Cut
  • Ctrl/Cmd + C: Copy
  • Ctrl/Cmd + V: Paste
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Y: Redo
  • Ctrl/Cmd + B: Bold highlighted text
  • Ctrl/Cmd + U: Underline highlighted text
  • Ctrl/Cmd + I: Italicize highlighted text
  • Ctrl/Cmd + F: Open the WYSIWYG Find and Replace tool.
  • Ctrl/Cmd + [1-6]: Format currently-selected text as Heading 1-6, respectively
  • Ctrl/Cmd + 7: Format currently-selected text as a <p> (paragraph)
  • Ctrl/Cmd + 8: Format currently-selected text as a <div>
  • Ctrl/Cmd + 9: Format currently-selected text as an <address>
  • Shift + Enter: Create a new line break in the current text (as opposed to creating a new paragraph, which makes a new block of text).
  • Shift + Arrow Keys: Highlight text character-by-character (up/down arrows highlight by line).
  • Shift + Ctrl/Cmd + Arrow Keys: Highlight text word-by-word (up/down arrows highlight by line).

Path Status

The path status displays at the bottom of the editing window and shows you the HTML elements being applied to the text where the cursor is. Clicking an element name in the status selects the content wrapped by that tag.

A screenshot of text, including a bulleted list with bolded text. An arrow points to text at the bottom of the window that reads "Path: ul - li - strong"