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

6 min read

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 and Footnotes for references
  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 spending a little 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.

It draws example content from the TinyMCE LMS demo config, which you can find collected within the TinyMCE solution pages.

Set up TinyMCE Cloud with a LMS

You can check on the video summary for a guide on how to get set up:

And here's the transcript:

Hey there it's John from Tiny and in this video i'm going to show you how to set up tinymce's lms starter config loading from the cloud we built this starter config based on lms best practices and how some of our customers including blackboard mcgraw-hill and desire2learn use tinymce you can use it for building your own lms from scratch or adding rich text editing capabilities to your existing lms okay let's take a look at how to set it up first you're going to want to head over to tiny.cloud click on solutions and go to learning management system then scroll down to the starter config we have two versions of the config one without code tips and one with code tips if you're new to tinymce we recommend the version with code tips i'm going to copy that config over to my text editor here paste it in and save it then i'm going to reload it on my local web server so it looks good but i've got an error here saying that the domain is not registered with tiny so i need to go into my account copy over my api key and paste it into the script tag where i'm including tinymce i'll save it reload the page and there we go we've got the full featured lms starter config on my local web server from here you can take the code put it into your app and play around with the settings to make it perfect for your lms if you don't have a tiny mce api key you can head over to our pricing page and sign up for a free 14-day trial to try out all the premium features included in the starter config the 14-day trial also comes with access to our support team which can help you get started if you get stuck so what's next you're going to want to learn how to get and set content from the editor i've included a link in the description for you to check that out we're going to be releasing a lot more content on rich text editing in lms's so be sure to check out our youtube channel and head over to our blog for more resources good luck
  1. In a new directory, create an index.html file

  2. Create HTML boilerplate for the file, including a head and body section
  3. 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/lw2snvww4ggtq3zyd4w5wjy0pu12gtzkbwjgydm1hdagxpp8/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: "#editor",
    });
  </script>
  </head>
  <body>
      <div class="editor-wrap">
        <textarea id="editor"></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.

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, drawing content from the demo LMS config, to shape an LMS rich text editor, including some CSS to change the editor appearance:

<script>
    tinymce.init({
      selector: "#editor",
      plugins: "a11ychecker advcode autocorrect autoresize autosave charmap charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tinycomments tinymcespellchecker",

      toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker a11ycheck  |  addcomment showcomments | fullscreen preview",

      statusbar: false,

      toolbar_sticky: true,

      mediaembed_max_width: 800,

      block_formats: 'Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p',

      font_css: ['https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap'],

      a11y_advanced_options: true,
      a11ychecker_html_version: 'html5',
      a11ychecker_level: 'aa',

      mergetags_list: [
      {
        title: "Course",
        menu: [{
          value: 'Course.Name',
          title: 'Course Name'
        },
        {
          value: 'Course.Teacher.Name',
          title: 'Teacher Name'
        },
        {
          value: 'Course.Department.Head',
          title: 'Department Head'
        }
        ]
      },
      {
        title: "Assignment",
        menu: [{
          value: 'Assignment.Name',
          title: 'Assignment Name'
        },
        {
          value: 'Assignment.DueDate',
          title: 'Assignment Due Date'
        }
        ]
      },
      {
        title: "Student",
        menu: [{
          value: 'Student.Name',
          title: 'Student Name'
        },
        {
          value: 'Student.ID',
          title: 'Student ID'
        },
        {
          value: 'Student.Email',
          title: 'Student Email'
        }
        ]
      }
      ],

      text_patterns: [
        { start: 'darnit', replacement: '????' },
        { start: '????', replacement: '????' },
        { start: '1/2', replacement: '1/2' },
        { start: '--', replacement: '--' },
        { start: '(c)', replacement: '(c)' },
        { start: '->', replacement: '?' },
        { start: '* ', cmd: 'InsertUnorderedList' },
        { start: '1. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' } },
        { start: '#', format: 'h1' },
        { start: '##', format: 'h2' },
        { start: '###', format: 'h3' },
      ],

      tinycomments_mode: 'embedded',
      tinycomments_author: 'rmartel',
      tinycomments_author_name: 'Rosalina Martel (Instructor)',
      tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',

      sidebar_show: 'showcomments',

      content_style: `
      body {
        max-width: 800px;
        margin: auto;
        font-family: 'Asap', serif;
        font-size: 17px;
        color: #222f3e;
      }
      h1, h2, h3, strong {
        font-weight: 550;
      }
      table th,
      table thead td {
        background-color: #ecf0f1;
        font-weight: 550;
        text-align: left;
      }
      table caption {
        display: none;
      }
      table[] caption {
        display: table-caption;
      }
      .mce-footnotes {
        font-size:12px;
      }
      `
    });
  </script>
  1. Add some style content to adjust the overall appearance of the demo around the LMS rich text editor:

<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:TinyMCE LMS demo running in a 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 to include the following HTML drawn from the LMS demo config:

<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:

TinyMCE LMS working with content in the browser

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:

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 configure URL validation in your app

    by Joe Robinson 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