How to configure LMS with TinyMCE Self-hosted and Cloud

Learning management needs accuracy, integrity, and transparency. Alongside these virtues is another, more practical value that every Learning Management System (LMS) must have: security

Security and integrity go hand in hand.

To add both security and integrity to your LMS, the best LMS editor component that can support you, is TinyMCE.

And for added security, you can self-host TinyMCE within your own premises, so your teaching content and students' work is managed the way you prefer. Then by combining Self-hosting with the functionality provided by Premium Plugins from TinyMCE cloud, your LMS reaches further to support teachers and student learning..

That’s exactly what you learn in this article. Read on for a guide on how to design your LMS editor. The end result? You’ll know exactly what you need to run an LMS with TinyMCE Self-hosted and TinyMCE Cloud.

What you need for your LMS

The TinyMCE Cloud component

First of all, get your TinyMCE API key. This key gives you free access to TinyMCE premium plugins for 14 days.

Why do this? What’s the API key do?

The API key provides a premium plugin preview for your LMS
Getting your API key gives you everything TinyMCE has to offer for an LMS text editor solution, to try for yourself
Check on the LMS Solutions page to see the wealth of premium features.

You can get your TinyMCE API key two ways:

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

Enter an email and password, and click Sign up. When you arrive at the TinyMCE dashboard, your API key is waiting for you in the center of the page. You can use TinyMCE without an API key. However there will be warning messages in the text editor area.

<code>
  “This domain is not registered with Tiny Cloud.  Please see the quick start
  guide or create an account”
</code>;

Adding your API key to your app or project, removes these warning messages.

The TinyMCE Self-hosted LMS component

The second part of this setup is to download a copy of TinyMCE in .zip format.

On the Get-tiny sign up page, click the Download TinyMCE SDK Now button. A .zip file then starts downloading into your downloads folder.

This .zip file holds the rich text editor. This is what you host on your own workspace.

How to set up TinyMCE Self-hosted

Start with the zip file – unzip the tinymce file you downloaded in the previous step (the file name - tinymce_6.0.3.zip or similar)
Create a new directory for testing out TinyMCE Self-hosted for your LMS (try mkdir TinymceLMS as a reminder)
Move the unzipped tinymce folder into that directory
Create a new index.html file in the directory, and include the beginnings of the LMS app HTML:

<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>TinyMCE in LMS</title>
  </head>
  <body>
  </body>
</html>

Inside the head of the document, reference the local tinymce.min.js file:

<script src="/tinymce/js/tinymce/tinymce.min.js"></script>;

Place another script tag after the Self-hosted content, and include the tinymce.init content:

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

Add a pair of div tags with the class “editor-wrap”, and a pair of textarea tags into your html file body. Give them the id of “editor”:

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

Save the file, and then load the file in a browser. Or use a local server with Python or PHP:

TinyMCE for LMS loading for the first time

With these steps complete, you’ve successfully set up TinyMCE Self-hosted (excellent work!).

Next, we combine Self-hosted TinyMCE with the cloud CDN link (to try out the premium plugins!)

TinyMCE Cloud and TinyMCE Self-hosted together

Add a link to TinyMCE with your API key in your index.html head before the TinyMCE Self-host link:

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

Add the following new configuration to your tinymce.init script. This will rewrite and change the editor’s capabilities to better suit academic integrity in your LMS:

<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[] caption {
                display: table-caption;
            }
            `
        });
    </script>

Include additional CSS in a pair of style tags to change the LMS page around the 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>

Next, for the LMS content, include the following sample content drawn from the TinyMCE LMS solutions page:

<textarea id="editor">
                <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>

Save and reload the demo.

Here's a codepen example of the LMS:

LMS content in action

There are several features configured here for academic integrity:

1. Non-editable tokens and text patterns

Use the Tokens drop down menu to add non-editable content, and then try typing in content that was blacklisted by the text patterns configured in the earlier steps:

TinyMCE non-editable and text patterns working in LMS

2. Page embed

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

Page embed working in TinyMCE

3. Advanced Media embed

Add this video on color theory to the source table, using the advanced media embed:

TinyMCE media embed working for LMS purposes

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 automatically working in your DMS

The next steps for your LMS editor

For teachers searching for integrity, TinyMCE gives what’s needed to create an LMS that promotes integrity.

Check out our LMS editor page next – the procedure in this article covers just one facet of the TinyMCE configuration that works best for a LMS – there are a wealth of opportunities and plugins that you can can adapt to fit your LMS project plans.

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.

Get your FREE TinyMCE API key today!