Rich Text Editor Help

Many Catalyst Web Tools, such as CommonView, WebQ, GoPost, and Collect It, provide a rich text editor that allows you to write and format content just as you would in a word processing program. In addition to applying common formatting, such as text size, color, weight, and alignment, or creating numbered and bulleted lists, the text editor enables you add links and images to your content.

To use the text editor, type or paste your content. Then, click and drag to select text, and use the toolbar to apply formatting.

Use these links to jump to step-by-step instructions for the less common features of the text editor:

Insert or remove a link | Insert an image
Embed YouTube video | Insert a table | Insert special characters
Use LaTeX | View or edit HTML code

Insert or Remove a Link

You can easily create a link to a Web page or any file or picture that is already stored on a Web server.

To create a link, follow these steps:

  1. StepsActions
  2. Type or copy and paste some text into the text area.
  3. Click and drag to highlight the text you want to become the link.
  4. Click Insert Link Insert Link. The "Insert Link" dialog box will appear.
  5. Select the type of link you want to create from the "Link Type" drop-down menu. You can choose URL (default) or email links.
  6. Type the URL of the Web site or the email address to which you want to link.
  7. If you want the link to open in a new browser window, select the Open in a new window option.
  8. Click OK. You will return to the text area with your link created. To test your link, you will need to preview your content.

To remove a link, follow these steps:

  1. StepsActions
  2. Click to position the cursor within the link text.
  3. Click Insert Link Insert Link. The "Insert Link" dialog box will appear.
  4. Click Remove link from text. You will return to the text area with the link removed.

Insert an Image

You can add an image from your computer or from the Web to your content with the text editor.

To add an image, follow these steps:

  1. StepsActions
  2. Position the cursor where you would like the image to appear.
  3. Click Insert Image Insert Image. The "Insert Image" dialog box will appear.
  4. To use an image from your local computer, click Browse. A dialog box will appear. Locate and select the image that you want to upload on your local computer.
  5. To use an image that is located on the Web or on a Web server, click Use an image from the Web. The form will toggle, and you can type or paste the image URL into the text box.
  6. Enter "Alt text" for accessibility purposes in the space provided. Alternate text for images is pronounced by screen readers used by the visually impaired.
  7. Select the desired alignment for the image relative to text from the icons located under "Text Flow." If you want, use the down and up arrows to select the Padding (the amount of white space) around the image. You can also select a Border from the drop-down menu to define the edge of your image, as well as the type and color of the border.
  8. Click OK. The dialog box will close, and your image will appear in the text editor.
  9. You can click and drag the handles around the image (that appear when it is selected) to change its dimensions.

Embed YouTube Video

To include a YouTube video in your content using the text editor, follow these steps:

  1. StepsActions
  2. Go to YouTube, locate a video, and copy the content of the "Embed" option.
  3. Click Insert YouTube Video Insert YouTube Video. A dialog box will appear.
  4. Paste the YouTube embed code for the video in the space provided.
  5. Click Preview to play your video and verify that it will be correctly embedded.
  6. Click OK to include the video, or click Cancel.

Add a Table

To insert a table into your content, follow these steps:

  1. StepsActions
  2. Position the cursor to where you would like the table to appear.
  3. Click Insert Table  Insert Table. The "Insert Table" dialog box will appear.
  4. Enter the number of rows and columns for your table in the spaces provided.
    You can also enter the amount of cell spacing (between cells) and cell padding (around text) that you want.
  5. You may also select the Alignment of the table, the amount of Padding, and the Border line type and color, if you choose to have one.
  6. Click OK. The dialog box will close, and your table will
    appear in the text editor.
  7. Click in a table cell to position your cursor, and then type your data.
    You can also click and drag the handles around the table (once selected)
    to change its dimensions.

Insert Special Characters

You can insert special characters such as symbols, fractions, or accents into your content. To insert special characters, follow these steps:

  1. StepsActions
  2. Position the cursor where you would like the special character to appear.
  3. Click Insert Character Insert Character. A menu displaying a table of special characters will appear.
  4. Hold the cursor over a character in the table to view a larger version of the symbol or character.
  5. Click the character to insert the selected character in your content.
  6. To exit without selecting a special character, click anywhere outside the character menu to close it.

Use LaTeX Typesetting

The text editor allows you to use the LaTeX typesetting system to create content that includes technical or scientific content. You enter the LaTeX markup, and then the text editor will convert it into an image and insert the image into your content. To modify your technical or scientific content, you can select the image and click the LaTeX icon again to modify the LaTeX markup and re-insert the modified image. To learn more about authoring with LaTeX, visit the LaTeX project Web site.

Follow these steps to add LaTeX to your text:

  1. StepsActions
  2. Position your cursor in the text area where you want the LaTeX content to appear.
  3. Click Insert LaTeX Add LaTeX. The "Insert LaTeX" dialog box will appear.
  4. Type or copy and paste LaTeX markup into the text area provided.
  5. Click Preview to see what your LaTex image will look like.
  6. Enter alternate text for the resulting image for accessibility purposes. Alternate text for images is pronounced by screen readers used by the visually impaired and displayed by text-only browsers.
  7. Select the desired alignment for the image relative to text from the icons located under "Text Flow." If you want, use the down and up arrows to select the Padding (the amount of white space) around the image. You can also select a Border from the drop-down menu to define the edge of your image, as well as the type and color of the border.
  8. Click OK to create and insert your LaTeX image.

To edit your LaTeX image, click once to select the image in the text area, and then click  Insert LaTeX. Follow the steps above.

To delete the LaTeX image, click once to select the image in the text area, and the press the Delete key.

View or Edit the HTML Source Code

The text editor automatically creates the HTML necessary to format your text. If you know HTML, you can directly enter or edit the HTML source code in the
text editor.

To view or edit the HTML code that is being created behind the scenes, click Edit HTML Code Toggle HTML source. Click the source toggle again to return to the WYSIWYG view of your content.

Last modified: November 10, 2014