Using the WYSIWYG HTML Source Editor

What-You-See-Is-What-You-Get, or "WYSIWYG" for short, is the most common way users edit pages in OU Campus™.  The WYSIWYG Editor allows for a familiar experience of editing a page in a word processor.

The WYSIWYG Toolbar

When editing a page in the WYSIWYG Editor, a toolbar appears above the editing area. The WYSIWYG toolbar is customizable by administrators of the account and may offer different functionality to different users on different pages. For more information on how to add or customize the toolbar, see this documentation.

Icons represent every available function to the user. Clicking on any icon performs an action, either directly to the page, or to the selected text and graphics. Some icons display more options in a drop-down menu fashion, or in a pop-up window display.

The availability of a function is based on the selected items, or the location of the cursor on the page. For example, if nothing is selected, functions such as Insert Link will be grayed out, signifying that this function is not available at the moment. For the Insert Link function button to be available, the user must first select some text or a graphic.

In many cases, right-clicking offers contextual functions. For example, right-clicking within a table provides a list of available table editing and formatting functions. Additionally, commonly used control key combinations are available such as Ctrl-X, Ctrl-C, and Ctrl-V for cut, copy, and paste respectively.

Toolbar Functions

The following is a list of all available toolbar functions and a brief explanation of what they provide. Keep in mind that this list may include functions not available to all users or all pages.

Please refer to the following full explanation of Toolbar Functions.

HTML Source Editor

If the HTML function is enabled on your WYSIWYG Toolbar (or the toolbar of the page) you will have the ability to edit the HTML source code of for the selected region of a page. Click on the HTML button and you will be taken to the HTML Source Editor page.

html button

Make the changes as you wish and click on the "Update" button. If you have made changes that you do not want to keep, click on the "Cancel" button and your changes will not be saved. There is also an option for you to "Word Wrap" so that long lines of code are easily legible and there is no need to scroll to the left and right. For information about the full page source editor, see the Source Editor page here.

HTML Source Editor

HTML 5 Support

The WYSIWYG Editor will support the insertion of the following HTML 5 tags:

  • <header>
  • <hgroup>
  • <section>
  • <article>
  • <nav>
  • <aside>
  • <video>
  • <figure>
  • <figcaption>
  • <footer>

The supported attributes are:

  • accesskey
  • class
  • contextmenu
  • dir
  • draggable
  • dropzone
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title

Visit W3C School's website for more information on the HTML 5 tags and attributes.

Was this page helpful?

Additional Comments:

(Include your email address if you would like a reply)

Procede to