The Classic WYSIWYG Editor provides a more traditional interface for editing pages. Although it does not provide in-context editing by default, templates can be configured to provide a mock-up of the page around the open editable region, to simulate how your changes might appear on the live page. Additionally, editing behaviors within the WYSIWYG can be influenced by the operating system in use on the local computer and the browser.
Example of WYSIWYG Editor
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.
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.
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
Right-clicking within a table provides a list of available table editing and formatting functions, as follows:
- Insert/Edit Table
- Table Properties
- Delete Table
- Table Cell Properties
- Split Merged Table Cells
- Merge Table Cells
- 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
- Insert Column Before
- Insert Column After
- Delete Column
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
- Paragraph Direction
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.
For example, when the cursor is within a paragraph, the following is shown:
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.
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.
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.
Creating Custom Toolbars
The Classic 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.
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.