Work with the Text Editor

Tags: educator how-to

Add Text Content

This video will take you through adding text (and images!) to your course:

1. Under Add New Component, select Text.

2. Select the template.

   The rest of these instructions assume that you selected Text, which creates an empty Text component with the visual editor selected.

   An empty Text component appears at the bottom of the unit, and the Text component opens in the visual editor.

3. Enter and format your content. You can review the HTML markup.

4. To enter a display name for the component, select the Pencil icon next to the title in the top left corner of the visual editor. Changing the display name from it’s default value to a unique, descriptive display name can help you and your learners identify course content quickly and accurately. If no title is present, the platform shows “Text” as the name of the component when in Studio.

5. Select Save.

When you use the visual editor, you can also perform the following tasks.

• Add a Link in a Text Component

• Add an Image to a Text Component

• Import LaTeX Code

Add an Image to a Text Component

When you use the Visual Editor, you can add any image from your computer to a Text component. You can see a preview of the image before you add it to the component.

Note

• Before you add an image, make sure you obtain copyright permissions for images you use in your course, and cite sources appropriately.

• To add effective alternative text for images, review Use Best Practices for Describing Images.

• You can only add one image at one time.

• Each individual image file must be smaller than 10 MB.

To add an image to a Text component, you can use one of the following procedures.

• Locate an image by using the Browse Your Computer option in the Add Image dialog box.

• Select an image you have previously uploaded.

Locate an Image on Your Computer

1. In the Text component, position the cursor where you want to add an image, and then select the image icon on the toolbar.

2. In the Add an Image dialog box, Upload a New Image (10 MB max).

3. In the dialog box that opens, locate the file you want to add, and then select Open, or locate the image in the Image Gallery, and then select Next.

   As soon as your image is selected, the Image Settings dialog box opens.

4. In the Edit Image Settings dialog box, add an image description.

   • In the Alt Text field, enter alternative text for the image. This text becomes the value of the alt attribute in HTML and is required for your course to be fully accessible. For more information, see Use Best Practices for Describing Images.

   • If your image is a decorative image that does not convey important information, select the This image is decorative (no alt text required) checkbox.

5. (optional) Specify the width and height of your image. For more information, see Change the Image Size.

6. Select Save.

7. Save the Text component and test the image.

Select a Previously Uploaded Image

1. When you upload an image, the image automatically becomes available in a gallery list that opens when you add an image to a Text component.

2. In the Text component, position the cursor where you want to add an image, and then select the image icon on the toolbar.

3. In the Add an Image dialog box, locate the image in the gallery list, and then select Next. There are sort and filter options available for the gallery list to make it easy to find the image you need.

4. In the Image Settings dialog box, complete one of the following options.

   • In the Alt Text field, enter alternative text for the image. This text becomes the value of the alt attribute in HTML and is required for your course to be fully accessible. For more information, see Use Best Practices for Describing Images.

   • If your image is a decorative image that does not convey important information, select the This image is decorative (no alt text required) checkbox.

5. (optional) Specify the width and height of your image. For more information, see Change the Image Size.

6. Select Save.

7. Save the Text component and test the image.

Format an Image in a Text Component

You have several options for formatting an image in a Text component.

Align an Image

To align your image to the right, the left, or the center, follow these steps.

1. In the Text component, select the image.

2. On the toolbar, select the left align, right align, or center icon.

Change the Image Size

To change the size of your image, follow these steps.

1. In the Text component, select the image you want to edit, and then select the Contextual image icon that appears above the image.

2. In the Image Settings dialog box, locate Image Dimensions, and then enter the values you want for the Width and Height options.

   Note

   To make sure that the image keeps the same proportions when you change the image size, make sure that Lock proportions is selected, and enter a number in only the Width field or the Height field. After you tab or click outside that field, the number in the other field changes to a value that maintains the image proportions.

3. Select Save.

If you want to change the image back to the original size, clear the values in the Width and Height fields.

Add a Link in a Text Component

When you use the visual editor, to add a link to a website, course unit, or file in a Text component, you work with the Insert link dialog box.

For more information, see the following tasks.

• Add a Link to a Website

• Add a Link to a Course Unit

