WYSIWYG Editor

Overview

Note: The information on this page pertains to the standard WYSIWYG Editor. For information about the new JustEdit Editor and the JustEdit toolbar, visit the JustEdit page.

There are several types of editors available to edit pages in distinctly different ways, but the WYSIWYG editor is the most common way for users to edit pages in OU Campus. The WYSIWYG (What You See Is What You Get) Editor allows for a familiar experience of editing a page similar to that of many web applications and traditional word processors. The WYSIWYG editor allows users to generate HTML content for specific regions on the page, without needing to program in HTML directly. Note: The WYSIWYG editor only accepts HTML tags and will strip out server-side or client-side code. If users need to add server-side or client-side code, they should do so by creating a source code asset or inserting it directly in the source code for a page.

When logging into the system to directly edit a page, there may be several editable regions available. The available editable regions are defined by permissions levels and group associations. Only areas that are available to be edited by that user are shown with an edit button. Clicking on the Edit button above a region allow for the area to be edited. This opens the WYSIWYG Editor by default and the assigned toolbar is available.

Keep in mind that part of the configuration of the template design may include an image in the background that helps present a more accurate rendering of how the content will appear on the page. It is intended for visualization purposes and to help understand how the content is organized on the page into editable regions. Once the content has been saved, an actual view of the configured page can be seen using the Preview mode.

When editing in the WYSIWYG, modifications should be saved by clicking the Save icon before navigating away from the page. If an attempt is made to navigate away from the page without first saving it, the user is shown a reminder to save the page.

Toolbars and Tools

Many of the editing tasks for a page such as inserting images and links, applying formatting such as bold or italics, and spellchecking a page, can be accomplished from within the WYSIWYG using the toolbar. WYSIWYG toolbars are customizable and the toolbar the user sees may contain a subset of the available tools, as various custom toolbars can be created and assigned to a user or to an editable region. The Toolbar and Tools section provides information about the organization of the toolbar and the tools that can be contained within it.

Additionally, editing behaviors within the WYSIWYG can be influenced by the operating system in use on the local computer and the browser. These behaviors as well as other WYSIWYG behaviors are detailed on this page with these topics:

Example of WYSIWYG Editor

WYSIWYG and Toolbar

Save-In-Place

One item that is not represented on the toolbar, but is available from within the WYSIWYG, is the ability to save while editing a page with the keyboard shortcut CTRL+S (PC) or CMD+S (Mac). This offers users the ability to save the page without clicking the usual save icon that exits the editor. Save-in-place will save any changes made in the editor to the staging server while allowing the user to continue working in the WYSIWYG Editor.

When the user initiates the Save-in-Place feature, there may be a very brief spinning indicator in the WYSIWYG editor. Once the spinning indicator disappears, the bottom of the page will display a message indicating that the page has been saved. The user may then resume editing the contents of the page.

WYSIWYG Editing Behavior

Several of the tools that apply styling to content within the WYSWYG can be toggled on and off. For example, if the Format drop-down was used to apply Heading 1, the use of Heading 1 can be deactivated by deselecting it in the drop-down. Note that when applying a class from a Styles drop-down and then selecting another class from the Styles drop-down, both styles are applied to the text. Formatting applied with the use of the Styles drop-down can also be cleared with the use of the Remove Formatting tool, which is represented by the eraser icon on the toolbar.

Editing behavior while within the WYSIWYG can vary from browser to browser. For example, Firefox, Chrome, and Safari have settings that 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. The keyboard shortcuts (CTRL+X, CTRL+C, CTRL+V for Windows, CMD-X, CMD-C, CMD-V for Macintosh) do work as expected. 

Keyboard Shortcuts

