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

How to fix uncaught reference errors: TinyMCE is not defined

Joe Robinson

June 6th, 2022

4 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

Have you ever experienced the uncaught reference error: package is not defined?

This means that as requests were sent by different packages and plugins, the web page loaded, but no package could be found. The order of execution – where elements are in the DOM lifecycle – on the web page is missing something. And that missing something is relied on by a script or function or similar that references it. The browser was not able to "catch" the error, hence uncaught reference.

There's an essential troubleshooting step to take to solve the problem.

No matter what language or framework you’re using, you want to make sure it is following all the steps of the  DOM lifecycle, and that you provide any additional Content Delivery Network (CDN) links or libraries the plugin needs to load. And that these are available when they're referenced, or you've set up a callback to handle it.

Otherwise, you can run into a brick wall of errors. 

Here's a real example

With JQuery, and when loading your website, you receive the following error message:

Uncaught ReferenceError: tinymce is not defined
    at HTMLDocument.<anonymous> ((index):54)
    at j (jquery.min.js:2)
    at Object.add [as done] (jquery.min.js:2)
    at m.fn.init.m.fn.ready (jquery.min.js:2)
    at window.onload ((index):53


Annoying, and avoidable. Thankfully, it’s easy to pull up, course correct, and remove the error.

To get TinyMCE to build for you, though is the goal. That’s what this post explains - how to fix the uncaught reference error if you encounter it when adding TinyMCE to an app or website.

The integrations covered in this post:

  1. TinyMCE reference errors in jQuery
  2. Wordpress uncaught reference errors
  3. React uncaught reference errors
  4. Angular uncaught reference errors

Uncaught reference errors with TinyMCE

Tasks can’t start until another statement or function has finished. When TinyMCE is not working, and you get the uncaught reference erorr, the way to debug and fix the error starts with checking your JavaScript order of execution

Where you configure your tinymce.init script matters.

While It’s important to check other sources of trouble like the scope of your variables, the error that's likely to need attention when it comes to configuring your rich text editor is the or order of execution - when the TinyMCE init happens on the page in the DOM lifecycle.

For instance:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>TinyMCE Uncaught Reference error</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/Add-your-API-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: "#myTextarea",
    </script>
</head>
<body>
<form method="post" action="dump.php">
    <textarea id=’myTextarea’'></textarea>
</form>
<script>
    tinymce.get('myTextarea').setContent("<p>Shouldn’t this be working?</p>");
</script>
</body>
</html>

This script is not going to run because the text area is not yet available to recieve the setContent method. Situations like this are handled by adding set content to a trigger event on the page, like the init script running, or even building a listener to react when customers interact with an element.

Uncaught reference errors with TinyMCE and jQuery

But what about that jQuery example from earlier?

To continue our jQuery example, the solution is to check that the reference to the Tiny CDN appears in your application code. While you may have the JQuery wrapper complete, make sure the following appears in your JQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

It’s a common mistake to include the jquery CDN links, but to forget the tinymce.min.js CDN link. Don’t forget to include it to solve the uncaught reference error.

Uncaught reference errors in Wordpress

But what if you’re using something other than jQuery? 

For example, Wordpress powers more than 37% of all websites, so it’s likely you’ll need to know how to handle any uncaught reference errors when adding TinyMCE to Wordpress. Most issues can be solved by checking the wp-config.php and the class-wp-editor.php files, depending on which version of Wordpress you are using. 


Adjusting the wp-config.php

If you’re using a version of Wordpress from the 3.0 and up series, investigate the wp-config.php file, and complete the following steps:

  1. Open the wp-config.php file
  2. Find the line define('CONCATENATE_SCRIPTS', true); 
  3. Change true to false
  4. Save and reload the WordPress site.

Adjusting the class-wp-editor.php files

Another troubleshooting solution, for version 3.0 and up, is to adjust the class-wp-editor.php file:

  1. Open the class-wp-editor.php file
  2. Find the line if ( $compressed ) {...
  3. Locate the $compressed = 1 above this if statement
  4. Set the 1 to 0
  5. Save and reload the WordPress site.

General Wordpress troubleshooting for TinyMCE

Solving the uncaught reference error for TinyMCE with WordPress can also be addressed by attempting the following: 

  • Revise the plugins loaded into your WordPress site, by switching them on and off one at a time – to confirm that there is no conflict between TinyMCE and another plugin.
  • Check to see if you’re installing the TinyMCE plugin on a parent site, and then attempting to run the plugin on a child site. You’ll need to add the plugin to any separate subdomains.
  • Clear your browser cache, and then clear your WordPress environment cache (you can use a plugin like WP Super Cache to clean server files). 

Uncaught reference errors in Angular

Angular is another popular framework for building websites. The solution to uncaught reference errors when using an Angular app is to check for the TinyMCE CDN link. 

You may have correctly loaded the TinyMCE rich text editor into the component.ts file, but the index.html file may be missing the TinyMCE CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5/tinymce.min.js"></script>;

Uncaught reference errors in React

Similar to the other frameworks, check the React application’s index.html file to make sure that the tinymce.min.js CDN is included in the application index.html file.

TinyMCE-react integration offers editor source configuration. It will first source the Tiny rich text editor globally, and will then check for the tinymceScriptSrc prop. Check on the React integration documentation for more detail.

Don’t forget to check your CDN links


The key troubleshooting tip to try when running into an uncaught reference error, is to check on the CDN link for the tinymce.min.js. Confirm that you have referenced TinyMCE, along with any wrappers or other integration scripts.

If you'd like to try TinyMCE with one of the framework integrations, start by signing up for a FREE  API key, and then investigate the TinyMCE documentation.

IntegrationTinyMCEJavascriptResources
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