Skip navigation
All Places > Instructional Designers > Blog > Author: Susan Nugent

Instructional Designers

8 Posts authored by: Susan Nugent Expert

Update 1/1/2020. The new rich content editor is available in beta and will be available in production in the January 2020 release. See my new post about the new rich content editor for the latest updates. 


Update 6/11/19. In Quizzes.Next the rich content editor is different and does not include the right sidebar content browser. You can upload content from the toolbar. See this guide for details. Additionally, the rich content editor is now on the short term roadmap for improvements. 


Updated 8/26/17. A new option (see 14 below) was added in the August 26, 2017 release. This new option allows users to add media without switching to HTML code. I also wanted to note that the new Teacher mobile app has a simplified version of the rich content editor toolbar that is available when editing content in the app.  Big shout out to the community's mobile guru Ryan Seilhamer for pointing this out in the comments below. 


Updated 9/16/16. Please note this cheatsheet is subject to change with Canvas updates. In the August 6, 2016 release notes the rich content editor got some updates and added functionality with pages and the syllabus. You may also want to check out the following discussion about the changes.

Friendly advice: Disable "Use remote version of Rich Content Editor AND sidebar"


Below is an image of the toolbar highlighted with numbers of each command. Each numbered command has a code example with some tips on using in the HTML Editor.

Rich Content Editor Toolbar



Code example:

<strong>Some Text</strong>


The Strong element is used bold text. It is generally not recommended to use the strong element to create page headings. Use the actual heading elements to create this type of structure. See number 20 below for details on why.



Code Example:

<em>Some Text</em>


Italics should be used to emphasize text and should be used sparely on webpages. Depending on font it can be hard to read italicized text on monitor.



Code Example:

<u>Some Text</u>


This element can be used to emphasize text; however, in on webpages underlined text is often confused with hyperlink text. I generally don't recommend using this element.


4-Text Color

Code Example:

<span style="color: #ff0000;">Some Text</span


This command creates a span element and inline CSS (the style attribute) to create the colored text. The style attribute can be applied to any text element such as paragraphs and headers. In the toolbar there are only about 40 colors to choose from; however, in the code view you can change the color to any color you want by altering the hex color code. See Resources for Hex Colors for details on how to find hex colors. 


5-Background Color

Code Example:

<span style="background-color: #ff9900;">content</span>


This command uses the span element and inline CSS (the style attribute) to create the background color. This should be used cautiously with text. If the background color and text color do not have enough contrast between them, the text can be hard to read. In the example below the text is hard to read. This can be especially hard on color blind people or people like who are losing their sight to old age. For further reading, view this Smashing Magazine article, Design Accessibly, See Differently: Color Contrast Tips And Tools.

On a side note, the Jive editor does not have background color element in the toolbar and does strip it when you try to add in code view so I had to use an image for this example.

example of bad contrast

6-Clear Formatting


This option is handy for getting rid of the extra HTML code that sometimes comes over when you copy and paste text from other locations such as from Word or other websites. It is important to note that this option works with most elements but doesn't seem to work with the background element (see number 5 above). You can go to code view to remove the span element. If you are designer, I recommend using the text editor that has a good find and replace command to remove any extra HTML and CSS code that you don't want before moving the text to Canvas. I use Dreamweaver's find and replace for this type of task a lot and it saves me quite a bit of time.


7-Text Alignment

Code Examples:

There are three alignment options. These attributes can be applied to headings and paragraph elements. The left alignment is the default in the editor. Note: It is best to only use center and right alignment for headers or short lines of text. It is generally not recommended for longer lines of text because the text is hard to read.

<p style="text-align: left;">Paragraph of text</p> 

<p style="text-align: center;">Paragraph of text</p>

<p style="text-align: right;">Paragraph of text</p>


For further reading I recommend the WebAIM articles, Writing Clearly and Simply and Text/Typographical Layout.


8- Outdent/Indent

Code Example:

What this option does depends on element it is applied to in the code. See examples below.


When applied to paragraph element the style attribute is applied to the paragraph element with padding of 30 pixels.

<p style="padding-left: 30px;">Some text</p>



When applied to an unordered or ordered list a new nested list is created.


<li>Some Text</li>


     <li>Some indented text</li>




See 11 and 12 for more details on lists.



Code Example:



Be sure to only select the text that should be superscript when applying this command. You can always switch to code view to fix any issues that you might not be able to fix with the toolbar.



