Search

Information


Interface Topics

WYSIWYG Editor

Home  >  Self-Help  >  Interface Topics  >  WYSIWYG Editor

What-You-See-Is-What-You-Get, or "WYSIWYG" for short, allows a familiar experience of editing a page in a word processor.

wysiwyg
Figure 1. WYSIWYG Editor

When editing a page in the WYSIWYG editor, a toolbar appears above the editing area. The WYSIWYG toolbar is customizable by administrators of your account and may offer different functionality to different users on different pages.

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 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.

WYSIWYG Toolbar Function Icons

Save, Save As, Revert, Restore

Cut, Copy, Paste, Find, Replace

Undo/Redo

Toggle Spell Checker

Remove Formatting

Font Formatting

List, Indents

Text Placement (Vertical)

Align, Justify (Horizontal)

Link Tools, WYSIWYG Help Documentation

Font Properties

Images/Media

Miscellaneous Functionality

Table Tools

Toolbar Row 1 Overview

WYSIWYG Toolbar Row 1
Figure 2. WYSIWYG Toolbar Row 1

Most of the tools available on the first row of a toolbar for the WYSIWYG are basic text formatting and linking. The descriptions of the functionality available for each tool is provided on this page. A few of the features have a more in-depth description; links are provided to those pages.

File Tools (Save, Save As, Revert, Restore)

Icon Tool Description
 save Save Click on the Save icon to save the current file on the staging server and exit the WYSIWYG Editor. Remember, it will not be live on the production server until it is published. To use save-in-place, use the keyboard shortcut CTRL+S for Windows or CMD+S for Mac.
 save as Save As Click on the Save As icon to save the current file with a new file name and exit the WYSIWYG Editor.
revert  Revert to Last Saved Click on the Revert to Last Saved icon to undo all changes and revert the content in the editable region to its original state.
restore  Auto Draft Click on the Auto Draft icon to restore the content to its last auto-saved point.

Cut, Copy, Paste, Find, Replace

Icon Tool Description
 cut Cut To remove content from the document, highlight the content and click the Cut icon. The keyboard shortcut is CTRL+X for Windows or CMD-X for Mac.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands via the WYSIWYG toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts.
 copy Copy To copy a content from the page, highlight the content and click the Copy icon. The keyboard shortcut is CTRL+C for Windows or CMD-C for Mac.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands via the WYSIWYG toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts.
paste  Paste To paste content on to a page, click the location the content should be placed on the page and click the Paste icon. The keyboard shortcut is CTRL+V for Windows or CMD-V for Mac.

This pastes only valid content, code, and styling. The paste automatically switches between a traditional paste (e.g., pasting the code when text is copied from a page in a web browser), and pasting from Word, removes the MSO formatting that is not appropriate for a web site, as needed. The Paste function always cleans up the content to be pasted to remove any formatting or code that is not compliant with the requirements of the WYSIWYG Editor.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands via the WYSIWYG toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts.
 paste as plain text Paste as Plain Text To paste as plain text, click the Paste as Plain Text icon. The icon stays selected until clicked again, and all pastes going forward until exiting the WYSIWYG Editor will be plain text. This removes all formatting.
 find Find Click the Find icon to search for text on the current page.
 find/replace Find/Replace Click the Find/Replace icon to search for text on the current page then replace that text with other text.

Undo Redo Functions

Icon Tool Description
 undo Undo Click the Undo icon to undo the last changes made in this session one by one.
 redo Redo Click on the Redo icon to redo changes that were previously undone and should be restored.

Spell Check

Icon Tool Description
spell check  Toggle Spell Checker To spell check the region that is being edited, click the Toggle Spell Checker tool. Misspelled words are underlined with a red, squiggly line. Change the incorrectly spelled word with the suggested words provided or choose one of the other options provided:

Ignore the incorrectly spelled word (e.g., not make any changes to it). Add to the word to the dictionary: Level 9 and 10 administrators can add marked words to a site-wide dictionary, and administrators can give users Levels 1 through Level 9 the ability to add words to the dictionary as well.

Remove Formatting

Icon Tool Description
 remove formatting Remove Formatting To remove all formatting for a selection, highlight the text to be updated and click the Remove Formatting icon. This returns the selected text back to the default settings.

Font Formatting

Icon Tool Description
 bold Bold Applies bold formatting to selected text.
 italic Italic Applies italicized formatting to selected text.

Lists, Indents

Icon Tool Description
 unordered list Unordered list Turns the selected text into a bulleted list. Example:
  • Apples
  • Oranges
  • Bananas