• Add a Link to a File

Add a Link to a Website

1. Select the text that you want to use as the link text.

2. Select the link icon in the toolbar.

3. In the Insert/Edit link dialog box, enter the URL of the website that is the destination for your link in the URL field.

4. If you want the link to open in a new window, select the dropdown arrow next to the Open Link In… field, and then select New Window. If not, you can leave the default value.

5. Select OK.

6. Save the Text component.

7. To test the link, select View Live Version or Preview. When the unit opens in the LMS, select the linked text and verify that the correct website opens.

Add a Link to a Course Unit

Note

When you create a link to another component, the unit of that destination component must be published for the link to work.

1. Obtain the location ID of the unit you want to link to.

   1. In Studio, open the page for the unit that you want to link to in Studio, and then locate Unit Location in the right pane.

   2. Under Unit Location, select and copy the alphanumeric text in the Location ID field.

      

2. Open the Text component where you want to add the link.

3. Select the text that you want to make into the link.

4. Select the link icon in the toolbar.

5. In the Insert link dialog box, enter a value that resembles the following value in the URL field.

   /jump_to_id/<location ID>

   Make sure to replace <location ID> (including the brackets) with the location ID that you copied in step 1, and make sure that you include both forward slashes (/).

Caution

Ensure you use /jump_to_id/<location ID> as the URL value. Do not use the URL of the unit that you see in the browser address bar. If you do not use /jump_to_id/<location ID>, the link will be broken if you export and then import the course.

1. If you want the link to open in a new window, select the dropdown arrow next to the Open Link In… field, and then select New Window. If not, you can leave the default value.

2. Select Insert.

3. Save the Text component and test the link.

Add a Link to a File

Tip

When you add links to files, open the Text component and the Files & Uploads page in separate browser windows. You can then more quickly copy file URLs.

You can add a link in a Text component to any file that is uploaded for the course. For more information about uploading files, see Add Course Files.

Note

Do not use this method to add images to Text components. Instead, use the method in Add an Image to a Text Component.

1. On the Files & Uploads page, locate the file that you want, and then select Studio in the Copy URLs column.

Note

You must use the Studio URL to link to the file, not the Web URL. For more information, see Add Course Files.

1. In the Text component where you want to add the link, select the text that you want to make into the link.

2. In the toolbar, select the link icon.

3. In the Insert link dialog box, paste the Studio URL for the file in the URL field. For example, the URL might resemble the following URL.

   /static/FileName.pdf

   Make sure that you include both forward slashes (/).

4. (optional) If you want the link to open in a new window, select the dropdown arrow next to the Open Link In… field, and then select New Window. If not, you can leave the default value.

5. Select OK.

6. Save the Text component and test the link.

Paste without Formatting in a Text Component

Many course authoring teams rely on copying and pasting content from documents such as Google docs or Microsoft Word. Correct formatting in Studio and the LMS can be most easily realized through Power Paste.

When you copy and paste content into the Text Editor, you will receive a “Paste Formatting Options” popup on the page. If you choose “Remove formatting”, then the bullets will be correctly aligned with text in both Studio and the LMS. If you select “Keep formatting”, then the formatting is unchanged and bullets and text will not be aligned in Studio or the LMS.

Below is a bulleted list example, a type of formatting that commonly needs Power Paste. If you select “Keep formatting”, this is what Studio and LMS will show:

However, if you select “Remove formatting”, this is what Studio and LMS will show:

Text Component Templates

When you create a Text component, you select from a list of templates and editor types, including the following:

• Text

• Announcement

• IFrame Tool

• Raw HTML

The Text template loads the Visual Editor with no pre-canned text.

The Announcement and the IFrame Tool templates load the Visual Editor with pre-canned text that instructs the user how to format Announcements, or how to use IFrames.

The Raw HTML editor type uses the raw HTML editor by default. All other options use the visual editor by default. There is no way to switch between Visual and Raw editor types once selected.

See also

About Text Components (concept)

Work with HTML Code in the Text Component (how-to)

Manage the Full Screen Image Tool (how-to)

Work with LaTeX Code (how-to)

Maintenance chart

Review Date	Working Group Reviewer	Release	Test situation

---

Feedback