Code Example:



The same applies as number 9 above.


11-Unordered List

Code Example:


<li>List Item</li>

<li>List item</li>

<li>List Item</li>



Unordered lists are good for list of items where the sequence of the items does not matter. Lists can be nested using the indent option. I have found this to be tricky sometimes so I prefer to edit lists in code view. See example of nested list in number 8.


12-Order List

Code Example:


<li>Do this first</li>

<li>Do this second</li>

<li>Do this third</li>



Order lists are good when you are giving students a set of an instructions for homework assignments. You can alter the list number to display letters if preferred. This must be done in code view. See example code below.

<ol type="a">

<li>Do this first</li>

<li>Do this second</li>

<li>Do this third</li>




Code Example:

Table code involves several different elements. See code example below.

<table border="0">




<td>Row 1</td>




<td>Row 2</td>






The new toolbar has a much improved table editor so you may not need to switch to code view that much now. I will note that tables should only be used for tabular data; however, the majority of people do not use them this way. This stems from some bad web design hacks from the late 90s which can still spark heated debate about their use in designing webpages. The key point to remember is that you want your pages to be accessible to all. For further reading, visit the WebAIM article, Creating Accessible Tables.


14-Insert/Edit Media

This is a new edition to the toolbar in the August 26, 2017 Canvas release. This option allows you to add a share link or embed code from a video on video sharing site like YouTube, Vimeo, or Teacher Tube without needing to switch to HTML view. If you add the share link the embed code will auto populate. You can determine the video dimensions and provide an alternative source for the video. 



Code Example:

<a href="


The color of the link is controlled by the CSS (Cascading Style Sheets) that is linked to the HTML document. See Canvas Styleguide for more details. For further reading, read the WebAIM article, Links and Hypertext and Accessible CSS.



Code Example:

<img src="" alt="dog" width="500" height="332" />


Images can be pulled from the web or Canvas files. Images do have several attributes you can add to it. When you add or edit the image in the editor the dialog box has options for adding alternative text and changing the width and height attributes. It is important to note that students must use this option to embed images in discussions. Be sure to vote for Upload an image directly to a discussion as a student when it becomes available for voting. For further reading, read the WebAIM article, Accessible Images.



Code Example:

<img class="equation_image" title="\frac{3}{4}+5" src="/equation_images/%255Cfrac%257B3%257D%257B4%257D%2B5" alt="\frac{3}{4}+5" />


When this option is used in the editor the equation editor will display. You can use the editor options or write the equations in LaTex. The equation will be rendered as an image with the LaTex as alternative text.


18-Embedded Objects, Media Comment & Other LTI Tools

Code Example:

<iframe width="640" height="360"src="//" frameborder="0" allowfullscreen></iframe>


When using the LTI and Media Comment tools the content in most cases will be embedded objects. The main issue with some of the LTI Tools is unsecure content. Canvas is hosted on secure server and almost all browsers will now block unsecured embedded content on secure webpages. You can also paste embed code from YouTube. You can also embed documents such as GoogleDocs and Microsoft Documents.


19-Text Direction

Code Example:

<p dir="rtl">Some text</p>


This attribute is essential for setting how script languages will display on the webpage. For more details, go to the WC3 article, Structural markup and right-to-left text in HTML


20-Font Sizes

Code Example:

<span style="font-size: x-large;">some text</span>


Uses the span element and inline CSS (the style attribute) to create the larger text. It is generally not recommended to use this option to create header in your content. Header content should be properly marked up using the header elements. See number 21 below.


21-Paragraph and Header Elements

Code Example:

As you type content in the editor, each time you press the Return/Enter key a new paragraph is created. Paragraphs will have specified paddings and margins from the linked CSS document.  You can mark up headers using the paragraph drop down menu. Select text you want to be a header and mark as Heading 2, Heading 3, or Heading 4. The heading 1 is the title of the page and will display in the browser tab when somebody visits the page. Properly marked headings are important for people who use alternative browsers such as screen readers to access your content.


You can use the style attribute to change the font and margins if desired to have a different look that the default editor settings. I generally don't recommend doing that for all your pages because you must edit each element to make this change. That is too much work. A better option would be to get your IT people at your institution to setup KennethWare. I am working with ours to hopefully get this setup for our instance of Canvas.


<p>Some body text</p>

Heading 1