ordered list  Ordererd list Turns the selected text into a numbered list. Example:
  1. Click the Go button.
  2. Enter the text to search on.
  3. Click Start.
 outdent Outdent To decrease the indent of a paragraph, click the Outdent tool. Each consecutive click moves text further to the left.
indent  Indent To increase the indent of a paragraph, click the Indent icon. Each consecutive click moves text further to the right.
 blockquote Blockquote Blockquote is a block-level element in HTML that can be used to set-off quotations or to cite material.

Text Placement (Vertical)

Icon Tool Description
 superscript Superscript Formats the selected text as superscropt text.
 subscript Subscript Formats the selected text as subscript text.

Align, Justify (Horizontal)

Icon Tool Description
 align left Align Left Aligns a block-level element such as a paragraph or a heading to the left margin.
 align center Align Center Center aligns a block-level element such as a paragraph or a heading within the left and right margin.
align right  Align Right Aligns a block-level element such as a paragraph or a heading to the right margin.

Link Tools, WYSIWYG Help Documentation

Icon Tool Description
insert/edit link  Insert/Edit Link To create a hyperlink:
  1. Select the text or image for the link.
  2. Click the Insert/Edit Link tool. If applicable, the dialog contains existing link information.
  3. Click the Browse icon to select an internal page to which to link.
  4. After locating the file, click Select Link.
  5. Click Insert.
For links to pages internally, a page should generally be chosen from a production server, publish target, or an auxiliary server. An unpublished file on the staging server or publish target can also be chosen by choosing the staging server or publish target from the drop-down, navigating to the file, and selecting the HTML version that is available. Links can also be made across sites within an account with the file browser by clicking Sites in the breadcrumb and choosing the appropriate site.

For links external to the site, the complete URL for the resource can be typed (or pasted) into the URL field. Optionally, a target window type and an anchor name can also be entered.
mailto link  Create or Modify a Mailto Link To create a mailto link, select the text or image for the link, then click the Create or Modify a Mailto Link icon. If applicable, the resulting dialog contains existing mailto information. Properties for the mailto link can be defined including the email address that is provided when the link is clicked.
 unlink Unlink Select in the hyperlink and click the Unlink icon to remove a hyperlink.

Note: For unlinking anchors, the Unlink icon works with anchors in Internet Explorer. It will not work on anchors in Firefox, Safari, or Chrome.
 anchor Insert/Edit Anchor To create an anchor:
  1. Position the cursor where the anchor should be placed or select the text or image.
  2. Click the Insert/Edit Anchor icon.
  3. In the Anchor Name field, enter the name for the anchor. It is not necessary to enter a # (hash mark).
  4. Click Insert.
To modify an existing anchor:
  1. Click the existing anchor shown in the editing area. Anchor Icon.
  2. Click the Anchor icon on the toolbar.
  3. The Insert/Edit Anchor dialog shows the existing text for the anchor.
  4. Make the modification to the text and click Update.
The specifics of valid anchor names can be found in the HTML specifications: HTML 4.01, HTML 5
 help icon Help Icon The Help icon displays the help text for the WYSIWYG Editor. It show help text for all available functions, not only those limited to the toolbar being used.

Toolbar Row 2 Overview

A brief description of the functionality available with each tool on row 2 of the toolbar is provided in the tables below. Several of the features require a more in-depth description and links to those pages are provided also.

WYSIWYG Toolbar Row 2
Figure 3. WYSIWYG Toolbar Row 2

Formatting applied with the use of the Styles drop-down, and those for selecting text color and background color can also be cleared with the use of the Remove Formatting tool, which is represented by the Eraser icon on the toolbar. In other words, if a span has been applied, it can be removed by locating the cursor within the span and clicking the Remove Formatting tool. It is not necessary to be in code view to perform this action.

Font Properties (Format, Styles)

Icon Tool Description
 format Format he Format drop-down lists built-in styles that can be applied to a selected paragraph. To apply an element from the Format drop-down, click within the paragraph (or select text), and then click the element from the drop-down.
 styles Styles This drop-down sets the style of any selected text. The styles available are configured by the system administrator. Note that when applying a class from a Styles drop-down and then selecting another class from the Styles drop-down that both styles are applied to the text.

Images/Media