Many common keyboard shortcuts function in the WYSIWYG Editor. They are as follows:

  • Ctrl (PC)/Cmd (Mac) + S: Save-in-place - saves changes to the staging server, but users will 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: Opens the WYSIWYG Find and Replace tool.
  • Ctrl/Cmd + [1-6]: Set headings -  formats currently-selected block as Heading 1-6, respectively
  • Ctrl/Cmd + 7: Formats currently-selected block as a <p> (paragraph)
  • Ctrl/Cmd + 8: Formats currently-selected block as a <div>
  • Ctrl/Cmd + 9: Formats currently-selected block as an <address>
  • Shift + Enter: Creates a new line break in the current block (as opposed to creating a new paragraph, which makes a new block of text)
  • Shift + Arrow Keys: Highlights text character-by-character (if using up/down arrows, highlights by line)
  • Shift + Ctrl/Cmd + Arrow Keys: Highlights text word-by-word (up/down arrows still highlight by line)

Note: These keyboard shortcuts function even if the related toolbar icon or drop-down menu has been disabled for the user, the page, or the editable region.

Shortcut Menus

Right-clicking on the WYSIWYG area while editing displays a shortcut menu with the following options:

  • Cut (CTRL+X): If content is selected
  • Copy (CTRL+C): If content is selected
  • Paste (CTRL+V): If content is on the clipboard
  • Insert/Edit Image
  • Alignment: Left, Center, Right, Full
  • Insert Form
  • Insert/Edit Table

When text is selected, additional items include:

  • Insert/Edit Link
  • Unlink

Table

Right-clicking within a table provides a list of available table editing and formatting functions, as follows:

  • Insert/Edit Table
  • Table Properties
  • Delete Table
  • Cell
    • Table Cell Properties
    • Split Merged Table Cells
    • Merge Table Cells
  • Row
    • Table Row Properties
    • Insert Row Before
    • Insert Row After
    • Delete Row
    • Cut Table Row
    • Copy Table Row
    • Paste Table Row Before
    • Paste Table Row After
  • Column
    • Insert Column Before
    • Insert Column After
    • Delete Column

Spell Check

When spell check is used within the WYSIWYG, clicking on a word that is flagged as misspelled with red squiggly underlining displays a shortcut menu that includes the following items:

  • Suggestions for correctly spelling the word
  • Add to dictionary (if enabled for the user)
  • Ignore Word
  • Ignore All

When the spell checker is toggled on, a shortcut menu for right-clicking is shown specific to the spell checker, which includes the following functionality:

  • Cut, Copy, Paste
  • Spelling and Grammar
  • Font
  • Paragraph Direction

Not Inserting Paragraph Tags 

The normal behavior in the WYSIWYG Editor is that a user enters some text and presses Enter. This wraps the appropriate HTML tags around the content, i.e. the <p> tags. However, typing content and saving without pressing enter allows for the text to be added without the encapsulating tags.

The Show/Hide Block Elements tool can be used to change the view to include dotted lines and other formatting marks indicating what block-level element the text is within.

Paragraph Tags and Inserting Assets

Under normal editing circumstances, a user will almost always be within a <p> tag or other block-level element, such as a heading like an <h1> tag. The tested best practice to insert an asset into the WYSIWYG, and to not have it surrounded by <p> tags, is to perform the actions outlined in either Scenario One or Scenario Two.

Scenario One

Start with some existing content and the cursor located at the end of the last text in the WYSIWYG, right after a period. For example, the period in this line: <p>text content.</p>

  1. Press Enter/Return twice in the WYSIWYG then use the Up Arrow key once. The cursor is now inside the first <p> tag set. For example:
    <p>text content.</p>
    <p></p>
    <p></p>
  2. Select Paragraph from the Format menu. This removes the <p> tag set from surrounding the cursor as follows:
    <p>text content.</p>

    <p></p>
  3. Select Insert/Edit Asset, choose the asset, and click Select Asset. This creates an asset in the WYSIWYG without a surrounding <p> tag set as follows:
    <p>text content.</p>
    {{a:xxxx}}
    <p>&nbsp;</p>

Scenario Two

