Tiny Logo
Log InGet Started

The best LMS editor for your
learning management software

Building or extending. Delivering or learning.
No matter the project, TinyMCE works best.

Get TinyMCE FREEExplore Premium Plans
International Institute of Art
Save course
Delete course
Assignment #5: Color Theory
Tiny Logo

Transform the content on your LMS platform

Intuitive and feature-rich, the TinyMCE LMS editor increases course creators’ productivity and multiplies student engagement and collaboration. Your developers have full control of the code, UI, configuration and integrations, while your non-technical users – teachers, course designers, subject matter experts and administrators – can create, manage and modify every type of content within your LMS platform.

LMS starter config

Without code tipsWithout code tipsWith code tips

The basic editing experience every LMS should start with. Includes all the editing controls your users expect, plus PowerPaste, Accessibility Checker, Enhanced Image Editing and more.

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>LMS use-case demo</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
8    <script>
9      var tokens = [
10          { text: "student.name", value: "{{student.name}}" },
11          { text: "course.name", value: "{{course.name}}" },
12          { text: "assignment.name", value: "{{assignment.name}}" },
13          { text: "assignment.id", value: "{{assignment.id}}" },
14          { text: "assignment.duedate", value: "{{assignment.duedate}}" },
15      ];
16
17      tinymce.init({
18        selector: "#editor",
19        plugins: "code a11ychecker autosave autoresize link image table lists media mediaembed tinymcespellchecker powerpaste emoticons charmap linkchecker checklist tinycomments charmap preview fullscreen",
20        toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist indent outdent | link image media table | subscript superscript charmap blockquote | tokens | spellchecker a11ycheck  |  addcomment showcomments | fullscreen preview",
21        statusbar: false,
22        toolbar_sticky: true,
23        mediaembed_max_width: 800,
24        block_formats: 'Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p',
25        font_css: ['https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap'],
26        a11y_advanced_options: true,
27        a11ychecker_html_version: 'html5',
28        a11ychecker_level: 'aa',
29        noneditable_regexp: /{{[^}]+}}/g,
30        text_patterns: [
31            { start: 'darnit', replacement: '🤬' },
32            { start: '💩', replacement: '😊' },
33            { start: '1/2', replacement: '1/2' },
34            { start: '--', replacement: '--' },
35            { start: '(c)', replacement: '(c)' },
36            { start: '->', replacement: '→' },
37            { start: '* ', cmd: 'InsertUnorderedList' },
38            { start: '1. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' } },
39            { start: '#', format: 'h1' },
40            { start: '##', format: 'h2' },
41            { start: '###', format: 'h3' },
42        ],
43        setup: (editor) => {
44            editor.ui.registry.addMenuButton("tokens", {
45                text: "Token",
46                tooltip: "Insert token",
47                fetch: (callback) => {
48                    var items = tokens.map((token) => {
49                        return {
50                            type: "menuitem",
51                            text: token.text,
52                            onAction: () => {
53                                editor.insertContent(token.value);
54                            }
55                        }
56                    });
57                    callback(items);
58                }
59            });
60        },
61        tinycomments_mode: 'embedded',
62        tinycomments_author: 'john.doe',
63        tinycomments_author_name: 'John Doe',
64        content_style: `
65            body {
66                max-width: 800px;
67                margin: auto;
68                font-family: 'Asap', serif;
69                font-size: 17px;
70                color: #222f3e;
71            }
72
73            h1, h2, h3, strong {
74                font-weight: 550;
75            }
76
77            .mceNonEditable {
78                padding: 1px 0;
79                color: #44719B;
80                font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
81                font-size: 0.9375em;
82            }
83
84            table th,
85            table thead td {
86                background-color: #ecf0f1;
87                font-weight: 550;
88                text-align: left;
89            }
90
91            table caption {
92                display: none;
93            }
94
95            table[data-mce-selected="1"] caption {
96                display: table-caption;
97            }
98            `
99      });
100    </script>
101    <style>
102        body {
103            margin: 60px 16px;
104            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
105            background-color: #fafafc;
106            font-family: 'Asap', serif;
107            color: #222f3e;
108        }
109
110        .editor-wrap {
111            max-width: 1200px;
112            margin: auto;
113        }
114    </style>
115</head>
116<body>
117
118<div class="editor-wrap">
119    <textarea id="editor">
120      <h1>Assignment #3: Color Theory</h1>
121      <p>Hello&nbsp;{{student.name}},</p>
122      <p>For this week's assignment, you will learn the basics of color theory.</p>
123      <p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources consulted. Contact {{teacher.name}} or {{head.department}} if you have any questions about the assignment.</p>
124      <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
125      <h2>This week's tasks</h2>
126      <p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
127      <h3>Topic List</h3>
128      <ul>
129      <li>The origin of Color theory and its effect on emotion and mood is contentious. Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
130      <li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
131      <li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
132      <li>Wassily Kandinsky states &ldquo;Color is a power which directly influences the soul.&rdquo; Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
133      </ul>
134      <h3>Also...</h3>
135      <ul>
136      <li>Think about the difference between mixing colors using colored lights vs using paint.</li>
137      <li>Pay extra attention to the different complementary color models.</li>
138      </ul>
139      <blockquote>
140      <p>&ldquo;Color is a power which directly influences the soul.&rdquo;<br><span style="color: #95a5a6;"><em>&ndash;&nbsp;Wassily Kandinsky&nbsp;</em></span></p>
141      </blockquote>
142      <h2>Deadlines</h2>
143      <p>Please submit your tasks before {{assignment.duedate}}</p>
144      <h2>Grading Criteria</h2>
145      <table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
146      <thead>
147      <tr>
148      <th style="width: 18.0915%;" scope="col">&nbsp;</th>
149      <td style="width: 18.0915%;" scope="col">High Achievement</td>
150      <td style="width: 18.2224%;" scope="col">Good Achievement</td>
151      <td style="width: 18.2224%;" scope="col">Pass</td>
152      <td style="width: 18.2224%;" scope="col">Fail</td>
153      </tr>
154      </thead>
155      <tbody>
156      <tr>
157      <th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
158      <td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
159      <td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
160      <td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
161      <td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
162      </tr>
163      <tr>
164      <th style="width: 18.0915%;" scope="col">Argument composition skills</th>
165      <td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
166      <td style="width: 18.2224%;">The student shows good argument composition skills</td>
167      <td style="width: 18.2224%;">The student shows some argument composition skills.</td>
168      <td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
169      </tr>
170      <tr>
171      <th style="width: 18.0915%;" scope="col">Consulted resources</th>
172      <td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
173      <td style="width: 18.2224%;">The student has consulted good resources</td>
174      <td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
175      <td style="width: 18.2224%;">The student has not consulted adequate resources</td>
176      </tr>
177      <tr>
178      <th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
179      <td style="width: 18.0915%;">The student shows a command of the language in their work</td>
180      <td style="width: 18.2224%;">The student shows effective writing skills</td>
181      <td style="width: 18.2224%;">The student shows clear writing skills</td>
182      <td style="width: 18.2224%;">The student shows unclear writing skills</td>
183      </tr>
184      </tbody>
185      </table>
186    </textarea>
187</div>
188
189</body>
190</html>

