Personality Quirks of the Rich Content Editor
Below you will find a few of the RCE's personality quirks, but part of it is just the nature of rich content editors. Each one has its own strengths and weaknesses. We try to point out as many of these quirks as we can during the DesignPLUS functional user trainings, however, some of the strange things that happen are the result of so many different variables that it is hard to reproduce them. The issues that you encounter in a rich content editor are also things that happen in programs like Microsoft Word, Google Docs, etc. people just tend to be more familiar with those programs and have learned to avoid certain behaviors even if they are not consciously aware of those behaviors. Here are just a few examples when it comes to the Canvas rich content editor:
- The rich content editor does not like elements being empty.
- For example, if you are working with an inline element (link, span, bold, emphasis, the headings for the tabbed panels, etc) and you delete all of the content, the rich content editor will assume that you are finished with that element and will remove it. This is one of the common ways that the headings for tabs are broken.
- Another part of this is that the rich content editor does try to help you edit empty content. For example, if you have an empty <div> element in the rich content editor, it will give that div height so that you can click inside of it. However, if you save the content with an empty div, that spacing may disappear because the div on its own does not have a height.
- Copy/cut and paste functionality can vary depending on what you select.
- If you copy a portion of a paragraph, you will get just the text. However, if you are trying to select all of the paragraph, you may get just the text or the rich content editor may also recognize that the text represents the whole paragraph and bring the paragraph tags as well. The same thing can happen when you try and copy/cut paste a list item.
- Copying from a website can also bring unknown styles and elements along the way.
- In Canvas, this often happens when someone goes to a page in another course and copies the content from the saved view and pastes it into the rich content editor. There are multiple things that both Canvas and the Design Tools transform when the saved content is viewed. For example, links that point outside of Canvas get the little square with the arrow that indicates it will take them away from Canvas as well as some hidden text that relays that same information to a screen reader. If that is pasted into the rich content editor, it can do strange things when saved.
- We've also had to resolve issues when a user has copied from a saved Canvas page and the copy included some of the divs that Canvas uses to separate out user content. These divs come with their own styles and when the get duplicated on a page in Canvas, they can do bizarre things to the layout.
- When you hit enter/return in the rich content editor, the rich content editor will try and duplicate the current element type with all of its attached styling.
- If you are working with a paragraph, enter/return will give you another paragraph.
- If you are working in a list item, enter/return will give you another list item.
- If you are in an empty div, hitting enter will give you another empty div.
- When you add a new row to a table and the text was bolded in the row above, it will be bolded in the new row.
That list could go on and on and can vary based on the browser, where the content is copied from, updates Canvas makes to the rich content editor, etc. Here are a few tips that we would recommend you pass on to faculty and designers:
- When using content created with Design Tools, use the sidebar to edit that content wherever possible.
- For example, when editing expander headings make changes in the input field in the sidebar that represents that heading rather than editing within the rich content editor.
- Paste copied text without formatting.
- On Mac, you can use the cumbersome but very useful keyboard shortcut of Command+Option+Shift+V to paste just plain text without any formatting that might come with it.
- On PC in Firefox and Chrome (and some other applications), you can use Ctrl+Shift+V to paste text without formatting.
- If the styling looks strange when you paste something into the rich content editor, you probably did something wrong. Undo what you did using Ctrl+Z on a PC or Command+Z on a Mac and try something different.
- This is where the Design Tools sidebar originated. Users in Canvas were unable to see styles from the external stylesheets in Canvas until they saved the page so they often did not know things were broken until after they had done a bunch of work and saved the content.
- This is also why the default view in the rich content editor is set to blocks view. It allows you to see below the surface to try and help you understand some of the things that are otherwise hidden.
- When working with pages in Canvas, the revision history can be your friend.
- Sometimes it is easier to go back to a previously saved version of the page and then make the edits again than to try and figure out how you broke something. I just wish Canvas made this option available for other types of content.
These rich content editor issues are also part of why we have divided the types of content you can add to the rich content editor into comfort levels. If users do not know how to handle some of the strange behaviors that we described above, they probably should not use the intermediate or advanced features like expanders until they are a little more familiar with working in a rich content editor.