Start with some existing content and the cursor located at the end of the last text in the WYSIWYG, right after a period. For example, the period in the next line: <p>text content.</p>

  1. Press Enter once in the WYSIWYG, then press the Space Bar. The cursor is now inside the first <p>&nbsp;</p> tag set as follows:
    <p>text content.</p>
    <p>&nbsp;</p>
  2. Select Insert/Edit Asset, choose the asset, and click Select Asset. This creates an asset in the WYSIWYG inside a surrounding <p> tag set as follows:
    <p>text content.</p>
    <p>&nbsp;{{a:xxxx}}</p>
  3. Place the cursor in front (to the left) of the asset at the beginning of the line, and then select Paragraph from the Format menu. This removes the <p> tag set from surrounding the asset as follows:
    <p>text content.</p>
    &nbsp;{{a:xxxx}}

Now the space (&nbsp;) can be deleted if so desired.

Note: The cursor must be to the left of the asset; if the cursor is on the right edge of the asset, it will not be able to select from the Format menu. Pressing Return/Enter after the asset adds a <br /> tag and not a <p> tag set.

Path Status Bar

When editing in the WYSIWYG, the status bar below the main content area shows the path for the element where the cursor is currently positioned.

Path Status Bar in WYGIWYG Editor

For example, when the cursor is within a paragraph, the following is shown:

Path: p

If the cursor was placed in some bolded text in a paragraph, the following is shown:

Path:p » strong

Clicking the relevant element name in the status bar (e.g. the "strong" above) will select the content that is wrapped in that particular element. Classes and IDs that are applied to an HTML element are shown in the Path Status Bar as well.

HTML5 Schema

The available settings for the WYSIWYG Editor include setting a default toolbar, URL and image settings, and the ability to toggle to HTML5 Schema. Enabling HTML5 Schema rather than using the XHTML default changes the behavior of the WYSIWYG and the validation of pages. The WYSIWYG Editor creates the underlying markup based on the chosen schema. Use caution when changing to HTML5 Schema. If other components of a site are not updated, such as the XSLs, this can lead to the WYSIWYG removing invalid elements or a page not passing validation at the time of page check or final check.

The use of the name attribute, which prior to HTML5 was used, for example, to help define an anchor, is invalid in HTML5 and is removed by the WYSIWYG. The ID attribute is now used. To further this example, when HTML5 Schema is not enabled and an anchor is inserted on a page via the WYSIWYG, the following markup is added:

<a name="example"> </a>

When HTML5 Schema is enabled, the markup is:

<a id="example"> </a>

Note that the WYSIWYG Editor does not update or correct invalid HTML. If invalid markup such as the name attribute is added via the WYSIWYG HTML Source Viewer or the Source Editor, it is automatically removed when the page is opened in the WYSIWYG. The selection of the HTML5 Schema is one of several WYSIWYG customizations available in the settings specific to a site.

For more information, visit the WYSIWYG Editor page.

WYSIWYG Customization

In-Context Editing

Part of the configuration of the template design may include a dimmed image in the WSYIWYG editing area. This is meant to be representational of how the published page is displayed. For example, there may be a navigational element included but not editable in this view, as it is meant for visualization purposes. Once the content has been saved, an actual view of the configured page can be seen while previewing the page. In the example below, while the main content area that includes text is being edited, visualization of the global and local navigation elements are provided but not editable in this view.

For more information about creating this affect, visit the In-Context Editing page.

WYSIWYG In-Context Editing

Creating Custom Toolbars

The WYSIWYG and the WYSIWYG toolbar is customizable by administrators of the account and may offer different functionality to different users on different pages specific to editing different content types. 

For information regarding customizing the toolbar, visit the Toolbars and Access and Workflow pages.

Mini-WYSIWYG

A version of the WYSIWYG Editor is also available when editing Web Content Assets. The functionality of the tools on a mini-WYSIWYG is similar to that of when using the main WYSIWYG Editor.