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

How to build a LMS app with TinyMCE Cloud

Joe Robinson

June 28th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

In learning, academic integrity flows across every role – teachers, students, heads of department, administrators… It affects everyone and every aspect of learning management. But what does it take to fit integrity into the systems and tools used in learning management?

Perhaps a better question is: Can you program integrity into a Learning Management System (LMS)?

It depends on the LMS and the editor component in question. TinyMCE represents an editor component that supports the needs of an LMS. It includes:

  1. Non-editable PDF Export
  2. Enhanced Media Embedding for reference
  3. Link checking with Autolink (no pretend links)

TinyMCE gives you these features, and more.

And, when you configure TinyMCE as your rich text editor with TinyMCE Cloud, the configuration setup process quickly gives you a fully featured LMS text editor.

Setting up the rich text editor in a LMS takes a few steps, but it’s worth trying out to see the features in action. Follow the steps in this article to set up TinyMCE Cloud in a LMS configuration.

What you need to get started

To get TinyMCE, register for an API key. The API key gives you free access to TinyMCE premium plugins for 14 days. Support is included within these 14 days, and using your API key stops warning messages in the text editor.

How to get a key:

  1. Navigate to the pricing plans for TinyMCE. Choose the plan that fits your app.
  2. Go directly to the Get-tiny sign up page to get your FREE API key

Type in your account information. Select Sign up. When you arrive at the dashboard screen, you can see your API key on the page.

TinyMCE does work without an API key. However there will be warning messages in the text editor area:

This domain is not registered with Tiny Cloud.  Please see the quick start guide or create an account

Remove these warning messages by adding your API key as a reference within an app. The following demo shows how these steps are done.

Set up TinyMCE Cloud with a LMS

  1. In a new directory, create an index.html file.

  2. With your file open, in the head section, add script tags, and reference TinyMCE Cloud through a CDN link within the script tags. Copy and paste this content into your HTML file:

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;

Replace the “your-api-key” with your API key from your TinyMCE account.

  1. Add the tinymce.init script to your index.html demo. Here’s the complete HTML and JavaScript content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LMS use-case demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"><script>

<script>
      
      tinymce.init({
        selector: "#editor",

        plugins: "code a11ychecker autosave autoresize link image table lists media mediaembed tinymcespellchecker powerpaste emoticons charmap linkchecker checklist tinycomments charmap preview fullscreen",
        
        toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist indent outdent | link image media table | subscript superscript charmap blockquote | spellchecker a11ycheck  |  addcomment showcomments | fullscreen preview",
        
        statusbar: false,
        toolbar_sticky: true,
        a11y_advanced_options: true,
        a11ychecker_html_version: 'html5',
        a11ychecker_level: 'aa',
        
    });
    </script>

</head>
<body>

<div class="editor-wrap">
    <textarea id="editor">
      <h1>TinyMCE</h1>
    </textarea>
</div>

</body>
</html>
  1. Test run the index.html file by opening it in your browser, or use a local server command with Python or PHP:

TinyMCE lms demo working

When you see the text editor load, your Tiny test is a success (good work!). Up next, how to configure the academic integrity and other features with TinyMCE in LMS:

Configure TinyMCE for LMS text editing

The first change to make is some additional configuration added to the tinymce.init script.

  1. Adjust the tinymce.init script, including adding a LMS style the rich text editor:

<script>
// TinyMCE Learning Management System (LMS) Starter Config
// An array containing the non-editable tokens for the tokens dropdown

var tokens = [
    { text: "student.name", value: "{{student.name}}" },
    { text: "course.name", value: "{{course.name}}" },
    { text: "assignment.name", value: "{{assignment.name}}" },
    { text: "assignment.duedate", value: "{{assignment.duedate}}" },
];