"We are saving at least 1 hour every day in support time. What used to take our users 10+ hours fighting the system now gets done in minutes. Our users are creating more content than ever thanks to TinyMCE."

Thomas Wong|Product Manager, 360Factor Consulting/Oasis

"I've worked with lots of different editors, but TinyMCE was the simplest to implement. The amount of functionality you get right out of the box would be foolhardy to try and recreate. TinyMCE solves lots of problems, and it's been trusted by the industry for longer than anything else that I know of."

Tim Craver|Development Manager, Allied Solutions

"One of my favorite things about Tiny is that they respond wicked fast. And I promise you, we're not spending a million dollars a year to get that level of attention. It's a thrill to feel like we're a number one client."

Justin Witz|CTO & Co-Founder, Catapult

"Because we serve the not-for-profit space, we are always very budget-conscious with everything that we do as a company. So, trying to develop a rich text editing tool in-house and maintain it was just not feasible at all."

Dan Plaskon|VP Technology, Better Impact

When you need an LMS editor that’s state-of-the-art

Our editor delivers the best

Faster speed-to-market

Save years of developer time and hundreds of thousands of dollars in engineering costs by leveraging our out-of-the-box editor and 24/7 support team. The best LMS editor gets you to market faster.

Focuses on streamlining content production workflows while protecting academic integrity, with our WYSIWYG LMS editor reducing content creation time by 90% for teachers and creators

