Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
TinyMCE polygons

TinyMCE teardown inside Instructure Canvas

Robert Collings

May 21st, 2019

Written by

Robert Collings
Robert Collings

Category

Trends & Inspiration

We see all types of apps built with TinyMCE’s advanced rich text capabilities, yet one of the most popular use cases is in education technology. In fact, we proudly count the world’s two leading learning management system (LMS) providers, Blackboard and D2L, as customers. Today we’re going to teardown the Canvas LMS, developed by the team at Instructure.

The background to this post is my recent completion of a business analytics certificate at a leading MBA school. The course was delivered online and through Instructure’s LMS. As I prepared to deliver my first assignment via Canvas, I was struck by how familiar the rich text editor looked. Could it be TinyMCE? Since appearances can be deceiving, I opened my browser devtools and saw the use of familiar TinyMCE classes, and after a little more digging the version 4.9.2 editor payload. Definitely TinyMCE.

 

TinyMCE 4.9.x in Canvas

TinyMCE 4 editor in Instructure Canvas LMS

First up, I think the Instructure team did a great job integrating TinyMCE into the Canvas platform. The UI is clean, icon spacing makes readability easy, and they extended the editor with several non-core plugins for common education requirements such as equations, media, and most importantly accessibility. I also like that they toggle between rich text and HTML views via the “HTML Editor” button. Very cool. More on HTML code views later.

Otherwise it looks like the remaining icons relate to standard TinyMCE core features and plugins. The purpose of most if not all of these should be very familiar to you, from font formatting to text alignment, lists, tables, indentation, and inserting links and images.

 

A quick win upgrade for Canvas

Earlier this year we released TinyMCE version 5, our latest major upgrade to the world’s most popular text editor. Version 5 brought a number of improvements and new plugins, including a new UI framework using LESS variables to deliver greater control and easier customization for developers.

TinyMCE 5 new UI components includes menus

You’ll see in the screenshot below (taken from our homepage demo) and the image above, that the v5 UI is much cleaner and “more modern” than v4. It’s worth noting that Instructure removed the lines dividing function groupings from their TinyMCE instance, and I like how this blends the editor into the surrounding elements. Still, it’d be great to see Instructure move Canvas to TinyMCE 5.

TinyMCE 5 setup in a default

 

Accessibility matters

Making accessible content matters a lot to me personally and the entire Tiny team. If you’re building a platform where people go to learn, I think you have an obligation to help everyone create content on the platform that’s a11y compliant. It’s also a legal requirement in some parts of the world.

It’s great to see that Instructure takes this responsibility seriously too. It looks like they developed (built) their own a11y checker plugin. I dumped some content I know to have accessibility issues into their TinyMCE instance and ran their checker. It found 6 errors. Not bad.

TinyMCE 4 inside Instructure Canvas

I really like how they use a sidebar to deliver the a11y service. You’ll see that their checker provides a description of the issue to the content creator, a field where they can quickly add and apply a fix, and button to click through to the next issue.

Let’s take a quick look at Tiny’s accessibility checker. Again using the demo on our homepage, I dumped the same content into the editor and ran the checker. It isolated 7 errors (compared to Instructure’s six), and delivers a similar UI*. The Canvas a11y checker has an option to label an image as decorative. We’ll need to make this improvement to our checker.

TinyMCE 5 accessibility checker demo

* The a11y modal is contained inside the editor instance here because of the demo environment. It could be placed externally to the editor as is the case with Instructure’s a11y checker.

Props to Instructure for a good accessibility experience.

 

About that HTML Editor

Instructure chose to use TinyMCE’s open source code view plugin, which is a reasonable decision except that in our experience those who look at the editor’s HTML tend to be “code savvy”, if not outright having development experience.

In the image below you’ll see that I toggled from the rich text view to Canvas’s HTML Editor view. If you look closely at the HTML in the screenshot you’ll see references to accessibility. If you’re not familiar with HTML, this is basically a code version of the accessibility content I showed above.

TinyMCE 4 inside Instructure Canvas