tinymce.init({
    selector: "#editor",
    plugins: "autosave autolink autoresize code emoticons export image link linkchecker lists media mediaembed pageembed powerpaste table",

//Toolbar design for LMS
    toolbar: "undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | indent outdent | bullist numlist checklist | export pagebreak | pageembed | tokens",
    statusbar: false,
    toolbar_sticky: true,

//Non-editable, matches {{handlebar}},
    noneditable_regexp: /{{[^}]+}}/g,

// Register a custom toolbar menu button to insert tokens
    setup: (editor) => {
      editor.ui.registry.addMenuButton("tokens", {
      text: "Token",
      tooltip: "Insert token",
      fetch: (callback) => {
          var items = tokens.map((token) => {
          return {
              type: "menuitem",
              text: token.text,
              onAction: () => {
                editor.insertContent(token.value);
           }
        }
    });

callback(items);
    }

   });
  },

//Formatting shortcuts, and blacklisting with text patterns
text_patterns: [
    { start: 'darnit', replacement: '🤬' },
    { start: '💩', replacement: '😊' },
    { start: '1/2', replacement: '½' },
    { start: '--', replacement: '—' },
    { start: '(c)', replacement: '©' },
    { start: '->', replacement: '→' },
    { start: '* ', cmd: 'InsertUnorderedList' },
    { start: '1. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' } },
    { start: '#', format: 'h1' },
    { start: '##', format: 'h2' },
    { start: '###', format: 'h3' },
  ],

//LMS editor style
    content_style: `
      body {
      max-width: 800px;
      margin: auto;
      font-family: 'Asap', serif;
      font-size: 17px;
      color: #222f3e;
   }

h1, h2, h3, strong {
      font-weight: 550;
   }

.mceNonEditable {
      padding: 1px 0;
      color: #44719B;
      font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.9375em; 
   }

table th, table thead td {
      background-color: #ecf0f1;
      font-weight: 550;
      text-align: left;
   }

table caption {
      display: none;
   }

table[data-mce-selected="1"] caption {
      display: table-caption;
   }
   `
  });
</script>
  1. Add some style content to adjust the LMS appearance:

    <style>
        body {
            margin: 60px 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #fafafc;
            font-family: 'Asap', serif;
            color: #222f3e;
        }

        .editor-wrap {
            max-width: 1200px;
            margin: auto;
        }
    </style>
  1. Save the style changes, and reload the LMS in your browser.

With the style complete, the text editor changes from an example into something resembling a LMS. Next is to introduce content intended to support teachers using the LMS

LMS content control and integrity with TinyMCE Cloud

This LMS config draws some sample content from the TinyMCE LMS config.

Adding sample assignment design content

  1. Adjust the HTML content within the text area tags to include the following:

<h1>Assignment: {{ assignment.name }}</h1>  
  <p>Enter a short introduction to the assignment. Export this document as a PDF and save in local workstation and shared drive when complete.</p>  

  <h2>Learning Outcomes</h2>  
    <p>Describe learning outcomes for the assignment in relation to curriculum, budgets, and risk assessment</p>  

  <h2>Initial Feedback</h2>  
    <p>Place any feedback gathered from panel here:</p>  

  <h2>Content Exemplars and Sources</h2>  
    <p>Include links to exemplar or source material for the assignment</p>  

  <table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">  
    <thead>  
      <tr>  
        <td style="width: 18.2224%;" scope="col">Source Title</td>  
        <td style="width: 28.2224%;" scope="col">Embed Source</td>  
        <td style="width: 5.2224%;" scope="col">Checked?</td>  
      </tr>  
    </thead>  
  <tbody>  
      <tr>  
        <td scope="col"></td>  
        <td scope="col"></td>  
        <td scope="col"></td>  
      </tr>  
  </tbody>  
  </table>  

  <h2>Grading Criteria</h2>  
    <table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">  
      <thead>  
        <tr>  
          <th style="width: 18.0915%;" scope="col"> </th>  
            <td style="width: 18.0915%;" scope="col">High Achievement</td>  
            <td style="width: 18.2224%;" scope="col">Good Achievement</td>  
            <td style="width: 18.2224%;" scope="col">Pass</td>  
            <td style="width: 18.2224%;" scope="col">Fail</td>  
        </tr>  
      </thead>  
    <tbody>  
        <tr>  
          <th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>  
            <td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>  
            <td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>  
            <td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>  
            <td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>  
        </tr>  
        <tr>  
          <th style="width: 18.0915%;" scope="col">Argument composition skills</th>  
            <td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>  
            <td style="width: 18.2224%;">The student shows good argument composition skills</td>  
            <td style="width: 18.2224%;">The student shows some argument composition skills.</td>  
            <td style="width: 18.2224%;">The student does not show clear argument composition skills</td>  
        </tr>  
        <tr>  
          <th style="width: 18.0915%;" scope="col">Consulted resources</th>  
            <td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>  
            <td style="width: 18.2224%;">The student has consulted good resources</td>  
            <td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>  
            <td style="width: 18.2224%;">The student has not consulted adequate resources</td>  
        </tr>  
        <tr>  
          <th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>  
            <td style="width: 18.0915%;">The student shows a command of the language in their work</td>  
            <td style="width: 18.2224%;">The student shows effective writing skills</td>  
            <td style="width: 18.2224%;">The student shows clear writing skills</td>  
            <td style="width: 18.2224%;">The student shows unclear writing skills</td>  
        </tr>  
      </tbody>  
    </table>  
  </textarea>  
  1. Save the changes, and reload the demo.

A note on non-editable content

Any content wrapped in the “{{ }}” curly bracers appears non-editable. This prevents change to the due dates assigned to students, student names, and assignment names.

The style of the non-editable areas were also associated with a class. Because of this, a CSS style applied to the class in the tinymce.init script controls and changes their appearance.

TinyMCE Cloud LMS content in action

The LMS config here shows an assignment criteria sheet builder, with a rubric, and space for capturing and checking potential sources. Academic integrity affects all roles. And this config supports a teacher’s work.

Check on the TinyMCE LMS solutions page for a different config.

For this config, there are several useful functions working. Next up is a detailed look at what they can do.

Since this config has some longer blocks of JavaScript and HTML, you can test out the features in this code pen:

LMS content in action

1. Non-editable tokens and text patterns

One popular use of TinyMCE’s Non editable plugin in LMSs is to support the use of merge tags, where the content author can input tokens, such as the student name, due dates or other data that is dynamically populated and should not be modified.

Use the Tokens drop down menu to add merge tags.

The text patterns configured earlier also work well writing content around merge tags.the initial LMS design working with tinymce

2. Page embed

Next, try adding a link to the wikipedia article on teachers to the source table as a page embed.LMS adding content to the demo

3. Advanced Media embed

Add this video on color theory to the source table, using the advanced media embed:TinyMCE link management for LMS

4. Link Checker

Finally, add a link to this (dubious) wikipedia page: “http://wikkipedia.org/”.

The link checker will automatically flag it as not working with red highlighting.

You can contrast with a working link as well to see the difference:

TinyMCE link checker working in an LMS

The next steps for your LMS editor

Check out our LMS editor page for further information, and remember that your FREE API key grants free access to Premium Plugin functionality for 14 days, after which you need to either choose a Premium plan or remove the TinyMCE premium features.

What you get from TinyMCE’s Premium Plugins:

  • Error-free copy-paste from Word, Excel, and Google Docs with PowerPaste
  • Export non-editable PDF documents for safekeeping using PDF Export
  • Showcase reference materials using Enhanced Media Embed and Page Embed

Contact us for more information if you have any questions on adding TinyMCE to your LMS app. Premium customers and anyone on a 14-day free trial has access to our enterprise-grade professional support team.

LMSIntegrationTinyMCETiny Cloud
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to create a word processor to rival MSWord and Google Docs – tutorial

    by Di Mace, Joe Robinson, & John Rau in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

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
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing