Canvas Guides (English)Canvas GuidesCanvas Basics GuideRich Content Editor (RCE)How do I upload and embed an image in the Rich Content Editor?

How do I upload and embed an image in the Rich Content Editor?

You can embed images in the Rich Content Editor. Image files can be uploaded from your computer or added using a URL. You can also embed images from your course and user files.

Several features in Canvas support the Rich Content Editor, including Announcements, Assignments, Discussions, Pages, and Quizzes.

Notes:

00:07: How do I upload an embedded image in the rich content editor as a student? 00:12: Open the rich content editor when using one of the canvas features, which support the editor. 00:18: You can upload and embed an image by dragging and dropping from a web browser or 00:22: a file saved to your computer. If you drag and drop an image 00:26: from a web browser The Source URL for the image populates in the file 00:30: URL field in the image options. 00:34: You can upload and embed an image by copying and pasting it. 00:38: To copy an image to your clipboard right? Click the image and select copy. 00:43: You can paste it by right clicking into the Rich Text Editor and selecting paste or 00:47: using the keyboard shortcut Ctrl + V on a PC or command + V 00:51: on a Mac. 00:53: To upload an image from the toolbar click the image icon. 00:57: From the drop-down menu select the upload image option. 01:01: Alternatively, you can embed images from the menu bar. 01:04: Click the insert link navigate to view the image options, then 01:08: select the upload image option. 01:12: By default the image upload tool displays the computer tab click 01:16: or drag and drop an image file to the image uploader to upload a file from your 01:20: computer. 01:22: After uploading your file the uploader displays the image file name and 01:26: an image preview. To remove the image. 01:28: Click the delete icon. 01:31: To upload an image using a URL click the URL tab Enter 01:36: the URL in the file URL field 01:40: To add alt text to your image type an alternative text description or 01:44: text tags in the alt text field. 01:47: By default the alt text field displays the image file name. 01:51: Alt text is read by screen readers and it displays when an embedded image 01:55: cannot display. If the image is decorative and does not require, alt 01:59: text click the decorative image check box. 02:03: By default the embed image display option is selected for embedded 02:07: images. To display the image file link select the display 02:11: text link display option 4 the file link will 02:15: replace the image in the rich content editor. 02:19: To embed your selected image. Click the submit button. 02:23: View your uploaded image in the rich content editor. 02:25: You can also add alt text tags and manage the image display options. 02:31: To manage image options from an embedded image file. 02:33: Click the image then click the image options link. 02:37: You can manage display options for embedded images in the image options menu. 02:42: You can manage the image, alt text the image size and other display 02:46: options. To replace or update an image added via URL 02:51: enter an updated image URL in the file URL field. 02:55: Click the done button. 02:58: View the content created in the rich content editor. 03:02: This guide covered how to upload an embed an image in the rich content editor as 03:06: a student.

Open Rich Content Editor

Open Rich Content Editor

Open the Rich Content Editor when using one of the Canvas features which support the Editor.

Note: The Rich Content Editor supports keyboard shortcuts. To view a window with a list of keyboard navigation shortcuts, click the Keyboard icon or press Alt+F8 (on a PC keyboard) or Option+F8 (on a Mac keyboard) simultaneously on your keyboard.

Upload Image by Drag and Drop

Upload Image by Drag and Drop

You can upload and embed an image by dragging and dropping from a web browser or a file saved to your computer. If you drag and drop an image from a web browser, the source URL for the image populates in the File URL field in the Image Options.

Note: You can upload and embed multiple images by dragging and dropping the files from a web browser or saved to your computer.

Upload Image by Copy and Paste

Upload Image by Copy and Paste

You can upload and embed an image by copying and pasting it. To copy an image to your clipboard, right-click the image and select Copy.  You can paste it by right-clicking into the Rich Text Editor and selecting Paste or using the keyboard shortcut CTRL+V on a PC or Command+V on a Mac.

Upload Images from Toolbar

Upload Images from Toolbar

To upload an image from the toolbar, click the Image icon [1]. From the drop-down menu, select the Upload Image option [2].

Note: To view the Image icon, you may have to click the Options icon [3].

Upload Images from Menubar

Upload images from Menubar

Alternatively, you can embed images from the menubar. Click the Insert link [1]. Navigate to view the Image options [2], then select the Upload Image option [3].

Upload Image from Computer

Upload Image from Computer

By default, the Image Uploader displays the Computer tab [1]. Click or drag and drop an image file to the image uploader to upload a file from your computer [2].

Notes:

  • Images uploaded from your computer using the image uploader within a group are added to your group files.
  • Images uploaded from your computer are added to your course files.

Select File

Select File

Select the image file [1] and click the Open button [2].

Learn about supported image file types.

View Selected File

View Selected File

The uploader displays the image file name [1] and an image preview [2]. To remove the image, click the Delete icon [3].

Upload Image from URL

Upload Image from URL

To upload an image using a URL, click the URL tab [1].

Enter the URL in the File URL field [2].

Manage Usage Rights

Manage Usage Rights

If required in your course, you may need to select usage right settings for your image.

In the Usage Right drop-down menu [1], select one of the five usage right options:

  • I hold the copyright: original content created by you
  • I have obtained permission to use this file: authorized permission by the author
  • The material is in the public domain: explicitly assigned to public domain, cannot be copyrighted, or is no longer protected by copyright
  • The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws: excerpt or summary used for commentary, news reporting, research, or analysis in education
  • The material is licensed under Creative Commons: this option also requires setting a specific Creative Commons license

If known, enter the copyright holder information in the Copyright Holder field [2].

Manage Image Attributes

Manage Image Attributes

To add Alt Text to your image, type an alternative text description or text tags in the Alt Text field [1]. By default, the Alt Text field displays the image file name. Alt text is read by screen readers, and it displays when an embedded image cannot display.

If the image is decorative and does not require alt text, click the Decorative Image checkbox [2].

By default, the Embed Image display option is selected for embedded images [3].

To display the image file link, select the Display Text Link display option [4]. The file link will replace the image in the Rich Content Editor.

Embed Image Upload

Submit Upload

To embed your selected image, click the Submit button.

Note: The image will flash before it embeds in the Rich Content Editor.

View Embedded Image

View Image

View your uploaded image in the Rich Content Editor. You can also add alt text tags and manage the image display options.

Update Image Options

Update Image Options

To manage image options from an embedded image file, click the image [1], then click the Image Options link [2].

You can manage display options for embedded images in the Image Options menu [3]. You can manage the image Alt Text, the image size, and other display options.

To replace or update an image added via URL, enter an updated image URL in the File URL field [4].

Click the Done button [5].

Save Changes

Save Changes

Click the Save button.

Note: When using the Rich Content Editor in Discussions, the Save button may appear as the Reply button.

View Content

View Content

View the content created in the Rich Content Editor.