Rich Text Editor Tools
Return to Guidelines for Editing the Web
Tools in the Rich Text Editor
Click on a tool below to view the definition and use of that tool.
 |
 |
 |
 |
 |
 |
|||||||||||||||
 |
 |
 |
 |
 |
 |
 |
||||||||||||||
 |
 |
 |
 |
 |
||||||||||||||||
 |
 |
 |
||||||||||||||||||
Tools in the First Row of the Editor
Source: Allows you to edit directly in the HTML code (as though you were using the Plain Text Editor. Edit in this view only if you feel comfortable working with HTML. To return to the rich text view, click on the "Source" button again.
Cut, Copy, and Paste
From left: Cut, Copy, Paste, Paste as Plain Text, Paste from Word
These tools work almost exactly like they do in Microsoft Word. The keyboard shortcuts for Cut (on a PC, Ctrl+X), Copy (Ctrl+C), and Paste (Ctrl+V) should work in your browser.
If pasting text from Microsoft Word or that has been formatted, use either the "Paste as Plain Text" or "Paste from Word" tools. The former will strip the formatting from your text, and the latter will (attempt to) preserve the formatting.
Undo and Redo: These tools work just like they do in Microsoft Word. The keyboard shortcuts for Undo (Ctrl+Z) and Redo (Shift+Ctrl+Z) should work in your browser.
Find and Replace: These tools also work just like in Microsoft Word. They are tabs on the same window, so you can click either button to access both tools. The keyboard shortcuts for these tools will not work in your browser.
Select All: This tool works just like in MS Word. The keyboard shortcut for this tool (Ctrl+A) should work in your browser.
Remove Formatting: This tool removes the formatting from highlighted text.
Tools in the Second Row of the Editor
Text Formatting Tools
From left: Bold, Italics, Underline, Strike through, Subscript, Superscript
These tools also work just like in MS Word.
The keyboard shortcuts for Bold (Ctrl+B), Italics (Ctrl+I), and Underline (Ctrl+U) should work in your browser. If you use the shortcuts on a highlighted selection, that selection will be formatted. If you use a shortcut without any text highlighted, all following text that you type after using the shortcut will be formatted.
Numbered and Bulleted Lists: These tools work just as they do in MS Word. As in Word, do not indent or manually create the lists; rather, use these tools.
To start a list, click on the numbered or bulleted list icon and type in your content. Press the Enter key to go to the next number or bullet. To finish the list, either press the Enter key twice, or click on the list icon again. If you have already typed in the text you want to use in your list, highlight it, and click on one of the list icons.
Indenting Text: To move your text to the right (increase indent), highlight it, and click on the icon with the arrow pointing to the right. To decrease the indent, click on the icon with the left arrow.
Note: You cannot indent the first line of a paragraph as you would in MS Word and other programs. You can only indent the entire paragraph. Websites use spacing to indicate paragraph breaks. Do not manually create a first line indentation.
Blockquote: To create a "blockquote" on a page, highlight the selection you would like and click on the blockquote tool.
This is what a blockquote looks like on the HCDE website. As you can see, the only difference in format is the indentation, so you will want to also italicize the text using the Italics tool.
Justification Tools
From left: Left Justify, Center Justify, Right Justify
The default setting on the HCDE website is left justification. Page titles are left justified, as is body text. The center or right justify, use the tools accordingly by highlighting your selection and clicking the appropriate tool (these work just as they do in MS Word). Use center and right justification sparingly.
Adding, Editing, and Removing Links: To add or edit a hyperlink, use the tool on the left (a globe with a chain link). To remove a hyperlink, use the tool on the right (a globe with a broken chain link).
Adding a link: Highlight the text that will be the link and click the insert/edit link button.
You have a number of options regarding how you want to insert a link. For more detailed instructions about inserting links (including images and links to other file types), click here.
Inserting and Editing an Anchor: Anchors allow you to pinpoint a specific location on your website to link to from within the same page (or from another page). Put your cursor where you want the anchor to be and click on the anchor icon. Give your anchor a name without spaces that is relevant to the content. The anchor should be at the top of the content you want to link to directly.
Note: Do not highlight a selection before clicking the anchor button or the anchor will appear to be a broken link on the page.
Tools in the Third Row of the Editor
Inserting and Editing an Image: Clicking on this tool will bring up the "Image Properties" box. Some notes about image use:
- Be sure to review the Image Use Guidelines before uploading images.
- Always use an "alt" tag with images.
- Do not link to external images on other websites or use images without permission.
- Always credit images that are being used with someone else's permission. Credits should be in the "alt" tag but can also be below the image.
- Do not drastically resize the images in the web editor. Resize them in Photoshop before uploading them.
- Do not use images that are wider than 500 pixels.
- Use PNG image files for images made up mostly of text or for logos. (Use PNG-24 file formats for images that need to have transparency.) Use JPG files for photographs (including photographs of text) and artwork.
For more detailed instructions about inserting images, click here.
Inserting and Editing Flash: Do not use this tool without consulting the Communications Manager.
Inserting and Editing Tables: Tables are a simple way to align text in a chart or list. Do not create tables that are wider than 500 pixels. A good way to start your table is with these settings:
- Set Table Width to "100 Percent."
- Set Border Size to "0."
- Set Cell Spacing to "5."
- Set Cell Padding to "5."
For more detailed instructions about inserting tables, click here.
Inserting a Horizontal Line: Inserting a horizontal line creates a visible break between sections of website.
Note: If you have any indentations set when you insert a horizontal line, the line will obey the settings and appear off-center.
Inserting Special Characters: To insert special characters, select this tool, which will bring up the "Select Special Character" window. In addition to "normal" characters, characters with accent marks and other characters are included:
Click on the character you want, and it will be inserted where your cursor was on the page.
Tools in the Fourth Row of the Editor
Formatting Text Class: Text class works the same way that classes do in MS Word. The default setting is "Normal," which you should not change unless using headings and sub-headings. The text classes are pre-formatted in the website's Cascading Style Sheets (CSS).
Formatting Text Size: Only use the text size tool for reducing the size of the text. If you want to increase the size of the text, use the Heading classes in the "Format" menu. Reducing text size is useful for adding bylines, captions, disclaimers, etc. Do not change the default size of the text for normal body content, however.
Show Blocks: This tool inserts visible breaks in the Rich Text Editor so that you can see where the breaks in the page are and what types of blocks are being used. These blocks are not visible on the published page and are simply for your reference.
This is a useful tool for understanding the layout of a page, especially if the page breaks are formatting strangely.