<h1>Some Header text</h1>


<pre>Some Text that will display as you type it</pre>


Paragraphs and headings are considered structural elements in HTML and are essential to making your pages accessible to all. For further reading, visit the WebAIM articles, Semantic Structure and Designing for Screen Reader Compatibility. I also recommend viewing the recording of the CanvasLIVE webinar Mobile Series: Just-in-Time Design (2014) and joining the Canvas Mobile Users Group


22-Keyboard Shortcuts

The keyboard shortcut icon was added recently and provides a quick view of the keyboard shortcuts you can use with rich content editor. See the following discussion about the keyboard shortcuts and other hidden gems in Canvas.

Your ideas of Canvas' best kept secrets


23-HTML View

Use the HTML editor to switch to code view so you can edit the code. Please note there are only certain HTML elements (Tags) that are allowed in the editor and any elements added that are not allowed will be stripped out of the page when you save the page.


Additional Resources

The rich content editor is a useful tool in Canvas but often students lose content when they accidentally hit a wrong key that wipes out their almost written post. This can be extremely frustrating for students and those who support them. As we wait for autosave feature request to become a reality, here are a few tips for students on writing discussion posts. 


Use Google Docs

If you have a Google account, start writing your posts in Google Doc. The document will be saved in your Google Drive account regardless if you manually save it. Once you edit the document it will automatically save your changes. This will also be useful as backup should you have technically difficulties posting the reply in the discussion. You could also use the Word web app in OneDrive if you prefer it over Google Docs. 


Once you have finished writing your post in Google Docs select all the text and copy it. Go to the Canvas discussion topic and create a new reply. In the rich content editor place the cursor in the text box and paste the text from your Google Doc. Reformat as necessary. Be sure to click Post Reply when done and check to make sure your reply was posted before leaving the page. View this Canvas guide for details on posting a reply


Use Shortcut Keys

Shortcut keys can save you time. Below are the some shortcut keys you can use in Google Docs or rich content editor. 


Select All Text - CTRL (CMD) + A 

CopyCTRL (CMD) + C

Paste - CTRL (CMD) + V

Undo last command - CTRL (CMD) + Z 


Slow Down to Reduce Errors

Many instructors will impose editing restrictions once you have posted in the discussion topic so take the time to compose your thoughts in a meaningful way while you are writing your post in Google Docs. Remember Google will save all your writing. You can always go back to previous versions of what you wrote in Google Docs. Write a first draft of post. Then step away from your writing and go do something else for a while. Come back to your writing and revise where necessary. Read your post slowly to catch errors in spelling and grammar. View this excellent post by Laura Gibbs where she shares her students' writing experiences in her courses.  


Adding Media

In some cases your instructor may require that you post media (video/audio/images) to your discussion. Canvas makes this easy but you may feed intimated by technology. Review these Canvas guides for tips on recording video and audio messages. 

If you prefer, you can record your audio and video content in another program. Just be sure you can export the content to a web friendly format that you can upload to Canvas. View the guides below for details on some other options you can use to record video content and upload it to Canvas. 

Embedding images in discussions can be tricky for students. It requires several steps that can be hard to remember. Upload your image content to your personal files in your Canvas account first. Then when you are creating your post in the discussion topic use the picture icon in the rich content editor toolbar to access your images. View the following guide for details on posting images. 


Use the Canvas App 

While I wouldn't recommend writing longer discussion replies on your phone, it can be useful for shorter posts and adding media. If you don't already have the Canvas app, view these guides for details on how to download it. 

Below are iOS guides for posting in discussions. 

Below are Android guides for posting in discussions. 


Have Fun and Be Nice

One of the great things about the discussion topics in Canvas is that it allows all students to communicate with each other to share ideas and thoughts about a wide range of topics. In some of your courses you may be discussing difficult topics that may of touched you personally or current events that you have strong opinions about these topics. Remember that your fellow students will also have experiences and opinions about the same topics that may not be the same as yours. Just be respectful of each other views and remember there is a person at the other side of the keyboard. I will leave this post with Josh Coates' 2015 keynote for InstructureCon where he talks about empathy. I think the world needs more empathy! Note: He starts talking about empathy about 20 minutes in if you want skip to that part. 


When you add images to questions in a quiz the rich content editor browser is available so the process is fairly simple; however, the process of adding images to questions in question banks requires several more steps. Also, it is important to keep in mind that the course files are open to students unless you restrict access to the folder with the quiz images. This tutorial will show you how to add images to questions securely no matter which way you choose. 


