WYSIWYG editor help


WYSIWYG - What You See Is What You Get

The HTML editor bundled with the CMS is what is known as a WYSIWYG (what-you-see-is-what-you-get; pronounced: wiz-ee-wig) editor. It allows you to format and arrange your content much in the same manner as you would a Word Document . If you’ve ever used Microsoft Word (or equivalent) you will already be familiar with many of the tools and icons used in the editor

 


Some icons may be less familiar. However, the process for all is fundamentally the same: select or highlight the target element (a word, a block of text, an image, a blank space, etc), click the icon and perform the appropriate task.

The key below provides a brief description of the tools and their use. If a tool’s use is not readily apparent, just give it a try – and check the tips in the Advanced or Infrequently used section further below
Basic and Frequently Used & Advanced and Infrequently Used Icons
Basic
Preview – See what the HTML page will look like to users.
Save - Saves the current document and any changes made.
New Page - Deletes all content in the window and creates a new, blank screen.

Cut, Copy, Paste - You must select the text first.
Plain Text - Paste contents from the clipboard as plain text.
Paste from Word - Copy content from a word processing program, then paste it into the pop-up window to retain formatting.
Print - Prints the contents of the editing window.
Spell Check - The HTML page.
Undo, Redo - The most recent action taken.
Find, Find and Replace -  A word or phrase within the text of the editing window page.
Select All - Highlights the entire page. Editing and formatting actions will affect all elements.
Remove Formatting - Remove the formatting from highlighted text.

Bold, Italic, Underscore, and Strikethrough - Effects the highlighted text respectively.
Superscript, Subscript - Effects the highlighted text respectively.
Numbered List,  Bulleted List – Add numbering or bullets to highlighted text lines.
Increase, Decrease - The highlighted text's indentation.

Justification - Alignment of highlighted text (left, centered, right, full).
Text Color - Change the color of the highlighted text.
Background Color - Change the background color behind the highlighted text. Note: To change the background color of a table or table Cell, press 'Ctrl' while clicking the table or cell, then select the background color.
Maximze Screen - Enlarges the editor window to fill up the browser screen. Click again to resize.
About - Details about the editor including version number, release date, etc..
Basic and Frequently Used & Advanced and Infrequently Used Icons
Advanced
Source View - View or edit HTML source code. Double click this icon to toggle between source and display mode.
Template - Select a layout template. Standard layouts for text, tables, and images.
Form - Creates a HTML form for handling controls such Checkboxes and Radio buttons that are submitted for processing. Needs a Form handler set up on the server, usually by the hosting company.
Hidden Field – Generates a hidden HTML form field instructing the Form handler on how to process the Forms' controls data.

Form Elements – Button, Radio button, Checkbox. Used by the Form and handled by the Form handler on the server to submit these values for processing.
Form Text Elements - Text label, Text box.
Image Button – Upload an image that will behave like a button. Click the icon, enter the URL of the image, or click Browse to locate the image on the server, or click Browse again to search your local computer.
Links - Add or remove hyperlinks from highlighted elements. Also used to manage file uploads and links to files either on the web or on the server, including PDF and Word documents. To add a link: highlight the element, click the Link icon, and type in the target URL. To upload a PDF or other document: click the Upload tab, then click Browse to upload a file from your local computer, click "Send it to the Server", and your done.
Anchor - Add or remove hyperlinks from highlighted text. Creates links within a page, within your website, or to another website.
Image - Insert images into your page. Browse the server, or click Upload then Browse, to see the files on your local computer. Once you have selected an image to insert, the image editing window supports additional tools to set aligment, border, etc.
Flash - Install Flash applications. Depending on your application server, adjustments may need to be made (at the server or application level) to allow the Flash embed code to execute from within the WYSIWYG editor.

Table - Insert table. When adding complex table structures to your site it is best to build the tables in your own HTML editor such as Dream Weaver or FrontPage, then cut and paste the code into the CMS using the Source view.  However, for basic table work, the CMS table feature is easy to use.  The table’s spacing around the content can be controlled by adding empty spaces with the spacebar and then resizing the table by pinching and dragging the lower right corner. Justifying the text is also helpful.
Horizontal Line - Insert a divider line. You can add tag attributes such as width and color by using the Source editor.
Emoticons - Insert emoticons (e.g. smiley faces, email icon, light bulb).
Symbols - Insert symbols & special characters (trademarks, currency, etc.)
Page break - Only impacts printed version.
Universal Keyboard - inserts foreign language characters into text.