Explore features:

PDF Export icon
PDF Export
Faster Speed to Market
Delight your users

Our WYSIWYG LMS editor is built to mimic the tools your users know and love. There’s no ramp-up or steep learning curves – it’s an editing experience your users already know and enjoy.

Spotlight on creating a deeper level of engagement and collaboration, with many users reporting 85% increases in engagement, interaction and involvement

Explore features:

Delight Your Users
HTML you can trust

Take the guesswork out of document creation and publish clean and compliant output from the LMS WYSIWYG editor that’s trusted by 1.5M developers, and over 40% of the world’s websites.

Fit within an enterprise-grade tech stack via 400+ customizable APIs and 12+ framework integrations to create the experience users need

Explore features:

HTML You Can Trust

All-in-one LMS editing tool

Every LMS platform needs an intuitive WYSIWYG editor that’s feature-rich and easy to use for teachers, course creators, subject matter experts and administrators who don’t have the time or skill to code from scratch. Equally, the LMS editor must be totally customizable so your developers can control the back-end, integrate with existing tech stacks and be confident the HTML output is clean, quality and compliant.

The TinyMCE LMS editor turns the creation and updating of content, lesson plans, and assignments into a simple task, and its advanced features lift your students' learning experience to enhance (and encourage) learning. TinyMCE is downloaded 350M+ times every year and available through either a free, open source license or a paid commercial license.

TinyMCE toolbar menu

All the WYSIWYG features
developers (and users) expect

Content Creation

Content Creation

Enable teachers, course designers and students to create content using features they know and love:

  • Error-free clean copy-paste from Word, Excel and Google Docs with PowerPaste
  • Word Count and Search and replace functionality that enhances a wide range of document creation projects
  • Range of content formatting tools like Checklists, Advanced Tables and Page Break
  • Enhanced Image Editing lets users apply 10 powerful transformations to their images – crop, rotate, resize and other filters
  • Autosave avoids the risk of losing content
  • Autoresize allows the editor to resize to fit its contents as it expands
  • Inline editing to Preview how content looks before publishing
  • Generates clean SEO-friendly HTML ready to be indexed by search engines
  • Optimized for desktop and mobile
  • Control the output with a variety of options around HTML and CSS
  • Customize the UI with pre-made Skins and Icons or build your own

Academic Integrity

Academic Integrity

Ensure integrity throughout the learning process via numerous safeguards and capabilities:

  • Use Noneditable to protect students’ work during the review and evaluation process, or on group projects
  • Programmatically retrieve editor content in plain text so it can be automatically sent to third party plagiarism detection services
  • When a document is final, export it to a non-editable PDF document for safe keeping using PDF Export
  • Enable students to showcase reference materials within their content using Enhanced Media Embed and Page Embed
  • Automatically ensure links are active and clickable with Autolink

Accessibility & Compliance

Accessibility & Compliance

Ensure content is aligned with academic and regulatory standards:

  • Maintain regulatory standards and avoid potential fines and lawsuits with Accessibility Checker (WCAG and ARIA)
  • Build custom dictionaries to ensure consistent scientific or subject-matter vocabulary with Spell Checker Pro
  • Globally consistent spelling with simultaneous checking of up to 13 languages (plus medical terminology)
  • Eliminate embarrassing broken links with Link Checker

Collaboration

Collaboration

Produce better academic outcomes with collaborative editing tools:

  • Let students and content creators collaboratively work on content with secure end-to-end encrypted Real-time Collaboration
  • Enhance peer-to-peer collaboration with Comments and threaded conversations
  • Kickstart conversations with @mentions

Media Management

Media Management

Manage student or course files and images in the cloud with Tiny Drive:

  • Upload and browse files, and insert images inside TinyMCE
  • Import existing assets from any connected Google Drive or Dropbox account
  • Minimal configuration, integrates seamlessly
  • Secure – uses utilizes JSON Web Tokens (JWT)
  • Scalable – uses Amazon S3 cloud storage
  • Note: Tiny Drive is an add-on to TinyMCE

