KB Version:

Page Navigation

Related Links

Learning Levels

Most Read

WYSIWYG

Digest

WYSIWYG

WYSIWYG is an acronym for “What You See Is What You Get.” Cascade Server's word processing functionality allows users to format and edit content like a word processor (such as Microsoft Word®).

This editor includes several features and functions commonly found in standard editors located in the WYSIWYG toolbar. These tools are:

Symbol Function Additional Information
Custom Character Insert a Custom Character For more information, please see Inserting a Custom Character
subscript Subscript
superscript Superscript
bold Bold Hotkey: Ctrl + B
italics Italics Hotkey: Ctrl + I
underline Underline Hotkey: Ctrl + U
strikethrough Strikethrough
align left Align left
align center Align center
right align Align right
align full Align full (Justify)
styles Styles This is an important aspect of the HTML source code. All content must be styled properly.
format Heading, paragraph formats This is an important aspect of the HTML source code. All content must be formatted correctly.
paste from word Paste from Microsoft Word® For more information, please see Paste from Word
find/replace Find/Replace For more information, please see Find and Replace
spell check Toggle spellchecker/Language selector spell check
unordered list Unordered lists/Bullets
ordered list Ordered/numbered lists
outdent Outdent (reduce the indent)
indent Indent
undo Undo
redo Redo
insert link Insert/Edit link
unlink Unlink
anchor Insert/Edit anchor
Insert/Edit Image Insert/Edit image
Horizontal Rule Horizontal rule Adds a horizontal line into the content. Takes in height, width, and size dimensions. 
Insert a new table Inserts a new table
Cleanup Messy Code Cleanup messy code
Remove formatting Remove formatting
HTML Edit HTML source
Toggle guidelines/Invisible elements Toggle guidelines/Invisible elemtns
Full screen Toggle fullscreen mode Expands the WYSIWYG to the full pane. 


Concept

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. The editor also employs the use of TinyMCE providing several useful features and improvements including Paste from Word and code cleaning options. 

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.

WYSIWYG

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

 

HTML

 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.

 

 

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.

FAQs

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

Technical

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.

wysiwyg insert link

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.

wysiwyg picture

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 (see explanation of the properties below).
  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 (see explanation of the properties below).
  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 using a browser that does not render images such as a screen reader or when the image fails to load for some other reason. Generally, decorative images do not need any alternate text. If that is the case, the This is a decorative image checkbox should be checked which will allow leaving the Alternate text field blank. Leaving the Alternate text field empty will generate an <img> tag with its alt attribute set to "" (i.e. alt="").
  • 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. The aspect ratio is maintained by default. To disable maintaining of the aspect ratio, click the the icon between the two dimensional fields.
  • Alignment - Aligns the image on the page using the align attribute of the <img> tag.
  • Border Width - Adjusts the thickness of the image’s border.
  • Vertical Spacing - Sets the amount of space between the top and bottom sides of the content area and the image using the vspace attribute of the <img> tag.
  • Horizontal Spacing - Sets the amount of space between the left and right sides of the content area and the image using the hspace attribute of the <img> tag.
Image width and height can also be modified by dragging the handles that appear after selecting the image in the WYSIWYG editor outside of the Insert/Edit image dialog (this feature is not supported on Chrome and Safari web browsers though).

Inserting media

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

  • YouTube
  • HTML5 Audio
  • HTML5 Video
  • Flash
  • Quicktime
  • Iframe

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.
    1. For HTML 5 Video, two alternative sources can be provided in the Advanced tab.
  4. Optionally, provide desired dimensions of the media and any other additional properties that are available in the Advanced tab.
  5. Click Insert or Update button.

You can also directly edit the HTML source in the Embed code tab. Many video hosting services will provide an embed code that can be copied directly into this embed code field.

Media Plugin

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.  

wysiwyg table

  1. An Insert Table dialog will appear.
  2. Select the number of Rows and Columns for the table.
  3. 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.

Styles Remove all font tags and style attributes from word processor content + Tidy HTML
u x
b
i
strikethrough x
left align x
center align x
right align x
justified x
indent x
horizontal rule x
table items
border-color x
border-width x
height x
background-color x
background-image x
style x
align
border
cellpadding
cellspacing
width
id
summary

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?
    • Can I edit the HTML directly from the WYSIWYG editor?

Related Links