This Support document reviews a number of the features of the "Rich Text Editor" that allows you to edit the Text/HTML modules in your site. Once you've entered the editor, the experience is very similar to using Microsoft Word. So, if you have experience creating and editing documents in Microsoft Word, this editor will seem very familiar. Rather than reviewing the editing features common between Word and this editor, we've focused on those features which are distinctly part of the content management system, or web-related.

To begin editing your site, log in and select the Edit mode in the Control Panel.

Browse to the page containing the Text/HTML module you wish to edit, and find the Edit Text link (shown above), located in the lower left corner of the module. Click this link.

You will be taken to the Edit Text/HTML page, shown above. A few items are notable about this page:

• Basic Text Box vs. Rich Text Editor. The Basic Text Box offers no formatting controls or toolbar, whereas the Rich Text editor offers tools similar to Microsoft Word.
• The Editor Window. The region of the screen where you actually edit the content of the Text/HTML module.
• Search Summary. A summary of the page that will appear as the search result synopsis, if this page is returned as a result in a user search of the site.

When you're finished editing the module, click the Update button at the bottom of the page to save your work. You may hit Cancel to avoid saving changes, or Preview to get a sneak peek at how the page will look when finished.

Full Screen Mode
The editor has the ability to switch to full screen mode to make editing the module even more word-processor like.

To enter full screen mode, click the "Maximize" button, shown highlighted above.

As shown in the illustration above, the editor will now fill your browser window. You may now edit freely. When you're ready to save your work, click the Maximize button again (circled above); the editor will return to normal size and you can hit the Update button.

Pasting Text from Other Programs
If you plan to copy and paste text from another program, such as Microsoft Word, caution is necessary! When text is copied from Word, your computer will try to preserve all the formatting when you paste the text into the editor. While this may seem to be a benefit, it is, in reality, a problem. It is always best to format plain text inside the editor, not copy formatted text from another program. Ignoring this advice will cause you grief when you later want to edit the pasted formatted text. This section shows how you can easily avoid any problems.

First, select and copy your source text. Then, instead of clicking the standard Paste button (or using Ctrl-V, the keyboard shortcut), click one of the two special paste buttons highlighted in the illustration above. The left button simply pastes the text as "plain text" (which is unformatted, perfect in most cases!). Similarly, the right button is the Paste From Word button, which offers you an opportunity to "clean" the text. In most cases, the Paste as plain text option will be sufficient.

If you choose the Paste from Word option, the window above appears on your screen. From here, you can paste your text, choose deformatting options and click OK to paste your text.

Making a Hyperlink
Hyperlinks are clickable text or images that take you to another location on the web. The content editor makes it fairly easily to create a variety of hyperlinks.

Begin by highlighting some text or an image, then click the Insert/Edit Link button, highlighted above (on the left side of the box). To remove a hyperlink, select linked text or a linked image, and click the Unlink button, highlighted on the right above.

The Link window appears, as shown above. You have the following options:

• Link Type. There are three types of links you can create:
  • URL. Any web address. This is the "standard" hyperlink.
  • Link to anchor in the text. Link to a location elsewhere on the same page. Anchors are described in more detail below.
  • E-Mail. A link to an email address.
• Protocol. Typically, just the standard http://, but there are several options:
  • http://. A standard hyperlink.
  • https://. A secure hyperlink.
  • ftp://. A link to a file in an FTP site, typical for certain types of downloadable files.
  • news://. General a news feed.
  • <other>. Some other type of link, not generally recommended.
• URL. The actual address, such as www.microsoft.com.

Just below the Title of the Link window, there are three tabs. So far, we've focused on the Link Info tab, but we need to briefly discuss the contents of the Target tab, shown above.

The "target" is where the hyperlink will open. Typically, you will want to leave the default (e.g., "<not set>"). This will open your hyperlinks in the same window. However, if you would like to open your link in a new window (or new tab, in some cases), you would choose the New Window option from the Target menu. Other options are also available, but are outside the scope of this document.

Back in the Link Info tab, shown above, we've seen how to create a variety of hyperlinks, but what if you just want to link to another page or file on your site? It's possible to browse and choose it, rather than have to type the link into the URL box above. To do this, click the Browse Server button, circled in the illustration.

The Link Gallery window appears. From here, you have three options:

• URL. A standard hyperlink to any location on the web. Same as we've seen already.
• Page. A list of all the pages on your site. Discussed in more detail below.
• File. A list of all the files on your site. Discussed in more detail below.

If you choose the Page option, as shown above, the window updates with a new field called, "Select A Web Page From Your Site." From this box, you can choose any page on your site. Then click the "Use selected link" option to select the page and return to the editor. (Technically, you will first return to the Link window, with the URL now filled in by the page you selected.)

If you choose the File option, as shown above, you can choose any folder ("File Location") in your site, and then and file ("File Name") in that folder. This option is useful to link to files such as Adobe Acrobat (PDF) documents.

If the file you want to link isn't in your website yet, you can upload it from here. Choose the Upload New File link just below the File Name box. Then you can browse for a new file, shown above. Browse your computer for the file, select it and then click the Upload Selected File link.

Note: When you upload files into your site, you should place them in the appropriate folder of your site (a PDF document, for example, would probably go in the Docs folder shown in the File Location above). Tidiness with your web files is crucial for easy longterm maintenance.

To make a link to an email address, choose E-Mail from the Link Type field in the Link window, shown above. You can then fill in three options:

• E-Mail Address. The email address you want the link to connect to.
• Message Subject. You may suggest a subject line for the email that the user will send to the address above.
• Message Body. You may suggest the body of the message that the user will send to the address above.

Anchors in the Text
Anchors are like a bookmark that is placed partway down a webpage. These anchors can then be linked to. When the user clicks the link, they are taken to the page containing the anchor, and then scrolled down the page to the position of the anchor.

To link to an anchor, you must first make one in your document. To do this, place your cursor at the location in the document where you wish the anchor to be. Then click the Anchor button, highlighted above.

The Anchor Properties window (shown above) will appear. Enter a name for your anchor (no spaces in the name, please!) and hit OK. Your anchor is now available for the next step.

To link to the anchor, highlight the text or image you want to link, then choose the Hyperlink button. The Link window appears, as shown above. Choose the "Link to an anchor in the text" Link Type so that you may choose the anchor you created.

Inserting Pictures
Web pages often contain one or more pictures. This section shows you how to add images to your module.

Highlighted in the illustration above is the Insert/Edit Image button. Place your cursor at the location where you wish to insert your image, and click this button. To edit an existing image, select it first, then choose the Insert/Edit Image button.

The Image Properties window will appear, as shown above. The options on this panel are:

• URL. The path to the image. This path can be for an image on your site or to an image hosted elsewhere.
• Alternative Text. Text that describes the image. Always enter text here for accessibility reasons.
• Width. The width of the image, in pixels.
• Height. The height of the image, in pixels.
• Lock Ratio icon. The small padlock to the right of the Width/Height options. This maintains the proportion of width to height, so that if you adjust either, the other will automatically adjust proportionally. This keeps your picture from becoming distorted. Click the padlock to "unlock" the constrained proportions, if you are purposely stretching the photo in one dimension.
• Reset Size icon. A circular arrow next to the padlock. This resets the image back to its original size.
• Border. The wdth of the border in pixels. The border is an optional line, or frame, that goes all the way around your image. If your image is hyperlinked, this border will be the hyperlink color, otherwise the border is typically black.
• HSpace. A horizontal offset on both sides of the image. It's useful if text flows next to the image, so that the text will not touch the image.
• VSPace. A vertical offset on both top and bottom of the image. It's useful if text flows next to the image, so that the text will not touch the image.
• Align. An assortment of image alignment possibilities. You can align the image, for instance, to float to the left or right side of the module with the text wrapping around it.
• Preview. The preview shows you a sample of how your image will look with the option you're chosen once embedded into the module.

To insert an image that's already stored in your site, or to insert a new image you haven't uploaded yet, click the Browse Server button, as highlighted above.

The Image Gallery (shown above) will then appear. This window displays subfolders and images in the current folder. When you scroll through and find the image you're seeking, you simply click on it. We will now explore the other options you have with the Image Gallery.

When you first open the Image Gallery, the current folder will be the root of your website. (The root folder of your website isn't a good place to put images; they clutter up the folder and make site maintenance more difficult.) Inside this folder, you should see one or more subfolders. Pictures should be inside, and uploaded to, the Images folder (highlighted above). Click this folder to browse the images in your site.

If you click a folder to browse it, but don't find what you're looking for, you can click the Go Up icon, as highlighted above. This lets you browse the folder one level higher in the hierarchy.

The region of the Image Gallery highlighted above shows you (1) the current folder you're browsing and (2) a field to enter a new folder name into. Use this tool to create a new folder inside the current folder. Don't use spaces in your folder names. Click the Create button to actual create the folder.

To upload a new image to your website, click the Browse button (highlighted above). Find the file on your computer and select it. Then, click the Upload New File link to copy the file to your site. You can then browse through the folder and select the new file to use in your module.

Now that we've explored the Image Gallery thoroughly, we need to review how to hyperlink the image.

Back in the Image Properties dialog, there is a Link tab (shown above). From this tab you may hyperlink the image. Enter the URL of the webpage to which you want to link, or use the Browse Server button to link to a page or file in your site. You can also choose a Target, which is where the new hyperlink will open. Shown highlighted above is the New Window option (which makes the hyperlink pop up in a new browser window), but you may wish to leave it set to the default, which is <not set>; this option opens the link in the same browser window.

Insert a Table
Tables are useful for displaying tabular data. The editor makes it simple to do this.

 To insert a table, click the Insert/Edit button (highlighted above) on the tool bar.

The Table Properties window appears, as shown above. Use this window to configure your table. The options are as follows:

• Rows. The number of rows in your table.
• Columns. The number of columns in your table.
• Border Size. The pixel width of the table borders. Set to 0 for no borders.
• Alignment. Choose the alignment for the table itself (not the cells within). The default places the table on your page with text staying above and below the table. You can align your table left or right and other text on the page can then flow around the table.
• Width. The width of your table in pixels or percentage of screen space. You may leave blank if you don't wish to specify.
• Height. The height of your table in pixels or percentage of screen space. You may leave blank if you don't wish to specify.
• Cell Spacing. The space, in pixels, between your cells.
• Cell Padding. The space (like a margin), in pixels, inside every cell.
• Caption. A text label that will appear above your table.
• Summary. A description of the table data. It's hidden in the source code.

If you right click the table, a context menu of table options appears, as shown above. The menu lets you do various things, such as insert/delete rows and columns, merge and split cells, etc. From the Cell submenu, you may also choose the Cell Properties option to configure individual cells.

Each cell in the table has an assortment of properties that can individually be configured. After selecting Cell Properties from the context menu, the above window appears. Your options are as follows:

• Width. The width of the current cell in pixels or percentage of table space.
• Height. The height, in pixels, of the current cell.
• Word Wrap. Choose whether or not to allow text to wrap (multiple lines of text iniside a single cell) within the cell.
• Horizontal Alignment. Choose how to horizontally align the text within the cell.
• Vertical Alignment. Choose the vertical alignment of the text within the cell.
• Rows Span. A cell can span more than a single row in the table; choose how many rows this cell will "merge together."
• Columns Span. A cell can also span more than a single column; choose how many columns this cell will "merge together."
• Background Color. The color behind the cell. Note that the textbox lets you enter a color with your keyboard. Colors are entered in the form of a Hexadecimal number, which looks like: "#FF0000" (red).
• Border Color. The color of the cell's border. Again, you can manually enter the color.

For both the background and border colors, you can click the Select... button to choose a color instead of entering one manually.

After clicking the Select... button in the Cell Properties dialog box, the Select Color window appears, as shown above. From here, you can click any of the colors you see in the grid. If you are seeking a specific color not in the grid, enter it into the highlighted box. Note that the color must be entered in hexadecimal, as shown above. The color code given is for red.

Inserting Special Characters
Special characters are the various symbols that you can't get by pressing a single key on your keyboard. Examples are the copyright symbol (©), the British Pound (£), or an accented letter (é).

Place your cursor where you would like to insert a special character. Then click the Insert Special Character button on the toolbar (highlighted above).

The Select Special Character window opens, as shown above. You  then find the symbol you're seeking and select it with your mouse. The symbol is placed in your module.

Viewing the HTML Source Code
The editor allows you to create the document like a word processor, but what it's really doing is automatically coding an HTML document behind the scenes. HTML is the webpage description language—it tells your web browser how to draw up the page you're viewing.

If you need to edit the HTML source, click the Source button on the toolbar (highlighted above).

The editor will then display the source code. Note that most of the toolbar buttons are now ghosted and unavailable; this is because in the source mode you directly code the HTML that controls the formatting.

To get out of Source mode, click the Source button again.