Icon Tool Description
 image Insert/Edit Image The Insert/Edit Image tool provides the functionality for linking to an image by browsing or by uploading, and allows for access to the Image Editor. Additional tabs and fields provide advanced options for images such as including styling and JavaScript. It also includes a preview.
 embedded media Insert/Edit Embedded Media The Insert/Edit Embedded Media tool provides the functionality for embedding media specific to several format types to an image by browsing or by uploading. Additional tabs and fields provide advanced options for embedded media such as specifying dimensions, setting audio quality options and Flash options, and previewing the source.

Miscellaneous Functionality

Icon Tool Description
 horizontal line Insert Horizontal Line Adds a horizontal rule.
 line break Insert line break To insert a line break, click the Line break icon. This is the same as entering br / into the source.
 special character Insert Special Character To insert a special character such as an copyright symbol, registered trademark, or other symbol, click the Insert Special Character icon. The Select Special Character dialog provides a selection of 200 special character from which to choose. Hover or use left and right keyboard arrows to navigate the selection. During the selection process, a preview of the character is shown with its name, HTML character reference, and numerical character entity reference. Click on the icon of the character to insert into the page. Right click the symbol and choose Copy Link from the shortcut menu, to copy to the clipboard, which allows the symbol to be repeatedly pasted on a page.special characters
 cleanup Cleanup Messy Code The Cleanup Messy Code icon removes extraneous tags and adds appropriate ending tags where necessary. This helps with cross-browser functionality as well as being a best practice.
 block elements Show/Hide Block Elements Toggles the WYSWISYG view to show or hide block-level element labeling. Each element such as p or article is displayed encapsulated with a thin border and labeled with a small tag.
 guidelines Show/Hide Guidelines/Invisible Elements The Toggle Guidelines/Invisible Elements icon adds/removes the outlines of tables and other elements, for visual purposes only.
 html Edit HTML Source The Edit HTML Source icon opens a code view of the HTML source. If a user has been granted access, there is also an HTML Source Editor available for the source code editing.
 snippets Snippets Click the Snippets icon in order to select preexisting snippets of HTML or text to be inserted into the page. The Snippets available are set by the system administrator.
 assets Assets Click the Assets icon in order to select a preconfigured asset to insert into the page.

Toolbar Row 3 Overview

The available tools on the third row of the toolbar are those available for inserting and editing tables within the WYSIWYG Editor. For tables, the additional features are available after the initial table has been inserted on the page. Place the cursor within the element and the editing tools will become available.

WYSIWYG Toolbar Row 3
Figure 4. WYSIWYG Toolbar Row 3

In addition to the Insert/Edit Table tool, other table editing functions include those for defining the properties for table cells and rows, and for inserting and deleting rows and columns. As with other functionality, right-clicking within a table provides a shortcut menu for table editing and formatting.

Example of Shortcut Menu
table shortcut menu
Figure 5. Table Shortcut Menu

Table Tools

Icon Tool Description
 table Insert/Edit Table To insert a table, position the cursor then click the Insert/Edit Table icon. The Insert/Edit Table dialog includes several fields that can be used to define the table including:
  • Columns: Number of columns in table
  • Rows: Number of rows in table
  • Cell Padding: Padding around cells
  • Cell Spacing: Spacing between cells
  • Alignment: The alignment of the content within the cells
  • Border: Thickness of the border around the cells
  • Width: Width of table
  • Height: Height of the table
  • Class: A class defining the styling of the table
  • Table Caption: Choose whether or not to have a caption above the table
Fill in table details, then click OK to insert table, or click Cancel to return to the editor.
 table row properties Table Row Properties Edit the alignment, background color and several other properties of the rows of the table.
 table cell properties Table Cell Properties Edit the alignment, background color and several other properties of the cells of the table.
 insert row before Insert Row Before To insert a row above another row, click inside the row cell the new row is to precede, then click the Insert Row Before icon.
 insert row after Insert Row After To insert a row below another row, click inside the row cell the new row is to follow, then click the Insert Row After icon.
 delete row Delete Row To delete a row, click inside the row to be removed, then click the Delete row icon.
 insert column before Insert Column Before To insert a column before another column, click inside the column cell the new column is to precede, then click the Insert Column Before icon.
 insert column after Insert Column After To insert a column after another column, click inside the column cell the new column is to follow, then click the Insert Column After icon.
 delete column Delete Column To delete a column, click inside the column to be removed, then click the Delete Column icon.
 split merged table cells Split Merged Table Cells To split cells that have previously been merged, select the cell then click the Split Merged Table Cells icon.
 merge table cells Merge Table Cells To merge cells, highlight the cells to be merged, then click the Merge Table Cells icon.