TinyMCE not working: possible causes and fixes

When you’re facing a setback, it can feel like you can never get over it. In hindsight though, you can also often see it for what it was.

A clear example of a set back is when your code’s not working, and there’s no good reason why it isn’t. In fact, that very example perfectly captures the feeling of running directly into a brick wall.

But with a bit of help, you can step over any setbacks, and give yourself the greatest of satisfaction..

That’s the point of this article – to help you find out why the TinyMCE rich text editor isn’t working for you. It’s a troubleshooting list, sure, which you’ve probably already thought through, or read about (e.g the cloud troubleshooting list in the documentation). However, this article also gives you some examples to try that may help you shift your perspective on the problem.

Here’s the answers you’ve been looking for:

TinyMCE not working due to the init script
TinyMCE not working as a result of typos and syntax

    Inline mode activated?
    Self host or Cloud reference?

TinyMCE not working with Django and Python
TinyMCE not working when submitting forms
Where else to find answers

TinyMCE not working due to the init script

This is the core of how TinyMCE works. Here’s the parts of the init script again so you can see clearly:

1. Script Tags <script></script>
2. Tinymce.init function <script> tinymce.init({}) </script>
3. A selector (this can be any valid CSS class or id). <script> tinymce.init({selector: “#tinymce” }) </script>

Here’s an example of what can go wrong and how to fix it:

<script>
   tinymce({
      selector: “.tinymce”
  })
<script>

Did you catch the other error? The init function was not entered correctly, on top of the open script tags:

<script>
   tinymce.init({
      selector: “.tinymce”
  })
</script>

Checking the init script for syntax errors is the first step. If that wasn’t a fix, move on to typos and syntax errors within the init script itself.

TinyMCE not working as a result of typos and syntax

You might find TinyMCE isn’t working, even though you’ve configured the tinymce.init correctly. Check through how you’ve typed out each value within the init script. At the risk of overloading you with advice, do these checks as well:

1. Always place a comma after each value. This is easy to miss when you have a lot of content in your init script.

2. Follow one of the three standards to configure a list of TinyMCE plugins. There are three ways to include a list of plugins:

   1. An array of strings: plugins: [ ‘powerpaste’, 'image', 'help', 'wordcount' ]

   2. A space-separated string: plugins: 'powerpaste image help wordcount'

   3. A comma-separated string: plugins: 'powerpaste,image,help,wordcount'

As for the first situation, look at this code snippet. A missing comma after a value is what’s gone wrong here:

<script>
   tinymce.init({
      selector: “.tinymce”
      content_css : '<?php echo($method->baseURL()); ?>/Theme/master_custom.css?' + new     Date().getTime(),
      fontsize_formats: "2pt 4pt 6pt 8pt 10pt 12pt 14pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt",
      height: 600
      plugins: [
     "powerpaste advlist advtable autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
     "save table contextmenu directionality emoticons template paste textcolor filemanager"
       menubar: 'file edit view insert format tools table tc help',
      noneditable_noneditable_class: 'mceNonEditable',
     ],
  })
</script>

The “height: 600” value is missing its trailing comma, and causing TinyMCE to not work. A text editor with a JavaScript linter installed picks up on these typos. For those of you not using a text editor, look into text editors. They have plugins that can save time debugging, formatting, and writing boilerplate.

With these typographic errors covered, next check on where your scripts are placed to get TinyMCE working.

Inline mode activated?

When inline mode is on, but TinyMCE isn’t working, check the element you’ve selected to be a rich text editor.

TinyMCE inline mode only works on HTML elements other than the <textarea> element in your app. That’s the golden rule to keep in mind.

Self-host or Cloud reference?

It can get confusing about how to make sure you have the references to TinyMCE configured correctly. It’s different for Self-host compared to Cloud, but there’s a solution. Check the pathways:

1. The Self-hosted configuration works best when you:
   1. Unzip the TinyMCE file, and move it into the same directory as your application or project.
   2. Add a Relative reference to the TinyMCE minified .js file
2. The Tiny Cloud pathway is always a cdn link. In the link, you can see the version of TinyMCE you are using.

Here’s how to tell the difference:

Tiny Cloud:

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

Tiny Self-hosted:

<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>;

TinyMCE not working with Django and Python

When you’ve got a TinyMCE integration with Django going to build up your interface, there’s a few points to check on. 

• Your imports, and how they’re set up
• The settings.py values, in regards to locating the tinymce.min.js URL

Here’s an example of TinyMCE in a Django configuration with Python. It has lazy loading configured:

from tinymce import models as tinymce_models
content = tinymce_models.HTMLField(blank=True, null=True)

When you’ve set up TinyMCE, you then don't need to modify, change, adapt, or otherwise mess around with the default TINYMCE_JS_URL and TINYMCE_JS_ROOT settings.

Having said that, you can adjust the TINYMCE_JS_URL value to call out the the Tiny CDN link:

TINYMCE_JS_URL = "https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js";
TINYMCE_COMPRESSOR = False;

If you find yourself working with something like an add_post.html page, check on the page contents, and add in:

<script>
tinyMCE.init({  //the tinymce.init object
  selector: "#id_myfield",  // your TinyMCE selector, which is any valid CSS selector
});
</script>

Check for the init object and the selector. It may be what’s stopping TinyMCE initializing in your Django project. If your project uses forms, this can be something else that’s annoying to get working. But there are solutions to form problems.

TinyMCE not working when submitting forms

Another issue you might run into is TinyMCE initializing correctly, but the main purpose for the text editor being in the page isn’t working. One of the major examples is when TinyMCE is used in forms, and when the GET request to retrieve the form information runs, the entire request stops.

The solution is to first call tinyMCE.triggerSave(). Add this to your GET request to call the save method on each TinyMCE instance. It’s an essential function for forms.

Where else to find answers

When you sign up for a FREE TinyMCE API key, the 14 days of access to the Premium Plugins comes with support services. You can reach out and contact us for more support if TinyMCE isn’t working after checking through the steps in this article.

You can also check on the [tinymce] tag on Stack Overflow. There is an active community who most likely have run into the same issues and solved them. To log an issue with TinyMCE, check on the GitHub repository – issues added here are investigated to find out what’s going on, and to correct any problems causing setbacks.