Internationalization

Internationalization

Support distance learning from Bogotá to Istanbul:

  • 38 fully-vetted, professional UI translations
  • 37 community-contributed UI translations
  • 13 languages supported with Spell Checker Pro

See full demo | Discover integrations | Explore 60+ features

Ready to use TinyMCE for
your project?

Get a quote

How TinyMCE is different from
the alternatives

Unmatched domain experience

TinyMCE toolbar menu

Every day, the world’s biggest enterprise brands and growing startups rely on TinyMCE for their mission-critical editing needs. For the last two decades, we’ve consistently innovated to create the acknowledged best-in-class rich text editor, that lets developers and creators do more with less by providing:

  • Smooth, lightweight code that achieves both speed and flexibility across every major browser
  • A consistent and reliable release process, providing headache-free upgrades
  • A reliable enterprise-grade editor that's easily customized and also available through an open-source license
  • Reusable, modular components, 400+ APIs and 14+ framework integrations

Frameworks

12+ integrations and 400+ flexible APIs

Easily integrates into your tech stack. Enhances your editing experience. 7 first-party and 5 third-party endorsed integrations that make development easier.

Explore integrations →

Hosting

Get TinyMCE two ways Cloud-based or Self-hosted

Get a Free API key to use TinyMCE from the Cloud or Download the SDK for use in your Self-Hosted application.

See how →

Reliable, responsive and future-facing

TinyMCE toolbar menu

Every day, our Engineering team solves issues the right way, our Product team encourages perfect results (even if launch dates occasionally slip) and the Customer Success team delivers support that’s reliable, fast and friendly. We’re proud of:

  • Maintaining industry-leading response rates across dedicated SLAs
  • 96% support ticket customer satisfaction* (Based on Zendesk ratings)
  • 2.84 hr average response time* (August 2021 data)

Help when and where you need it

Enterprise-Grade Support

Responsive, in-house support to help you implement, customize and troubleshoot.

Learn more →

Community

Thousands of questions and answers updated daily on StackOverflow and Github.

Browse questions →

Documentation

Tutorials, quickstarts, code samples and videos to help you deploy faster.

Explore docs →

Collaborative team that grows with you

TinyMCE toolbar menu

We let companies focus on their core business, so they don’t have to worry about rich text editing. Product teams can delight their users and creators can work smarter, faster and more productively. Our modus operandi is to be:

  • Helpful
  • WYSIWYG and easy to work with
  • Consultative, partnering with you throughout your stages of growth
  • Champions of open source and the dev community who make it all possible

Modify TinyMCE to suit custom use cases

Modify TinyMCE to suit custom use cases

Developers have full source code control for endless customizations

  • Out-of-the-box
  • UI customization
  • API customization
Explore Customization →

Looking for projects that
TinyMCE can be used for?

Access use-case specific starter configs to kickstart your rich text editing project
Content Management Systems (CMS) ->Email & Messaging Platforms ->Document Management Systems (DMS) ->Customer Relationship Management (CRM) ->Workflow & Collaboration Platforms ->Learning Management Systems (LMS) ->Internal & SaaS Applications ->

Related content

The Great Debate Buy vs Build Rich Text Editors

WHITEPAPER

The Great Debate Buy vs Build Rich Text Editors

360Factor Consulting

CASE STUDY

360Factor Consulting

5 Rich Text Editor comparisons

WORLD OF WYSIWYG

5 Rich Text Editor comparisons

How a great WYSIWYG editor can take your LMS to the next level

PRODUCT-LED GROWTH

How a great WYSIWYG editor can take your LMS to the next level

Establishing your LMS business case: Online learning benefits & more

PRODUCT-LED GROWTH

Establishing your LMS business case: Online learning benefits & more

How to take your LMS to the next level

PRODUCT-LED GROWTH

How to take your LMS to the next level

LMS best practices: accessibility in learning management systems

PRODUCT-LED GROWTH

LMS best practices: accessibility in learning management systems

How to create a Learning Management System for educators

HOW-TO USE TINYMCE

How to create a Learning Management System for educators

Get TinyMCE FREELet’s chat
Tiny logo

Stay Connected

Products

TinyMCEDriveMoxieManager
© Copyright 2022 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.