As mentioned, most people working in the code view have some development experience, even if only basic HTML and CSS. Even for these people scanning finding errors is a tedious task. There is a better way.

TinyMCE 5 with Advanced Code Viewer

Returning to our TinyMCE homepage demo I opened our Source Code view, which is powered by our Advanced Code Editor (ACE). Using the same content as the Canvas screenshot, you’ll see the text is now colorful. This is commonly known as “syntax color highlighting”. ACE provides other benefits that developer-y people love, including bracket matching, code folding and multiple selections/carets. These might be small things, but I believe they add a lot of value to learning management platforms.

 

Copy from Word … what about Excel?

Copying and pasting content from Word into a rich text editor is a well-known challenge. For simple, barely formatted content (which candidly rarely exists), there are free solutions on the market. But sometimes free comes at a price.

TinyMCE includes an open source paste plugin that, like these solutions, aggressively strips the inline styles that carry from Word into the editor. It is however a little like a hammer, and when it comes to content like tables and complex lists it falls a little short. From what I can tell, Instructure uses the open source solution, unless they rolled their own.

One use case that doesn’t get talked about a lot, but is very relevant to learning management systems, is pasting content from Excel into an editor. In the image below you’ll see the result of me doing exactly that, and it works well in Canvas. A HTML compliant table is produced and everything looks great.

TinyMCE 4 inside Instructure Canvas

But what you don’t see is the process of pasting the content. As a user I had no control over how the content landed in the editor. It was simply pasted. If the content had formatting applied (which it did), it was automatically stripped out. Like I said, a hammer.

More powerful (usually commercial) copy/paste tooling does exist, like Tiny’s PowerPaste plugin. It is a more controlled paste solution and offers the ability to retain formatting on paste events, as well as improved list and table handling.

As a quick example and returning to our homepage demo, in the image below you’ll see that on the paste event the user is prompted to either retain or discard formatting. (This option can be disabled and the plugin can default to one or the other.)

TinyMCE 5 advanced copy and paste dialog with options to remove formatting

In the case of removing formatting, you see a similar result to the open source paste plugin. As mentioned, when it comes to content like complex indented lists and tables, PowerPaste still does a significantly better job of maintaining the appearance of the source content. Which is what the user wants.

TinyMCE 5 with content pasted from Excel

And here is the content with the source formatting retained. You see that table borders are marked with strokes, the font is different (to the above image), and some of the text is a red color. This is an almost identical representation of the content in my Excel sheet.

TinyMCE 5 with content pasted from Excel

A quick note: A common concern we hear from customers whose user workflows involve regular copying and pasting of content, is that users want the content inside the editor to look exactly like it does in their source doc. Unfortunately, the open source paste solutions cannot do this and it’s why we mention a commercial solution here.

 

Wrapping up

Overall, Instructure have done a great job integrating TinyMCE into their Canvas platform. I personally enjoyed using it during the online business analytics course I studied (yes, I passed) and I found the experience to be seamless.

There were in fact some very cool features I did not discuss in this post, such as the ability to record video content directly into the editor (!), their use of advanced media embedding, and the inclusion of a page designer.

To wrap things up with a recommendation. An upgrade to TinyMCE 5 would really boost the visual appearance of the Canvas application, as well as making skinning the editor significantly easier for their developers. Depending on student workflows—e.g. writing content in Word and pasting it into the editor—I’d consider more advanced copy/paste solutions. Personally, as a content creator I do spend a lot of time in the HTML view (especially in blogs or page layout designers) and find syntax color highlighting to be extremely valuable.

Individually these things might not seem like much, but collectively they add up to an improved education experience for users, which impacts a student’s perception of the institution while delivering improved student outcomes. Tiny customers like Blackboard and D2L understand this.

If you’re building learning management, education tech, or corporate training solutions, and would like to discuss my take on Instructure’s implementation of TinyMCE, contact us for a chat or ping me on Twitter.

LMSTinyMCE
Robert Collings
byRobert Collings

Related Articles

  • Snow capped mountains with perfect reflection in water below.
    Trends & Inspiration

    The invention of copy and paste

    by Ben Long in Trends & Inspiration
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor