# Rich-text Editor

You can edit any content area easily using the built-in Rich-text Editor. Much like a Word Processor, the Rich-text Editor Page allows you to add text,images, tables, links, and even embed media files. You can also style your content using Formats and Custom Formats included in System Themes or any CSS design.

## Using the Rich-text Editor

To properly apply formatting to your content, select the invisible formatting tags by clicking on the links next to the 'Click tag to format text' (located at the bottom of the window) and then apply a format by selecting the appropriate icon or pick list from the menu (located at the top of the window).

To remove menu options from your content, select the invisible formatting tags by clicking on the links next to the 'Click tag to format text' (located at the bottom of the window) and then either select the "Remove Formatting" icon in the menu.

To remove Formats and Custom Formats from your content, select the invisible formatting tags by clicking on the links next to the 'Click tag to format text' (located at the bottom of the window) and then select the default options of "Format" or "Custom Formats". You may need to repeat this process a few times to remove each layer for formatting.

If you have trouble adding or removing formatting in your content, you can "Select All" content, and then select "Remove Formatting" and "Cleanup" to remove all formatting, leaving only your plain text and graphics. You can then start reapplying your formatting using the "Click tag to format text' to guide you. With a little practice, you will get good at it!

NOTE: The Rich-text Editor takes content that you paste or add into it's editing window and creates code behind the scenes that web browsers understand. To do this, it must translate your formatting selections into HTML tags and can sometimes get "confused" when these invisible HTML tags overlap as you paste and update your content. This is not a bug in the software, but simply one invisible format tag interfering with another.

Adding a Line Break
If you want to create a line break (<br>), press "Shift-Enter".

Adding a new Paragraph
If you want to create a new paragraph (<p>), press "Enter".

## Menu Functions

Here are is an explanation of all the icon menu functions available to you within the Rich-text Editor. Many of the features are also accessible by placing the cursor at the area in the Editing area that you want to perform an action, and clicking the right mouse button.

Formats

Formats are standardized HTML tags that are used to style content. You typically want to use these first when styling your content. These standard HTML formatting tags include:

- Paragraph: apply the paragraph style.to any paragraph ("p" tag) that is selected. This will reset the paragraph to it's default styling.
- Preformatted: apply the preformatted style to the content tags that are selected.
- Address: apply the address style.tothe content tags that are selected.
- Heading 1: apply the <h1> heading style to the text selected. This is useful for the largest content heading or title.
- Heading 2: apply the <h2> heading style to the text selected. This is useful for the second largest content heading or title.
- Heading 3: apply the <h3> heading style to the text selected. This is useful for the third largest content heading or title.
- Heading 4: apply the <h4> heading style to the text selected. This is useful for the forth largest content heading or title.
- Heading 5: apply the <h5> heading style to the text selected. This is useful for the fifth largest content heading or title.
- Heading 6: apply the <h6> heading style to the text selected. This is useful for the sixth largest content heading or title.

Custom Formats

Common Formats are created by all System Themes and help you add more pizazz to your website content by offering custom styling that is consistent with your website's design. By using Custom Formats, your Content Editors can select styling "hooks" created automatically by the Theme Designer (and which can be extended by your Site Designers). Here is a list of the Custom Formats created by all System Themes:

- background-primary: apply to the selected HTML element (<span> tag) will set the primary color of the Theme to the background color of the element.
- background-secondary: apply to the selected HTML element (<span> tag) will set the secondary color of the Theme to the background color of the element.
- color-primary: apply to the selected HTML element (<span> tag) will set the primary color of the Theme to the text color of the element.
- color-secondary: apply to the selected HTML element (<span> tag) will set the secondary color of the Theme to the text color of the element.
- heading-primary: apply to the selected heading element (<h1>-<h6> tags) can be used to create special primary styling to the heading element.
- heading-secondary: apply to the selected heading element (<h1>-<h6> tags) can be used to create special secondary styling to the heading element.
- image-primary: apply to the selected image element (<img> tag) can be used to create special primary styling to the image element.
- image-secondary: apply the selected image element (<img> tag) can be used to create special secondary styling to the image element.
- image-left-primary: apply to the selected image element (<img> tag) can be used to create special primary styling to the image element and float it to the left of any content.
- image-left-secondary: apply to the selected image element (<img> tag) can be used to create special secondary styling to the image element and float it to the left of any content.
- image-right-primary: apply to the selected image element (<img> tag) can be used to create special primary styling to the image element and float it to the right of any content.
- image-right-secondary: apply to the selected image element (<img> tag) can be used to create special secondary styling to the image element and float it to the right of any content.
- image-desktop-hide: apply to the selected image (<img> tag) will hide the image from desktop visitors.
- image-mobile-hide: apply to the selected image (<img> tag) will hide the image from mobile visitors.
- link-button-primary-large: apply to the selected link (<a> tag) can be used to create special primary styling to the link using the large button styling.
- link-button-primary-small: apply to the selected link (<a> tag) can be used to create special primary styling to the link using the small button styling.
- link-button-secondary-large: apply to the selected link (<a> tag) can be used to create special secondary styling to the link using the large button styling.
- link-button-secondary-small: apply to the selected link (<a> tag) can be used to create special secondary styling to the link using the small button styling.
- link-content-more: apply to the selected link (<a> tag) can be used to create special styling to lead the reader to the full article or story.
- link-menu-item: apply to the selected link (<a> tag) can be used to create vertical menu items within any content region.
- link-desktop-hide: apply to the selected link (<a> tag) will hide the link from desktop visitors.
- link-mobile-hide: apply to the selected link (<a> tag) will hide the link from mobile visitors.
- list-accordion: apply to the selected unordered of ordered list (<ul> or <ol> tag) can be used to create expanding and collapsing areas of content within any content region.
- list-accordion-expanded: apply to the selected list item (<li> tag within an accordion list) can be used to expand the specific accordion list item by default when the page is first loaded.
- list-tabs: apply to the selected unordered of ordered list (<ul> or <ol> tag) can be used to create tabbed content panels within any content region.
- paragraph-box-primary: apply to the selected paragraph element (<p> tag) can be used to create special primary box styling to the paragraph.
- paragraph-box-secondary: apply the selected paragraph element (<p> tag) can be used to create special secondary box styling to the paragraph.
- paragraph-box-example: apply the selected paragraph element (<p> tag) can be used to create special example box styling to the paragraph.
- paragraph-box-notice: apply the selected paragraph element (<p> tag) can be used to create special notice box styling to the paragraph.
- paragraph-box-warning: apply the selected paragraph element (<p> tag) can be used to create special warning box styling to the paragraph.
- paragraph-ident: apply the selected paragraph element (<p> tag) can be used to indent the paragraph.
- paragraph-desktop-hide: apply to the selected paragraph (<p> tag) will hide the paragraph from desktop visitors.
- paragraph-mobile-hide: apply to the selected paragraph (<p> tag) will hide the paragraph from mobile visitors.
- table-primary: apply to the selected table element (<table> tag) can be used to create special primary styling to the table.
- table-secondary: apply the selected table element (<table> tag) can be used to create special secondary styling to the table.
- table-left: apply to the selected table element (<table> tag) can be used to create special styling to the table and float it to the left of any content.
- table-right: apply to the selected table element (<table> tag) can be used to create special styling to the table and float it to the right of any content.
- table-center: apply to the selected table element (<table> tag) can be used to create special styling to the table and float it in the center of any content.
- table-desktop-hide: apply to the selected table (<table> tag) will hide the table from desktop visitors.
- table-mobile-hide: apply to the selected table (<table> tag) will hide the table from mobile visitors.
- table-row-header: apply to the selected table header (<thead> tag) can be used to create special styling to a table's header.
- table-row-body: apply to the selected table body (<tbody> tag) can be used to create special styling to a table's body.
- table-row-footer: apply to the selected table footer (<tfoot> tag) can be used to create special styling to a table's footer.
- table-cell-header: apply to the selected table cell header (<th> tag) can be used to create special styling to a table cell's header.
- table-cell-data: apply to the selected table cell data (<td> tag) can be used to create special styling to a table cell's data.
- table-cell-mobile-fill: apply to the selected table cell data (<td> tag) is used to force a table cell to the full width of the screen in "mobile mode". This allows tables with alot of content to "wrap" when viewed on mobile devices. This custom format should be used on the first table cell in the table's first row. All subsequent table cells in the same table row should have the table-cell-mobile-wrap custom format in order for all table cells to wrap correctly when viewed on mobile devices.
- table-cell-mobile-wrap: apply to the selected table cell data (<td> tag) is used to force a table cell to wrap in "mobile mode". This allows tables with alot of content to "wrap" when viewed on mobile devices. This custom format should be used on all BUT the first table cell in the table's first row. All subsequent table cells in the table should have the table-cell-mobile-wrap custom format too in order for all table cells to wrap correctly when viewed on mobile devices.
- table-cell-desktop-hide: apply to the selected table cell (<td> tag) will hide the table cell from desktop visitors.
- table-cell-mobile-hide: apply to the selected table cell (<td> tag) will hide the table cell from mobile visitors.
- text-box-primary: apply to the selected text (<span> tag) can be used to create special primary box styling to the text.
- text-box-secondary: apply to the selected text (<span> tag) can be used to create special secondary box styling to the text.
- text-box-example: apply to the selected text (<span> tag) can be used to create special example box styling to the text.
- text-box-notice: apply to the selected text (<span> tag) can be used to create special notice box styling to the text.
- text-box-warning: apply to the selected text (<span> tag) can be used to create special warning box styling to the text.
- text-desktop-hide: apply to the selected text (<span> tag) will hide the text from desktop visitors.
- text-mobile-hide: apply to the selected text (<span> tag) will hide the text from mobile visitors.
- text-highlighter: apply to the selected text (<span> tag) can be used to create special highlighter styling to the text.
- text-fine-print: apply to the selected text (<span> tag) can be used to create special fine print styling to the text.
- text-annotate: apply to the selected text (<span> tag) can be used to create special annotation styling to the text.
- text-quote: apply to the selected text (<span> tag) can be used to create special quote styling to the text.
- video-primary: apply to the selected video element (<object> tag) can be used to create special primary styling to the video element.
- video-secondary: apply the selected video element (<object> tag) can be used to create special secondary styling to the video element.
- video-left-primary: apply to the selected video element (<object> tag) can be used to create special primary styling to the video element and float it to the left of any content.
- video-left-secondary: apply to the selected video element (<object> tag) can be used to create special secondary styling to the video element and float it to the left of any content.
- video-right-primary: apply to the selected video element (<object> tag) can be used to create special primary styling to the video element and float it to the right of any content.
- video-right-secondary: apply to the selected video element (<object> tag) can be used to create special secondary styling to the video element and float it to the right of any content.
- video-desktop-hide: apply to the selected video (<object> tag) will hide the video from desktop visitors.
- video-mobile-hide: apply to the selected video (<object> tag) will hide the video from mobile visitors.

Select text color
Click this icon to change the color of your highlighted text. (This feature can be disabled in the Site Settings.)

Select background color
Click this icon to change the background color of your highlighted text. (This feature can be disabled in the Site Settings.)

Bold
Bold text content that is highlighted.

Italics
Italicize text content that is highlighted.

Underline
Underline text content that is highlighted.

Strikethrough
Strikethrough text content that is highlighted.

Blockquote
Apply the blockquote formatting tag to the highlighted text.

Spell Check
Spell Check the text content using the spell checker enabled for your site.

Cut
Cut content that is highlighted.

Copy
Copy content that is highlighted.

Paste
Paste content from the clipboard

Paste Text
Paste only text content from the clipboard.

Paste Word
Paste from a Micorsoft Office document in the clipboard and strip out hidden MS Word formatting tags.

Select All
Click this icon to select all content (and invisible formatting tags) within the Editor Window. This is useful if you want to copy everything in the Editor to your clipboard and then paste it into another editable area.

New Document
Click this icon will clear all the content within the Editor Window. This is useful if you want to clear all the content in the Editor and start over. It will also clear any invisible formatting tags that might be present.

Subscript
Subscript text content that is highlighted.

Superscript
Superscript text content that is highlighted.

Justify Left
Justify all content to the left of the editable area.

Justify Center
Justify all content to the center of the editable area.

Justify Right
Justify all content to the right of the editable area.

Justify All
Justify all content to the left and the right of the editable area.

Create Bulleted List
Creates a regular bullet list.

Create Numbered List
Allows you to create a list ordered by numbers.

Indent
Indent the content.

Horizontal Rule
Adds a horizontal separator line beneath your content. TIP: This is a good way to create seperation between areas of content.

Add Link

This button allows you to create a HTML link to any other Web page in the system or to an external Website. You can also upload a document file using this button and the system will automatically create a link to the File.

To create a link to an email address, select the link button but instead of selecting a Page or URL, enter "mailto:example@example.com" in the URL field. Email links will automatically be protected from email harvesters, which are bots that crawl the web and collect email addresses for spam. The email link that you create will be converted to JavaScript automatically when a Visitor visits a Page. This prevents email harvesters from finding the email address. An email address must be linked with a mailto link in order for the email address to be protected. An email address which just appears in content, without a link, will not be protected. Email links which are entered through other areas of the system (e.g. Custom Page Styles, Designer Regions) will also be protected.

You may use the Popup tab to create a JavaScript popup window. You might want to use this feature instead of simply opening a new window via the Target field if you want to set the properties for the new window (e.g. size, scrollbars). Please do not enter a Window name, unless you are specifically directing the link to an existing popup window, because it might not work in Internet Explorer.

Remove Link
Removes the HTML link from the content.

Create Anchor
Create an link to an area within the Page. This is useful when you need to help the site visitor navigate around a large page of content.

Insert Image
This button allows you to insert a graphic image into your content. You can select any file already uploaded (see the Files Tab for more information on these Files) or upload a new image file from your computer. All uploads are available on any other page you create. Valid image files will have a .tiff, .png, .jpg, or .gif extension to be visible on your Website. .jpg are best for photos, and .gif is best for simple logos.

Insert Media
This button allows you to insert a flash, shockwave, quicktime, windows media, or realtime media file into your Page Region. You can select any file already uploaded (see the Files Tab for more information on these Files) or upload a new media file from your computer. All uploads are available on any other page you create.

NOTE: If you are having problems rendering your embedded media, edit the media's Properties and use the actual URL (e.g. /[dir]/get_file.php?name=example.wmv) instead of the virtual URL (e.g. /files/example.wmv). We are not sure why the rewriting of the URLs matters, but it appears that a small percentage of client computers don't like the virtual URLs, probably because of some unrelated compatibility issue that has not been indentified.

If that does not work, you should also consider adding a URL parameter to your media's Properties as follows, since there seems to be an issue for some versions of the Internet Explorer browser:

<object>...<param name="url" value="/files/example.wmv" />...</object>

Be sure to also replace the virtual URL with the actual URL as described above.

Table Properties
You can edit several of the tables properties including alignment, size, rules, borders and specific styles. This is an advanced feature. You can learn more about tables at:

Row Properties
Change one row including size, alignment and different styles.

Cell Properties
Changes a specific cell's size, alignment, or you can add styles.

Cell Merge
Allows you to put content in multiple cells. For instance if you have a header that you need to center over three columns, you would merge the three cells together.

Table Modifications
You can insert and delete columns, rows or cells.

Insert Table
Using the insert table button you can choose the number of rows and columns and the width of the table. You can also configure a default alignment, border, cell spacing and cell padding.

Insert Character
Insert special characters into the content that are not typically available on standard keyboards.

Remove Formatting
Highlight or select the content area you wish to clean, and click the Format Scrubber menu button. This button removes any text formatting (in case you need to clean the text and reapply your formatting). Very useful when copying and pasting content from other Websites.

Cleanup
Highlight the content area you wish to clean, and click the MS Word Format Scrubber menu button. Microsoft Office applications such as Word and Excel add HTML formatting tags (you can see them in the content) that mess up the formatting of Pages. This button removes these formatting tags.

Search
Search the content for a keyword.

Search and Replace
Search the content for a keyword and then replace it with another.

Undo
Undo the last modification within the Window. NOTE: Once you "Save" the content, the content changes cannot be undone.

Redo
Redo the last Undo within the Window. NOTE: Once you "Save" the content, the content changes cannot be redone.

Full Screen Mode
Enlarge/reduce the Rich-text Editing area to fill the browser window.

HTML Code View Mode
View the HTML code that is producing the Page Region. TIP: If you have basic knowledge of HTML, you will find this mode useful to add and modify more complex HTML tags.

## Adding Custom Code

The primary function of the Rich-text Editor is to contain content (text and grahics) and hyperlinks, but most javascript and even iframes are allowed by the Rich-text Editor. However, to prevent you website from being hacked, other code is not allowed and will be removed automatically when the Rich-text Editor is closed and saves content. If you are curious as to what code is allowed, we recommend you test this by adding your code and saving. Then reopen the Rich-text Editor and inspect your code to see if it remained intact.

Also, you cannot run PHP code from within the Rich-text Editor, nor can you embed other system tags or regions within the Rich-text Editor.

## Creating Dialog Windows

You can create dialog windows that pop up and float on top of your pages. This allows you to add content to a page without sacrificing screen real estate.

To create a dialog window, first, insert a link and then enter a Link URL or select a Page or File for the content that you want to appear in the dialog window. This is a fall-back link in case the Visitor does not have JavaScript enabled. This is important for search engine optimization. If you do not care about a fall-back link, then you may enter "#" for the Link URL. Second, add the following code to the onclick field under the Events tab.

software.open_dialog({url: '{path}pages/example?edit=no', width: 700, height: 600, modal: true, title: 'Title Goes Here'}); return false;

Where:
url: should be set to something like {path}pages/example or http://www.example.com. (Please note that you should actually enter "{path}". The software will replace it with the correct path automatically, so we recommend that you don't enter your actual path.) The ?edit=no parameter on the end of the url is optional, and will prevent the control panel itself from being displayed inside the dialog window when it is opened (if a Site Editor is logged in when viewing the dialog window.)
width: width of the dialog window. You may omit this property in order to use the default value, which is 75% of the browser width. Also, this property will be ignored and the default value will always be used when a Visitor is in mobile mode.
height: height of the dialog window. You may omit this property in order to use the default value, which is 75% of the browser height. Also, this property will be ignored and the default value will always be used when a Visitor is in mobile mode.
modal: A value of "true" will shade the rest of the screen behind the modal window and prevent the Visitor from interacting with the rest of the screen while the dialog window is open. You may enter "false" for a standard dialog window. The default is "true".
title: The title to be displayed in the title bar at the top of the dialog window. This is blank by default.
return false; Be sure to include this at the end so the browser will understand that a dialog window is being opened for the link, and that the link should not be opened in the parent window.