How to create a Learning Management System for educators

Learning Management Systems, or LMS, are a wild beast as far as text editing needs are concerned.

Learning Management Systems support  two key functionalities: a user interface for training in schools or businesses (or any organized group for that matter), and an administrators interface for educators. However, the components required to fit the multiple needs of both users and educators makes for a lengthy list of requirements.

That's why an advanced rich text editor is an essential investment. It must caters for:

Educators: writing curriculums, creating assignments, giving feedback, marking and managing work.

Students: writing short answers,submitting essays, responding to feedback from teachers.

UsingTinyMCE, you get built-in features that save a great deal of development time. Let’s review some typically useful features that are needed when developing your project, and explain how to install them in your LMS rich text editor 

It is possible to use open source TinyMCE to enhance your Learning Management System and if you need further features premium plugins can be added to meet your educator’s administrative needs. This tutorial covers what TinyMCE premium plugins you can use to do this, and how to configure them.

LMS essential #1: Spell Checker Pro

The first major requirement for a LMS is advanced spell checking, within your rich text editor component.

With the TinyMCE Spell Checker Pro plugin, you can simultaneously check for errors in 13 different languages – even within the same document! And you can add custom words to a global dictionary to make sure ‘custom’ words are also corrected.

How to install the Spell Checker Pro plugin:

1. To start, you need an API key - sign up for one here.

2. Then, create an HTML file with the TinyMCE init script, and API key:

<script src="https://cdn.tiny.cloud/1/Your-API-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
	tinymce.init({
	selector : "#mytextarea",
	width: 600,
	height: 700,
	  plugins: [ ],
	  })
</script>

3. Include the Advanced Spell-checker plugin within the list of TinyMCE plugins. 

plugins: [‘tinymcespellchecker’],
	  })

4. Include a Toolbar, and configure it with the Spell-checker plugin.

plugins: [
	"tinymcespellchecker"
	],
	toolbar: "spellchecker spellcheckdialog",

LMS essential #2: Link checking

Few things are as disruptive as reading an instruction, or a student’s essay, that references a web page and it turns out that an important link is broken.

With the TinyMCE Link Checker plugin, every inserted link is validated to make sure it leads to a working web page and not a dead end. This saves a lot of wasted time going back and forth between a student and teacher.

How to install the Link Checker plugin:

1. Add the Link Checker plugin and the Link plugin into the list of plugins:

plugins: [‘tinymcespellchecker link linkchecker’],
	  })

2. Configure the Link plugin to appear into the toolbar:

plugins: [
	‘tinymcespellchecker linkchecker’
	],
	toolbar: "spellchecker spellcheckdialog link linkchecker",

LMS essential #3: PowerPaste

Let’s face it, not every content contributor is able to do all their writing in the text editor. They might be:

• A guest professor or subject matter expert lacking an account
• A teacher not having the proper permissions for a page
• Or a new student who’s just started to study.

Inevitably people use different tools outside of the Learning Management System to write their draft information. Typically they use Microsoft Word or Google Docs, and they then email those documents to your end-users to deal with uploading the material.

Luckily TinyMCE has an awesome feature called PowerPaste that makes transferring content from MSWord and GDocs a breeze.

If you’re a developer, you probably know that MSWord outputs a rather nasty HTML mess you probably don’t want in your database. Not only does PowerPaste clean the HTML – making it both accessible and responsive (two key factors when dealing with publishing content in a web browser) – but it retains much of the formatting made in MSWord and GDocs. So that means the end-user doesn’t have to recreate it all in the LMS editor. That’s a real time saver.

How to install the PowerPaste plugin:

1. Add the PowerPaste plugin to the list of plugins:

plugins: [‘tinymcespellchecker linkchecker powerpaste’],
	  })

2. Include PowerPaste into the toolbar. This option is a toggle for setting PowerPaste plain text mode on and off. When toggled on, content pastes as plain text with no rich text design.

plugins: [
	‘Tinymcespellchecker linkchecker powerpaste’
	],
	toolbar: "spellchecker spellcheckdialog linkchecker pastetext",

LMS essential #4: Advanced Tables

A common use case in education is writing ‘ordered’ content in a tabular form. In plain English, that means: a table, where the order of the rows is important to the content’s accuracy, priority or the message conveyed. It can be anything from a table describing assignment criteria, student grades, step-by-step instructions, event attendee lists, or any type of alphabetized list in the shape of a table.

The TinyMCE Advanced Tables plugin easily handles these types of tables, by allowing  the author to quickly sort the table in whatever fashion is necessary. There’s no need for manual reordering of the rows, just click a button and TinyMCE does it for you.

