WYSIWYG Editor

RELATED CONTENT

Overview

The WYSIWYG Editor panel in Site Settings allows behaviors to be set for the WYSIWYG Editor on a site-by-site basis. In addition to the settings found here, custom toolbars can be created and assigned to editable regions, users, directories, and sites. A custom toolbar can be created with limited editing functionality in order to restrict editing of specific areas. Toolbar assignments can also be defined in a template. 

WYSIWYG Editor Settings for a Site

Use HTML5 Schema

By default, HTML5 Schema is not selected. Select the checkbox to enable the HTML5 schema for the WYSIWYG Editor for a site. When selected, the WYSIWYG Editor expects to utilize HTML5-type HTML, which includes the addition of HTML5 elements and the removal of invalid elements. An XHTML schema is utilized when this checkbox is not selected. This also affects page validation during Page Check and Final Check. When selected, page validation is for HTML5. If non-HTML5 elements are included in the XSL, this does not change WYSIWYG editing, but can be possibly listed as an error or warning during validation with Page Check or Final Check.

With the XHTML schema, the WYSIWYG Editor does not remove HTML5 elements, such as section and article, but adding these elements to the page would require utilizing source code or using a snippet. The XHTML schema also allows for attributes that have been identified as invalid in HTML5 but not in XHTML. When the HTML5 schema is enabled, invalid attributes are removed. Additionally, the HTML5 block-level elements, such as section and article, are available in the Format drop-down, making them easy to add to the content without having to use a snippet or access the source code. The Show/Hide Block Elements was added to the WYSIWYG Editor in both XHTML and HTML5 states that provides a visual indicator of the occurrence of block level elements, allowing editors to see where they are within the content.

Because pages that are edited using the WYSIWYG Editor must conform to the HTML5 schema once it is enabled, invalid attributes are removed and it is possible that the entire tag may be removed. For instance, the name attribute in an anchor tag is invalid in HTML5. As such, anchor tags that contain only a name attribute without any other attributes are removed. This may, essentially remove any anchors within a given page. These particular tags can be fixed by changing the name attribute to an id attribute.

It is strongly advised to review page content prior to enabling HTML5 schema. A complete backup of the site should be created. The W3C validation tool can be used to help check the page′s HTML5 validation. This requires that the templates, specifically the declaration in the XSL, be set to HTML5. Global Find and Replace can be used to search for any invalid attributes, but that may not be the best option for fixing or replacing any potential issues.

For more information on invalid and obsolete attributes in HTML5, visit W3's documentation page. For more information on these topics in the OU Campus Support site, visit the HTML5 and Format Drop-Down pages.

Note: When enabling HTML5 Schema for a site, IE 8 will not create a line of text by pressing return after an HTML5 tag (e.g., article, section) has been created.

URL Type

URL Type defines format of link and image URLs:

    • Absolute: Renders a complete URL (e.g., http://www.college.edu/folder/file.html).
    • Root Relative: Renders the URL from after the "/" of the configured root.
    • Page Relative: Renders the URL from after the "/" relating to the page that the user is on and on which the user is entering the link or uploading the image.

Note: If Dependency Manager is being used, links referencing other pages and directories within the account are rendered as root relative or absolute based in the settings defined, but they cannot be rendered as page relative.

Decorative Images

This allows users to insert an image without having to include a description, such as if the image is a decorative image (e.g., a horizontal rule that is an image instead of the standard code). Users are able to select Decorative Image when inserting a new image in order to bypass the description requirement. Keep in mind that enabling this option may affect the site’s Section 508 compliance. The options are:

  • Disabled: Recommended as this forces users to add a description when adding images.
  • Admin Only: Allows administrators the option of adding a description for an image, but does not require it.
  • All Users: Provides all user the option of adding a description for an image, but does not require it.

Disable Image Resizing

When using Insert/Edit Images to add images there is a setting that allows for resizing the image. This is found on the General tab > Dimensions. Selecting this checkbox in the site settings disables the ability for users to input custom size dimensions for images. This also disables the ability to drag a grab-handle and resize the image with a drag.

Note: Image resizing is still available with the Image Editor and width and height can be modified in code view. When enabled the feature is made unavailable. This is not supported by Internet Explorer.

Disable Image Resizing

Disable Image Alignment Menu

Disallows the ability to align images (left, center, right, justify). The feature is found in the Appearance tab > Alignment. When enabled in the site settings the feature is unavailable.

Disallows Image Alignment

Toolbar

Determines the default toolbar for the WYSIWYG Editor, if none other is defined. Toolbar is an access setting, and rules of precendence and inheritance apply. As an access setting, a toolbar can be assigned to a user, and at the site, directory, page, and editable region levels. By default, the "Default" toolbar is used for new sites, which is an all-inclusive toolbar. If it is necessary to assign a different toolbar  for the site-root directory only, use a non-recursive action for the Toolbar setting from Setup > Sites > Edit > Site Access.