Most common plugin errors in TinyMCE and how to fix them

The change from one TinyMCE version to a newer version brings with it the challenge of migration. And one of the most common questions asked of our support team is “How do I get TinyMCE working? It’s covered in warning messages about domain names” or “I keep seeing TinyMCE failed to load plugin”.

Thankfully, these warning messages – both on the textarea and in the browser’s console log – can be dealt with by making some adjustments to how you have configured TinyMCE. That is, where your API key is, and what plugins you have listed in the plugins: [ ] option.

If you’re planning or developing a specific solution that requires a certain set of plugins, handling the error messages and correctly configuring the plugins adds another challenge. Thankfully, you can reconfigure the options around TinyMCE plugins to fit your project or development goals.

Migrating from an older version of TinyMCE to a newer one

This article focuses on migrating from TinyMCE 5 to TinyMCE 6, and the error messages that may follow – depending on how you’ve configured your application. Essentially, it’s recommended to check for the following:

1. Confirm your API key is in place.
2. Look closely at your list of Premium or Core plugins.
3. Take an even closer look at the options you’ve configured (especially the paste plugin).

By reconfiguring your plugins before you migrate to TinyMCE version 6, you're proactively preventing possible plugin errors.

TinyMCE plugin configuration and your API key

If at any point when using TinyMCE you see the following error, register and add your API key:

This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account

This error means you’re using TinyMCE Cloud without first registering for an API key, and adding it to your application. Resolve this error by signing up for an API key (which is FREE), and including it in your project HTML:

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

Register any URLs that will work with TinyMCE by adding them to your TinyMCE account. The local host address is registered as a default. 

Completing these steps should resolve the domain error.

Read-only mode: If you access TinyMCE through Tiny Cloud, and your editor has changed to read-only mode, make sure that your API key is configured correctly. Tiny Cloud requires an API key for the editor to work, otherwise the editor changes into read-only mode.

TinyMCE ‘Premium plugin not working’ messages –  why the warnings appear

If you receive the following error, it means that you’re using a TinyMCE Core version (TinyMCE free and open source, either Tiny Cloud or Self-hosted) and have a Premium plugin configured in your tiny.init script:

The <plugin-name> Premium plugin is not enabled on your API key. 

If your free trial has ended, you’ll receive these messages to let you know that you need to chand to a paid plan to continue using the Premium plugins enabled on your account. To remove these error messages, check on your TinyMCE plugin configuration, and delete any Premium plugin names.

Why TinyMCE has premium plugins and core plugins

For everyday use, the range of TinyMCE Core plugins complete a lot of useful functions. 

Over and above those functions the Premium features provide new and innovative abilities that demonstrate what TinyMCE is capable of, in production with an enterprise-scale application. 

However, not every person in our open source community using TinyMCE in their project, necessarily needs production level abilities.As an exercise, ask yourself how true these statements feel to you: 

• “My project is viewed by many people online each day, and they need to enter text from all different places into a text entry field”
• “A large part of our customer interaction is text based, and requires a reliable text entry field with options for controlling media and other granular points like spelling checking and compliance.”

If these statements don’t reflect your current situation, then it’s very likely that the Core TinyMCE can give you everything you need. If the statements speak to you, and feel more true for your team goals, a possible next step is to review your rich text editor abilities, and talk to us about advanced editing features.

‘TinyMCE ‘failed to load plugin’ error handling

After you download the self hosted version of TinyMCE, move the folder into the same directory as your application, and then confirm that your src=” “ link is accurate.

If you’re using TinyMCE 6 and you receive the following error: 

Failed to load plugin: <plugin-name> from url plugins/imagetools/plugin.min.js

This appears because the plugin location in the source code has changed and is no longer accessible. In TinyMCE 6, some plugins have changed from the Core (open source) group to the Premium group, which can also prompt this error. In this case, check on the plugin name in your configuration.

Make sure you have referenced the plugins correctly, which may involve including the plugin names in a comma-separated array:

plugins: [ "image", "code", "table", "link", "media", "codesample"],

Referencing the plugins with this method can resolve the failure to load error in Self-hosting.

TinyMCE Plugin error handling for upgrading to TinyMCE 6

In this update, some plugins are changing their availability, and some deprecated plugin options are being removed, so you may run into errors relating to specific plugin options.

The Pasteplugin has specifically changed in the migration to TinyMCE 6. You may see this error:

PowerPaste is incompatible with Paste plugin! Remove 'paste' from the 'plugins' option.

To handle this error, adjust the plugins in your TinyMCE configuration:

1. Open the tinymce.init script in your project.
2. Locate the PowerPaste plugin, and remove the plugin from your plugin list if you’re continuing to use only the Core TinyMCE plugins.
3. If you’re using a paid TinyMCE plan, remove the Paste plugin from the Core group of plugins.

TinyMCE 6 and configuring the Paste plugin

Even if you’re using only the Core Paste plugin, you can set up the plugin to provide:

1. Set up paste_block_drop: false to prevent any drag and drop errors.

2. Include paste_data_images: true to keep the images out of the text area.

3. Configure the MS Word elements and style configuration by setting  paste_word_valid_elements: 'b,strong,i,em,h1,h2' and paste_retain_style_properties: 'color font-size'.

It’s important to be aware, though, that some of the options for the Paste plugin that interact with MS Word are being removed in TinyMCE 6.0. This includes not only the valid elements and style retention option, but also the word fake lists option. However, they’ll still work in TinyMCE version 5 series.

If you have these options enabled, and you upgrade to TinyMCE 6, you’ll receive the following error in the console log of your browser:

The following deprecated features are currently enabled and have been removed in TinyMCE 6.0. These features will no longer work and should be removed from the TinyMCE configuration. See the documentation for more information:

• paste_convert_word_fake_lists
• paste_retain_style_properties
• paste_word_valid_elements

For the best outcome, you can remove the MS Word related options, and include the plain text plugin option. This removes all markup and style content from any text pasted into the text editor from MS Word. It also makes for the cleanest possible paste. Here’s a complete example of the configured plugin:

<script>
        tinymce.init({
        selector : ".mytextarea",
        theme: "silver",
        plugins: [ "image code table link media codesample"],
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | media | table',
        //paste Core plugin options
        paste_block_drop: false,
        paste_data_images: true,
        paste_as_text: true,
})
</script>

After handling these errors, it’s time to migrate to TinyMCE 6

Remember that if you run into any errors when trying to access a plugin, you can troubleshoot by checking:

• Your API key – confirm it’s included in the CDN script. Without it, the TinyMCE displays a warning each time it loads and renders in the application interface or web page. Follow the quick start guide for more information.
  
  
• Your plugin names – Premium plugin names in your tiny.init script can be swapped out for Core plugins as needed, and configured with different options for useful functionality.

Sign up for a FREE API key, try out the Premium plugins within the 14-day FREE trial, and decide which one supports your project and business best.