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@ucf.edu 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.
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.
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.
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.
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.
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. SeeResources for Hex Colors for details on how to find hex colors.
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.
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.
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>
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.
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.
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.
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.
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 when it becomes available for voting. For further reading, read the WebAIM article, Accessible Images.
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
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.
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
As you type content in the editor, each time you presstheReturn/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>
<h1>Some Header text</h1>
<pre>Some Text that will display as you type it</pre>
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.
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.