The CMS WYSIWYG Editor Overview

This chapter explains the all the features of the WYSIWYG editor. When adding or editing pages you will use the editor in the in editor in each of the five content fields on the Edit Content screen of each page. Read on to learn what each button in the editor does and tips techniques to improve productivity.

Requirements:
Mac or PC
Internet connection
Mozilla Firefox web browser. If you need Firefox download it here: www.mozilla.com

Editor is Disabled

When the Edit Content page displays the WYSiWYG editor may be turned off. The ability to turn the editor off on a per content filed basis will speed up page load time when editing content.

To enable the WYSIWYG Editor click Advanced. Click Disabled to turn it off. The Lite version of the Editor is not used.
NOTE: If you make any edits be sure to save them before you click Advanced or Disabled.

The WYSIWYG Tool Palette

This is the default WYSIWYG tool palette. Your palette may look different. We are updating the editor for TDG Interactive CMS by removing unused features and adding new ones. Eventually yours will look like this.

The WYSIWYG Editor: Top Row

1. Full Screen: For content that's more than a few paragraphs, use Full screen to zoom the content field to the full window.
2. Search: A great way to Search and Replace items on a page. Especially to remove double-spaces or asterisks, etc.
3, 4. Undo - Redo: Sometimes the keyboard shortcuts don't perform as you want them to on web pages. These work well. They will Undo and Redo the previous action.
5. Hyperlink: Select some text or an image and click Hyperlink to link to a page outside your website.
6. Internal LInk: Select some text or an image and click Internal Link to link to a page inside your website.
7. Image: Insert an image on the page.
8, 9, 10. Media: Insert Flash (SWF), Windows Media Video (WMV), and Flash Video (FLV) respectively.
11. Insert Table: click this icon to insert a table. Tables are a good way to layout content and control how it looks. Columns or a spreadsheet look, etc.
12. Edit Table/Cell: After a table is inserted and you want to edit it. Select the table and click this button.

The WYSIWYG Editor: Middle Row

1. Style Selection: This feature is hardly ever used, but when it is, it allows you to specify CSS styles to selected text.
2. Paragraph: This feature is used allot. After pasting text in to the editor, select "All" and set text to "Normal (P). Doing this will make all the text format to the designated styles of your website. From that point, select Heading styles based on the rules set at www.yourwebsite.com/styles.
3. Special Characters: Looking for a © symbol or an accent to go over an nŽ? This is where you'll find it.
4. Line: AKA Horizontal Rule or HR. Clicking this button will insert a line at the cursor point.

The WYSIWYG Editor: Bottom Row

1. B, i, U, Strikethrough, Super/Sub-Script: Select some text and set text to be Bold, Italic, Underline, Strikethrough, Super and Subscript respectively.
2. Inc., A.I.: Abbreviation and Acronym buttons. If your text has an abbreviation like abbr. or an acronym like RSS, select it, click the appropriate button and TDG Interactive CMS will display a window that you can insert a definition. This is very helpful for handicap assistance and search engine optimization.
3. Alignment: Clicking an alignment button will align the PARAGRAPH the curser is in either left, center and right.
4. Numbering, Bullets: AKA Ordered List, Unordered List. Select one or more lines of text and click appropriate button to convert the text to a numbered or bulleted list respectively.
5. Indent, Outdent: Clicking one of these buttons will indent or outdent, respectively, any selected text.


Downloads:

The CMS WYSIWYG Editor Overview.pdf
Size: 80 KB
Number of downloads: 2225
Dated Added: 14 May 2010

CONTACT US & see how our products can help your business grow! email us or call 860.658.9777