Disclaimer: At the time of this writing the current quiz tool does have some awkward processes and this blog post shows how get around some these awkward processes. Instructure is currently working on building a new quiz tool based the community's feedback. Please visit the Quizzes Next studio page to learn more about this upcoming tool. 


Step 1: Upload Images to Files and Set Permissions

Create the images in whatever program you normally would (Photoshop, Paint, etc.) and save them to a local drive. In a Canvas course go to Files on the left navigation. Create a folder with the name quiz-images or something similar. Set the permissions for this folder to Restricted Access, Hidden, files inside will be available with links. It is extremely important that you choose this option. If you unpublish the folder, students WILL NOT have access to the images when they are taking the quiz. Upload all the quiz images to this folder. View the following guides for details on how to complete this step. 


Step 2: Adding the Images to Questions

In all question types you can add images to question box and feedback boxes; however, images can only be added in the answer boxes in the multiple choice and multiple answer question types. I also highly recommend viewing Kona Jones' blog post about quiz security and Stefanie Sanders' post about using multiple drop downs question with images. 



Option 1: Adding Images to Questions in a Quiz

The guides listed below shows you how to create a quiz and add content to the questions. When creating questions in a quiz the rich content editor browser will be available allowing you to choose the images you previously uploaded. Note: All the questions you create in a quiz will have a copy stored in a question bank called "Unfiled Questions".  You can go to the question banks and organized the questions as desired. This is not ideal for organization so it may be best to create questions in question banks so they are organized as desired. See option 2 below. 



Option 2: Adding Images to Questions in Question Bank

You can create questions in question banks. This allows you to organize questions by bank which makes it much easier to add questions to a quiz using the Find Answers option. View the following guides for details on question banks.


How to Use the Rich Content Editor Toolbar to Add Images (updated)

As of the November 17, 2018 release you can now upload images directly from the rich content editor. See the following guide for details. 


You may already provide students with your static PowerPoint presentations in the File section of your course. To make this content more engaging, you could take that same PowerPoint file and narrate the slides. It may be best to break up long slide decks into smaller files so you have shorter videos that are no longer than 10 minutes.

To add recordings to each slide (1) click the Slideshow tab. Select Record Slide Show. Select the desired option and start recording. If you record each slide separately and you mess up on a slide,  just start over recording the audio for that slide. Continue this process until all your slides have an audio file. Be sure to save often. (2) You can test your timings by clicking Rehearse Timings

Slide Show Tab in PowerPoint

Once finished, then you could convert the PowerPoint to a video file and upload it Canvas. In PowerPoint click File to view the Backstage. (1) Click Export. (2) On the Export screen select Create Video. (3) Choose Internet Quality and Use Recorded Timings and Narration. (4) Click Create Video. The process of creating the video will take some time so be patient as PowerPoint creates your file. Once your file is created, use the media comment tool in the rich content editor to upload the video to your Canvas course. Don't forget to caption your video once you have upload it to Canvas. 

PowerPoint Backstage 

Multimedia is great way to provide students with additional modalities. Below are some of the ways you can get audio/visual content in your course. It is important to note that content should be optimized for the web before adding it your course and be sure to add captions to the videos you add to your course. 

Use Canvas Rich Content Editor

If your computer (at home) has webcam, you can quickly record audio or video directly in Canvas using the media comment tool in Canvas pages. 

How do I record a video using the Rich Content Editor as an instructor?  

How do I record audio using the Rich Content Editor?  

What should I do if I can't record video comments with my webcam?  

Don't Forget to Caption Your Video!

How do I add captions to an external video as an instructor? 

How do I add captions to new or uploaded videos in Canvas as an instructor? 

How do I create a caption file using the subtitle creation tool as an instructor? 

How do I view captions in a video as an instructor? 

Other Options

Your phone/tablet

If you have a smartphone, you have a camera that records static images and video. Most phones have additional features such as portrait mode, slow-motion, and photo editing features. Use a cloud based option like Dropbox and OneDrive to upload your videos to your desktop. 

This CNET video gives some good tips about shooting video with your phone. 


Keith Hughes using his YouTube channel  as a place to upload and organize his videos. In the video below he explains his process of recording lecture videos. Be sure to check out some of his awesome history lectures! YouTube videos are easy to embed in Canvas. Check out this guide for details. 

