• KB Home |
• Need Help?

Learning Levels

• Digest
• Concept
• Technical

Announcements

WYSIWYG is an acronym for “What You See Is What You Get.” Cascade’s word processing functionality is referred to as the WYSIWYG editor because as its name implies, it allows you to see formatting while editing in your content in the word processor (much like Microsoft Word®).

The word processor, which is integrated in the CMS system, has the same functionality and features you are most likely accustomed to using in a standard editor. The functions available in the WYSIWYG are all available at the top of the editing content window (as with most word-processors), and include:

More Insight Into Cascade's WYSIWYG

The WYSIWYG editor allows users to visually preview changes as they are made.  If a user desires control finer than common functionalities such as bold, italics, tables, and image movement provides, they may opt to see the source XHTML 'behind-the-scenes' and toggle between the visual and source modes.  Additionally, administrators may set CSS classes for the WYSIWYG editor, allowing users to select various styles from a drop down menu, and may also limit formatting options available to users on specific assets.

With the release of Cascade Server 5.7, TinyMCE 3 was introduced.  This powerful new WYSIWYG editor offers many useful features and improvements, including the following:

• added support for anchor insertion and editing during link creation
• link/image pop-ups are floating divs and no longer new windows, alleviating web browser pop-up blocker issues
• new 'Full Screen' button to make editing large documents easier; improves pasting from Word and code cleaning
• more intuitive Toolbar button regrouping
• solidified Safari 3 support
  

Please note: only certain assets (standard pages and XHTML blocks) are available to be edited using the WYSIWYG editor.

Using the WYSIWYG

When a user clicks Edit on most pages, the default region opens in the WYSIWYG (What You See Is What You Get) Editor.

The WYSIWYG allows users to create and format web content with greater freedom than the Structured Data Definitions allow.

Selecting Styles in the WYSIWYG

Styles are an easy way to cleanly format text via the WYSIWYG. Default styles such as Heading 1-6, Normal, and Address are often statement by Administrator-selected styles to suit the needs of each site.

To select a style for existing text, simply highlight the text and select the style from one of the dropdown boxes on the left side of the toolbar.

Alternatively, you may place your cursor on the desired line, select your style from one of the dropdown boxes and any new text typed will automatically be formatted with the selected style.

HTML Toggle

Users wishing to edit content in HTML may click on the HTML icon inside the WYSIWYG. To return to the WYSIWYG view without submitting changes, the user may turn off the HTML view by clicking the icon again. This is a valuable feature for technical users who feel more comfortable working in the HTML environment. This feature can be turned on and off at the content type.

Advanced users who wish to tweak the content of a page via the HTML code may simply click the HTML toggle icon to switch back and forth between views. Content may be submitted via either view.

More on the WYSIWYG for Administrators

The administrator has full discretion over which WYSIWYG features appear for certain users or groups. This is important for ensuring consistency of style throughout the site, as well as creating a simple environment for less tech-savvy users.

Formatting options can be limited at the system level by going to system options and turning off the features that are not desired. Specific features that can be shut off include text formatting, font selection, HTML toggle, etc.

Different formatting limits can also be placed on different content types, as well as individual assets of the same content type. This is generally setup by administrators/managers at the configuration level, and is useful in maintaining uniformity and consistency for specific areas of a site.

CSS styles can be selected from a drop down menu of a user-supplied stylesheet. This ensures branding standards are consistently enforced throughout the site.

The rich text editor or WYSIWYG (What You See Is What You Get) is a JavaScript editor called TinyMCE. As of Cascade 6.7, we are using TinyMCE 3.3.6. You can find a recent list of changes to TinyMCE on the website.

Editing Using the WYSIWYG

Cascade’s WYSIWYG provides several features that make editing and creating web content simple.

Inserting and Managing Links

To insert a link:

1. Select your Page and click Edit in the action bar.
2. Highlight the word or words you wish to hyperlink.
3. Click the editor's Link button (shown above).
4. A link insertion dialog will appear.
5. To link to a Cascade-managed asset, use the available asset chooser on the Internal tab and select the asset to which you would like to link.
6. To link to an external resource, click on the External tab and type in the full URL for the resource to which you wish to link (i.e. http://www.hannonhill.com).
7. Choose a target window for the link using the Target dropdown.
8. Optionally specify a Title for the link.
9. For advanced users, insert a Class and/or Anchor for the selected text.
10. Click Submit to insert the hyperlink.
11. Check the Text being linked and amend it if necessary.
12. Save the hyperlink in the page by selecting Submit on the page

To edit a link:

1. Highlight or move the cursor inside of the linked content.
2. Click the editor's Link button.
3. Change the properties of the hyperlink and click Submit.
4. Click Submit on the Page to save changes to the hyperlink.

To remove a link:

1. Highlight or move the cursor inside of the linked content.
2. Click the Unlink button (next to the Link button)

The Link Checker will run after submitting the page if is enabled.

Inserting and Managing Images

You can insert an image that is stored in Cascade or one that is on the computer’s hard drive. If the image file is on the computer’s hard drive, it can be uploaded one of two ways.  The user can either use the New Menu to create a new File asset or the file can be uploaded via the upload pane of the File chooser that is available in the Insert Image dialog.

To insert an image: 

1. Click the Insert Image button or right-click and select "Insert/Edit image"
2. For internal images, use the File chooser to locate the image within Cascade. (Optionally use the upload pane on the File chooser to upload a new image)
3. Preview the image and set its properties.
4. Click Submit
5. Click Submit on the Page to save all changes made to the Page.

To remove an image:

1. Select the image
2. Either press the Delete/Backspace key or right-click and select Cut

To choose a new image or change the image's properties:

1. Select the image
2. Either click the Image button or right-click and select "Insert/Edit image"
3. Modify the chosen image and its properties
4. Click Submit to update

The following properties can be edited:

• Alternate Text - sets the alternate text of the image using "alt" attribute of the <img> tag. Alternate text will appear when rolling over the image with a cursor or when using a browser that does not render images such as a screen reader.
• Width/Height - sets the width and height of the image in pixels using the width/height attributes of the <img> tag. This does not modify the dimension of the source image.
• Alignment - aligns image on the page using the "align" attribute of the <img> tag
• Border Thickness - to adjust the thickness of the image’s border
• Horizontal Padding - sets the amount of space between the left and right sides of the content area and the image.
• Vertical Padding - sets the amount of space between the top and bottom sides of the content area and the image

Inserting media

The WYSIWYG editor allows inserting external media of the following types:

• Flash
• Quicktime
• Shockwave
• Windows Media
• Real Media

To insert media:

1. With WYSIWYG open, click Insert/edit embedded media button
2. In the Type field, select the type of media
3. In the File/URL field, enter URL of the video page
4. Optionally, provide desired dimensions of the media
5. Click Update button

Inserting a table in the WYSIWYG

You can create, edit, copy, and delete tables.

To create a table:

1. Place the cursor in the editor so that it is in the desired location for the table.
2. Click the Insert Table icon.  
   

3. An Insert Table dialog will appear.
4. Select the number of Rows and Columns for the table.
5. Other options include the table’s Alignment, Border thickness, Cell Spacing, Cell Padding, and Column Width.

Tables can also be copied from existing content in external documents.

Using System Preferences and Tidy HTML

The following items denoted with an "x" will be removed upon Page submission if the "Remove all font tags and style attributes from the word processor content" and "Tidy HTML" Preferences are both enabled in the Preferences area.

This list focuses on items that can be added using the WYSIWYG toolbar buttons.  It is important to note that some toolbar buttons are not displayed when the "Remove all font tags and style attributes from the word processor content" preference is enabled because when used they add a "style" attribute to HTML tags.

It is also important to note that any items that are manually entered using the HTML button that have a style attribute will also have their style attribute removed if these system preferences are used together.

Paste from external Word Processors

The WYSIWYG supports pasting from external Word Processors such as Microsoft Word (Mac and Windows) and Google Docs. For Microsoft Word, it does its best to clean-up extra tags that exist in the source document. This includes stripping <o>, <w>, <span>, <p>, <meta>, and <link> tags that are used for formatting in Word only. Content cleanup happens automatically when pasting either with the button in the WYSIWYG or with the browser's native Paste command.

The Paste as Text button puts the WYSIWYG into a mode where content is pasted as text only. The WYSIWYG does its best to remove any formatting, style or structure.

The Cut, Copy, Paste buttons appear in all browsers but are incompatible with browsers such as Firefox and Safari. These incompatibilities are the result of browser security restrictions and are not the fault of the WYSIWYG. When a user attempts to use the buttons in an incompatible browser, a message will warn the user and suggest they use the browser's native Cut, Copy, and Paste command.

FAQs

• Can I select which formatting options appear in the WYSIWYG editor?

  • The administrator has full discretion over which WYSIWYG features appear for certain users or groups. This is important for ensuring consistency of style throughout the site, as well as creating a simple environment for less tech-savvy users.

    Formatting options can be limited at the system level by going to system options and turning off the features that are not desired. Specific features that can be shut off include text formatting, font selection, HTML toggle, etc.

    Different formatting limits can also be placed on different content types, as well as individual assets of the same content type. This is generally setup by administrators/managers at the configuration level, and is useful in maintaining uniformity and consistency for specific areas of a site.

    CSS styles can be selected from a drop down menu of a user-supplied stylesheet. This ensures branding standards are consistently enforced throughout the site.

• Can I edit the HTML directly from the WYSIWYG editor?
  • Users wishing to edit content in HTML may click on the HTML icon inside the WYSIWYG. To return to the WYSIWYG view without submitting changes, the user may turn off the HTML view by clicking the icon again. This is a valuable feature for technical users who feel more comfortable working in the HTML environment. This feature can be turned on and off at the content type.

© 2001-2012 Hannon Hill Corporation

Site Index | HH Internet | KB Feedback

Contact Us: Online Form | +1.678.904.6900