BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
6/3/2013

WYSIWYG Editor

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 in a word processor.

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 appear with a button. Click on the button above the region to edit that region. This opens the WYSIWYG Editor by default.

WYSIWYG Editing Behavior

Editing behavior while within the WYSIWYG can vary from browser to browser. For example, Firefox has settings that prevent scripts from invoking the Cut, Copy, and Paste commands, so the corresponding buttons on the WYSIWYG Toolbar will not work when using Firefox because of these default restrictions. The keyboard shortcuts (Ctrl-x, Ctrl-c, Ctrl-p for Windows, Cmd-x, Cmd-c, Cmd-v for Macintosh) do work as expected. For more information about setting preferences in Firefox:

Turning on Cut/Copy/Paste in the Firefox Browser

Paragraph Tags & Assets

Under normal editing circumstances, a user is likely to never NOT be within a block level element. For example, within a <p></p> tag. The tested best practice to insert an asset into the WYSIWYG, to not have it surrounded by a <p></p> tags is to set it to do one of the two following set of steps.

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: . in the next line: <p>text content.</p>

1. Press Enter/Return twice in the WYSIWYG then use the up-arrow once. The cursor is now inside the first <p></p> tag set. As follows:

<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: . 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 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></p> tag set.

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, among others. 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.

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 using the Preview mode.

Example of WYSIWYG View

Example View of WYSIWYG Editor

The WYSIWYG and the WYSIWYG toolbar is customizable by administrators of the account and may offer different functionality to different users on different pages. The following link 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:

About the Toolbar

For information regarding customizing the toolbar, see the administrator documentation:

Setting up Toolbars

 


Was this page helpful?

Additional Comments:


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

Procede to http://support.omniupdate.com/