Other Software Options

PowerPoint/Mix - PowerPoint ships with narration tools and the ability to save the presentation in video format. You can also install Mix to gain even more recording features.

SnagIt - This software allows to you capture screen shots of the computer desktop. You can annotate the images with arrows and other interesting stamps.

Camtasia- This software allows to you capture video of the computer desktop. You can annotate the video with call-outs and captions.

SmartBoard Software - SmartBoard is hardware/software solution. The Smartboard software has screen capture and video recording options.

Educreations- This is third party application that can be integrated with Canvas. The free version can be used to record yourself writing out problems with stylus on an iPad.

This is probably the most frequently asked question that comes through our help desk. A lot has changed in Canvas recently that makes it much easier to accommodate students but also a bit more confusing. I created a slidedoc to give to faculty a general overview of how to use quiz/assignment settings for optimal flexibility when accommodating students in Canvas. Below is a link to the slidedoc and a general overview of the slidedoc with links to specific relevant Canvas guides.


Accommodating Students in Canvas - Note this is pptx file that will open in the PowerPoint web app. From there you can download the file.


Ways to Accommodate Students in Canvas

There are three main ways you can accommodate students in Canvas. The moderate quiz option has been in Canvas for a long time now but the other two options are recent additions. Please note with Differentiated Assignments and And/Or Module options are in the earliest stages of development so expect changes in functionality as more features are added.


  • Moderating a quiz - Allows instructors to make adjustments to some quiz settings for the selected students
  • Differentiated assignments  - This option became available in this summer (2015). This option allows instructors to select individual students in the Assign To section of the assignment settings to give students a different due date and availability period for an assignment OR to assign an assignment to individual selected students.
  • And/Or Module option - This option will be in production on October 10, 2015. This option will allow instructors to create modules where students to choose their own path of assessments


Review Quiz Settings

When Moderating a Quiz be sure to review quiz settings before moderating a quiz. It is important to understand that the default quiz result settings allow students to view their responses along with the correct answers each time they view the quiz page. Make adjustments to quiz result settings especially if you are allowing students extra attempts! Review the following guides and helpful resources in the Canvas Community for further details on all of ways you can adjust quiz result settings.

What options are available for Quizzes?

Quiz Settings to Maximize Security - CanvasLIVE event featuring Kona Jones. If the recording isn't available yet, it will be soon.

Quiz Settings to Maximize Security - handy guide created by Kona Jones


When Moderating a Quiz

The guides below gives instructions on giving a student extra time on a timed quiz or an extra attempt on a quiz. Please note if you give a student an extra attempt on a quiz that has a set availability period that has passed, you may need to unlock the quiz so the student can complete the quiz attempt.

Once I publish a timed quiz, how can I give my students extra time?

Once I publish a quiz, how can I give my students extra attempts?


When Using Differentiated Assignments...

Differentiated assignments allow you to accommodate students with different assignments or due dates. This is available in the assignment settings for online graded assignments, discussions, and quizzes. There are some key points to make note of when using this feature.


If you are differentiating an assignment by due date, be sure to always use the +Add option under the Assign To box in assignment settings. This will create a separate Assign To box where you can assign the selected student(s) the different due date and availability period. Once you assign students in the second Assign To box the first Assign To box will change to Everyone Else. Please note if you have an assignment where most students have submitted the assignment and you remove everyone from the first assign to box to pick selected students, only the selected students will see the assignment and grades! DO NOT DO THIS! This will causes mass confusion for your students who have previously completed the assignment. They will NOT be able to view the assignment or their grade for the assignment.


If you are assigning the assignment to individual students, you can remove everyone from the assign to box so you can select the students who will be assigned to the assignment. You will be warned that the assignment is not assigned to a section. Just click Continue. Be aware only students assigned to the assignment can be graded for the assignment in the grades and students will only see the assignments they are assigned. Please note this is best done when creating a new assignment. As mentioned in the previous paragraph, removing everyone  in the first assign to box in assignment settings with an assignment  that has previous submissions is NOT optimal and can lead to student confusion.


How do I view differentiated assignments with different due dates in a course?

How do I assign an assignment to an individual student?

How do I assign a quiz to an individual student?

How do I assign a graded discussion to an individual student?


The New And/Or Option in Modules

