Rich Text Editor

The Rich Text Editor element (RTE) is essentially a miniature word processor for building web pages. Most functions of the RTE will be obvious to even the most casual user of word processors such as Word or WordPad. This page covers functions of the RTE that require a bit of explanation and includes a list of useful keyboard shortcuts.

Functions of the Rich Text Editor

RTEToolbar.png
 

Note: Safari 4 and 5.0 users will see an older version of the RTE with different icons, but most of the functionality is the same.

Embed Video

Use this button to embed videos from sites like YouTube and Khan Academy. Simply paste the web address (URL) for the video.

Source

Use this button to toggle between the WYSIWYG ("what you see is what you get") and source code modes. Source code mode shows the HMTL behind the editor and is intended for advanced users only. Please note that HTML not strictly support by the RTE will be stripped out.

Styles

Using this drop-down menu, highlighted text can be formatted in one of three predefined "block styles," including: Secondary Header, Subheader, or PreFormatted Text. Text can also be formatting in one of three "inline styles," including Yellow Marker (i.e. highlighter), Green Marker, and Big.

Optional Styles

Use this drop-down menu to choose preset styles based on the Quicklinks or three other container designs.

Special Characters

When symbols/special or accented characters are required, use this button on the toolbar. Using other techniques to enter symbols such as © or accented characters such as é are unreliable.

Links

To create a link, first highlight the linking text or select an image by clicking it once, then click the Link button on the toolbar. The pop-up window allows you to link to other pages on the site, a URL of your choosing, any item in any of your lockers, or any staff member’s personal page. You can also create mailto links using this tool.

You can have the link open in a new window if you wish. The Open Link in New Window checkbox is on the WWW tab.

PictureSettings.png
Insert Image

Add images from your computer, locker, or image albums to your pages using this tool. After selecting your image, the preview window gives you an idea of how your image will look on your page. By default the image will size to 100% of the column width. Adjust the size of your image by changing either the Width or Height – the other adjusts automatically to maintain the correct aspect ratio of your image. Use the Rotate button to fix orientation issues. The Align drop-down menu determines the placement of the image and wraps the text around the image.

Table Editor

Click the Table button on the toolbar. Choose the number of rows and columns, define whether you want a border and choose a width or height for your table cells – though this can expand as you type more information in the cell. 

Several other settings, such as table alignment, are also available.

After adding your table, right clicking over the table will bring up a contextual menu where you can access the more advanced settings for table properties.

table_properties.png

Anchors

Use anchors to link to specific areas of a page.

To create an anchor:

  1. Highlight the text to be used as the anchor or click to place the cursor where you want the anchor.
  2. Click the anchor button on the RTE toolbar (the icon is a flag).
  3. Assign a name to the anchor (no spaces or symbols other than dash or underscore).

To link to an anchor on the same page:

  1. Highlight the text to be used as the link.
  2. Click the Hyperlink button on the RTE toolbar.
  3. Click the WWW tab in the pop up window.
  4. Enter a pound sign (#) followed by the name of the anchor.

To link to an anchor on a different page:

  1. Highlight the text to be used as the link.
  2. Click the Hyperlink button on the RTE toolbar.
  3. Click the Site Map tab in the pop up window.
  4. Select the destination page by clicking the page name.
  5. Click the Source button on the RTE toolbar.
  6. Edit the link you just created by adding a pound sign and the anchor name to the end of the URL (e.g. #anchor_name).

Maximize Editor Size

When working on a complex page click this button on the toolbar to make the editor fill the browser window. Click the button a second time to return to the normal size.

Keyboard Shortcuts

CTRL+A highlights the whole editing area
CTRL+B changes your font to bold
CTRL+C copies the highlighted area to the clipboard
CTRL+I changes your font to italic
CTRL+L opens the Link window
CTRL+U changes your font to underlined
CTRL+V pastes the data from the clipboard
CTRL+X cuts the highlighted area
CTRL+Y starts the redo function
CTRL+Z starts the undo function
CTRL+ALT+ENTER maximizes editor window
CTRL+TAB shows the source code (for advanced users)
SHIFT+ENTER for a line break (single spacing)