The Advanced Tables plugin also has a numbered row feature, that allows you to make numbered lists, but as tables! This is very useful when writing more complex step-by-step instructions.

How to install the Advanced Tables plugin:

1. Include the Advanced Tables plugin to the list:

plugins: [‘tinymcespellchecker linkchecker powerpaste table advtable’],
	  })

2. Add the table option to the menu bar and tool bar:

plugins: [
	‘tinymcespellchecker linkchecker powerpaste table advtable’
	],
	toolbar: "spellchecker spellcheckdialog linkchecker pastetext",
	Menubar: ‘table’

3. Configure the Advanced Tables with a numeric value series:

{ // Natural number series
  numeric: { 
	title: 'Numeric',
	update: true,
	resizable: false,
	generator: `GeneratorFunction` // For details, see: 'Creating a value series generator'
},

Check on our guide on how to generate sortable HTML tables for more information on configuring the value series option, into your TinyMCE HTML.

LMS essential #5: Comments

An LMS is collaborative by its nature. Teachers providing feedback to students is an integral part of the learning experience, and all of TinyMCE’s vast features can be configured into a very capable word processor for long-form writing. When marking or handling  feedback on long essays and assignments, a teacher needs to be able to conveniently select text and provide comments specific to that text.

The TinyMCE Comments plugin enables you to easily integrate this otherwise advanced feature into your app in no time.

How to install the Comments plugin:

1. Add in the Comments plug into the list of plugins:

plugins: [‘tinymcespellchecker linkchecker powerpaste table advtable’ ‘tinycomments’],
	  })

2. Include the comments options as a separate group in the toolbar, separated by a pipe character:

plugins: [
	‘tinymcespellchecker linkchecker powerpaste table advtable’ ‘tinycomments’
	],
	toolbar: "spellchecker spellcheckdialog linkchecker pastetext | addcomment showcomments",
	Menubar: ‘table’

Once this part of the configuration is complete, you need to configure either embed mode, or callback mode for the comments plugin to work. Read our documentation on how to do this.

Here’s an example:

tinycomments_mode: 'embedded',
tinycomments_author: currentAuthor,
tinycomments_can_resolve: function (req, done, fail) {
	var allowed = req.comments.length > 0 &&
	req.comments[0].author === currentAuthor;
  done({
	canResolve: allowed || currentAuthor === userAllowedToResolve
	});
},

The complete rich text editor for a Learning Management System

Here’s how the final HTML looks with all the above components complete.

(Please note, this is not production ready. The Comments plugin needs to be configured with your database. A placeholder variable that allows the demo to work is included in the following HTML. Change this when running your Learning Management System in production.)

<script>
        var currentAuthor = 'A Tiny User';
        var userAllowedToResolve = 'Admin1';

        tinymce.init({
        selector : ".mytextarea",
        width: 600,
        height: 700,
        skin: "snow",
        plugins: [
              "tinymcespellchecker link linkchecker powerpaste table advtable tinycomments",
        ],
        toolbar: "undo redo | bold italic underline | linkchecker link | spellchecker spellcheckdialog  pastetext | addcomment showcomments | table advtablerownumbering",
	    menubar: "file edit view format insert linkchecker table",
        tinycomments_mode: 'embedded',
        tinycomments_author: currentAuthor,
        tinycomments_can_resolve: function (req, done, fail) {
	      var allowed = req.comments.length > 0 &&
	      req.comments[0].author === currentAuthor;
          done({
	      canResolve: allowed || currentAuthor === userAllowedToResolve
	       });
          }, // Natural number series
        numeric: { 
	    title: 'Numeric',
	    update: true,
	    resizable: false,
	    generator: `GeneratorFunction` // For details, see: 'Creating a value series generator'
        },
      })
 </script>

What else can you add to your Learning Management System?

The plugins listed are just a few of the out-of-the-box features you get when choosing TinyMCE as your LMS  rich text editor. Other things for you to consider:

• Accessibility is vital. Configuring TinyMCE’s Accessibility Checker plugin enables automated checking for content to ensure it complies with WCAG and ARIA standards .
• Create a custom skin (AKA user interface) to control how your Learning Management System looks to r your educators and their students.

In addition to these plugins, it’s important to add a company Support plan and SLAs  to take care of the rich text editor part of your app. Making that investment ensures that it takes a fraction of the usual time and resources it takes to build from scratch and maintain any of these features yourself.

TinyMCE is available as Self-hosted or served through our robust Cloud. Explore these features today by signing up for a FREE API key and try them out for a 14-day FREE trial.