The new And/Or option in module settings will allow instructors to require students to complete all requirements in a module or to allows students to select one requirement from a module. Please note this option will not be available until October 10, 2015. See 10/10/2015 production release notes for more details. In the meantime it may be a good idea to review what can currently be done with modules in production Canvas right now. Once the And/Or options are added these guides will probably be updated.


What are Modules?

What are Modules for students?

Canvas Pages vs Canvas Modules

How do I add requirements to a module?

How do I require students to move through each module item in order?

How do I add prerequisites to a module?


Important Notes on Assignments that have Module Requirements

If you add assignments to modules and apply module requirements to the assignments, there are some important considerations concerning assignment settings.

Online Submission Assignments (all types)

These two scenarios could happen with assignments that have module requirements and availability dates set.

  • If students have not contributed to a discussion with a Must Contribute module requirement and the discussion’s Until date has passed, they cannot complete the module requirement.
  • If students have not submitted an assignment with the Must Submit module requirement and the assignment’s Until date has passed, they cannot complete the module requirement.


In the assignment settings it may be best to remove the Until date and allow students to submit assignments late. Let students know what your grading policy will be when they submit late. Or as an alternative you could make adjustments to the assignment settings using the Assign To option to give individual students more time to complete the assignment with the module requirement.

What is the difference between assignment due dates and availability dates?


Quizzes with One Attempt Allowed

If a quiz only has one attempt and has the Must score at least # points module requirement, students who do not meet the score requirement cannot complete the module requirement.  In the quiz settings check the box next to Allow Multiple Attempts. Additional options will appear once checked. If the check box next to Attempts Allowed is left blank, this will allow students to take an unlimited number of attempts. If the check box next to Attempts Allowed is checked, input the number of attempts you will allow. Keep in mind if you limit the number of attempts, students could still potentially not meet the module requirement.  If this happens, you can moderate the quiz to give selected students more attempts if necessary.

What options can I set in a quiz?

Turn On Enable “OR” Condition for  Modules in Your Course

If you decide to create modules using the OR option, first you will need to turn on this feature in the feature options of the course.

What feature options are currently available for Canvas courses?


Grading Assignments that are Part of OR Module

When you use the OR option in modules there are a couple of ways of dealing with the assignments that the students do not choose to complete. Choose the option that works best for you.

Excuse the Uncompleted Assignments in Grades

In the grades you can excuse the assignments that the students don't complete. The excused scores will not be included in the total calculation.


See the following guide

How do I excuse an assignment for a student in the Gradebook?

Create an Assignment Group and Drop the Desired Number of Assignments

Create an assignment group on the assignment page and organize all of the assignments that are part of the OR module requirement into the assignment group. Edit the assignment group to drop the lowest # of desired scores from an assignment group. Once this rule is setup it will automatically drop the scores in grades. In Grades instructors will see horizontal lines over the cells of dropped grades and students will see the dropped scores grayed out in the grades list. The dropped scores will be not be included in the total calculation.


See the following guides

How do I add an assignment group in a course?

How do I create rules for an assignment group?


So in Conclusion

This gives you lots of options for providing students accommodations. It is important to be aware of all the assignment settings and module settings so you don't send students down a path of frustration. Many people have commented on the 10/10/2015 release notes about the new And/Or module feature and how to make it better. Perhaps you have a great idea as well. Be sure to add your feature ideas in the Canvas Community. See the guides below for further instructions on how add your feature idea and how the voting process works. If you do add a feature idea about the topics of this blog post, be sure to link them in your comments. Thanks for reading!


How do I create a new feature idea?

How does the feature idea process work?

Updated 9/16/16 with new screen shots to reflect changes in user interface and rich content editor.


I anticipate that this could be a problem on our campus as most of our courses are converted WebCT 6 courses.  One of our instructors gracious allowed me to use screenshots from her course.  I hope everybody finds this useful.

Why Convert HTML Content?

The course file system got a major upgrade per the June 6, 2015 release notes. One of the changes affects instructors’ ability to edit HTML pages in course files. Previously there was option to edit HTML files directly in Canvas course files; however, this option has been removed in the new file interface. In order to edit HTML pages instructors will need to download the file and edit the file in Notepad or some other type of HTML editor like Dreamweaver. This will require some knowledge of HTML to make the changes to the content. See the following Canvas guide for details on how to edit HTML files.


