Information technology tools and resources at the UW
Working With Rich Text in CommonView
CommonView contains 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, and creating numbered and bulleted lists, the text editor enables you add links, images, tables and more to your content.
Using the Rich 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
To create a link, follow these steps:
- Type or copy and paste some text into the text area.
- Click and drag to highlight the text you want to become the link.
- Click Insert Link. The “Insert Link” dialog box will appear.
- Select the type of link you want to create from the “Link Type” menu. You can choose URL (the default) or Email.
- Type the URL of the Web site or the email address to which you want to link.
When linking to an email address, you can also add a subject and message that will be automatically generated whenever anyone uses the link.
- If you want the link to open in a new browser window, click on the Target tab and select the New window option from the menu.
- Click OK. To test your link, you will need to save your content.
To remove a link, follow these steps:
- Click to position the cursor within the link text.
- Click Unlink.
- The link will be 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:
- Position the cursor where you would like the image to appear.
- Click Insert Image. The “Insert Image” dialog box will appear.
- To use an image from your computer, click Browse and select the image that you want to upload from your computer. Click Upload image to upload the image. You will automatically move to the Image Info tab. To use an image that is located on the Web, click the Image Info tab and enter the image URL into the URL box.
- Enter “Alternative text” for accessibility purposes in the space provided. Alternate text for images can be announced by screen readers used by the visually impaired.
- Enter the image parameters. A preview of the image and text is located to the right.
- Click OK. The dialog box will close, and your image will appear in the text editor.
Embed YouTube Video
To include a YouTube video in your content using the text editor, follow these steps:
- Go to YouTube, locate a video, and copy the content of the “Embed” option.
- Click Insert YouTube Video. A dialog box will appear.
- Paste the YouTube embed code for the video in the space provided.
- Click OK to include the video.
Add a Table
You insert a table into your content, follow these steps:
- Position the cursor to where you would like the table to appear.
- Click Insert
Table. The “Insert Table” dialog box will appear.
- Enter the number of rows and columns for your table in the spaces provided.
- To adjust the display of the table, you can also specify the amount of cell spacing (between cells) and cell padding (around text), select the width and height, set the alignment of the table, the placement of headers, and the border size.
- Add a caption and summary of the table by typing in the respective boxes. The Caption will be displayed as the title of the table. Describe the purpose and structure of the table in the Summary to improve accessibility, this text will not be displayed.
- Click OK. The dialog box will close, and your table will appear in the text editor.
- Click in a table cell to position your cursor, and then enter your data.
You can also click and drag the handles around the table (once selected) to change its dimensions.
Insert Special Characters
Insert characters such as symbols, fractions, and accents into your content by following these steps:
- Position the cursor where you would like the special character to appear.
- Click Insert Character. A menu displaying a table of special characters will appear.
- Hover the cursor over a character in the table to view a larger version of the symbol or character in the preview box to the right.
- Click the character to insert it in your content.
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 content:
- Position your cursor in the text area where you want the LaTeX content to appear.
- Click Add LaTeX.
- Enter LaTeX markup into the area provided.
- Click Preview to see what your LaTex image will look like.
- Enter alternative text for the resulting image for accessibility purposes.
Alternative text for images can be announced by screen readers used by the visually impaired and displayed by text-only browsers.
- Customize the appearance of the image by setting its alignment, padding, and border. Select the desired alignment for the image relative to text using the menu under Align. Adjust the amount of space (in pixels) around the image by entering a number in the box under Padding. You can also set the border thickness (in pixels) by entering a number in the box under Border.
- 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.
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, click Source. Click the source toggle again to return to the WYSIWYG (what you see is what you get) view of your content.