This content can be converted to Canvas pages relatively easy. It does require quite a few steps for each page; however, once the pages are converted, there will be more page editing functionality in the rich content editor and the content will easier to maintain as well. Follow the steps below.

How to Identify HTML Content in Your Course

Links to the content on Canvas pages will appear with the page title and extension .HTM or .HTML.


In modules any content from files will display with a cloud icon and this could be an HTML file.



When the link is clicked the HTML page will be framed by Canvas and the edit option will not be available. Note that the breadcrumbs display the file name and extension (html) and there is an inside scroll bar as well.



Steps to Convert the Content

Step 1: Select and Copy the Content in the HTML Page

Copy select all the text on the page by positioning the mouse at the top of the page. Then click and drag with the mouse until all content is selected. Right-click anywhere over the selected text and choose Copy.



Step 2: Create a Page in Canvas

From Pages

The next step will be to create a new page. You can create pages from a couple of locations in a Canvas course. Review the Canvas Guides for more details on creating and editing pages.


How do I use the Pages Index Page?

How do I create a new page in a course?

How do I edit a page in a course?

How do I add assignment types, pages, and files as module items?

Step 3: Paste the Text in Rich Content Editor

Once the new page is created click the title to display the page. Note: In this example a new page was created in the module.



When the page displays click Edit.



In the rich content editor place the cursor where the text should display on the page. (1) Right-click and select paste. (2) You can click Save & Publish to publish the page so students can see the page OR click Save to save a draft of the page. Drafts cannot be seen by students. Continue this process for each page.


Additional Tips


Please note some formatting may not appears as it did previously and may require some reformatting. Review the links below for tips and ideas on making the pages pretty.


Course Files Clean-up

Once you have converted the content to Canvas pages you may want to review the content that is available in course files. Remove or hide content that students don’t need to see. (1) Select content by holding down the CTRL (Command) key while selecting files. If multiple files are selected click the trash can icon above the list of files. If an individual file is selected click the gear icon and select Delete(2) To Hide content click the cloud icon and choose the option to make files hidden but available if you decide to link to any of the hidden content. Review the linked guides below for more help on using course files.


What are Files?

How do I use Files as an instructor?

How do I view course files as an instructor?

How do I move and organize my files as an instructor?

How do I restrict files and folders to students in Canvas?

OneDrive is Microsoft's answer to Google Drive and is tightly integrated in Office 2013. This makes it super easy to save files in Word and PowerPoint directly to your OneDrive account. From OneDrive you can embed documents into Canvas. I like this option better than Google Drive because it is much easier to update the documents directly in Word and PowerPoint. Once the file is updated in OneDrive the embedded the files in Canvas pages are updated.

What You Will Need

You will need a free personal Microsoft account for OneDrive and Office 2013. If your institution is a subscriber to Office 365, you can also use your institutional account. It is best to use Office 2013, but this can also be done in Office 2010 or Office for Macs. The integration is just not as tight as it is in Office 2013.

Connecting Your Microsoft Account with Office 2013

First you must login to your Microsoft account in Office so it is easy to save documents to OneDrive. In any Office 2013 program click the File tab to display the Backstage. On the left navigation click Account. In the middle pane click Login to login to your Microsoft account. Once logged in your avatar will display in the upper right corner of the Office programs. Once you have connected your Microsoft account in first Office program, you will not have to repeat this step in all the other Office programs. Now you will be able to open and save documents in OneDrive directly in the all the Office programs.

Steps to Save and Embed Documents in Canvas

Create a document and go to File > Save As. Select the OneDrive option. Note: If your institution is an Office365 subscriber, you may need to use the Add a Place option. Check with your IT people to see what is required.


Next go to OneDrive in the web browser and login. Locate the file and check the box next to the document. Click Embed.


A pop-up window will appear. click Generate HTML. A preview will display with box of the code. Copy the code and click Done.


In Canvas create a page or edit a page. On the rich content editor toolbar click HTML editor and paste the code in the location you want. The width and height values can be changed to make the preview window larger if desired. Click Save when done.


Students will see the preview window and there are options in lower right for printing and downloading.


When you need to update the document just open it in the Office MS program it was created in and make the desired changes. Save to the OneDrive. If you don't change name of the file name, the embedded document will be updated on the Canvas page. You can tell when documents are synced with OneDrive in the Office programs by the green circle icon over the Save icon.


Filter Blog

By date: By tag: