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

How to upgrade TinyMCE 5 to TinyMCE 6

Joe Robinson

April 12th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

With 1.5M+ developers running the rich text editor, TinyMCE remains the most trusted rich text editing software available, and we’re now releasing  TinyMCE version 6.0

The upgrade to TinyMCE 6.0 requires changes to the tiny.init script, and a check through options, plugins, and APIs (the checking steps are needed since the upgrade to TinyMCE 6.0 includes optimizations, and in some cases has rebuilt and renamed capabilities.)

This guide explains how to upgrade to TinyMCE 6.0, and covers exactly what to change in regards to: 

  • The TinyMCE Content Delivery Network (CDN) link 
  • The tiny.init script
  •  Plugin and theme adjustments. 

It also explains what changes to look for in API and plugin options,  when you’re upgrading to TinyMCE 6.0.

Upgrade to TinyMCE 6.0: what’s happening, and when

  • As of 7 April, 2022, TinyMCE 6.0 is available for use within applications and projects worldwide.
  • Versions of TinyMCE in 5 series will remain supported, depending on the minor release numbering. For instance, TinyMCE 5.9 will remain supported until March 15th 2023.
  • Notification messages explaining deprecations appear in the developer tools console when running the TinyMCE 5 series. These notices appear if there are any deprecated plugins, or plugins that are now part of the core capabilities in TinyMCE 6.0, configured in the tiny.init script.

How to upgrade to TinyMCE 6.0

NOTE: Before you upgrade, be aware that TinyMCE 5 plugins are not compatible with TinyMCE 6.0. If upgrading to TinyMCE 6.0, you must adjust your tiny.init script to only use plugin names and options specific to TinyMCE 6.0, otherwise they will not work.

There are three main steps needed to complete for the upgrade:

  1. Check on your CDN script, and update the editor 
  2. Review themes and editing modes
  3. Consider any plugin changes, and review the console log

Upgrade the editor

If you’re using Tiny Cloud, then migrating from TinyMCE 5 to TinyMCE 6.0 requires you to update the TinyMCE CDN.

If you have not already, remember to replace no-api-key with your own API key: from your Tiny account dashboard.

  1. Locate the TinyMCE CDN script in your project, and change the version after /tinymce/5 to /tinymce/6:

<script
  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
  1. Confirm that your HTML and JavaScript configuration has TinyMCE 6.0 configured – check on the following example, which compares TinyMCE 5 and 6.0:

TinyMCE 5 config

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "#mytextarea",
        plugins: ['image' 'help' 'wordcount']
      });
    </script>
  </head>
  <body>
    <h1>TinyMCE Quick Start</h1>
    <form method="post">
      <div id="mytextarea">Hello, World!</div>
    </form>
  </body>
</html>

TinyMCE 6.0 config

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "#mytextarea"
       //plugin configuration has changed in TinyMCE 6. Arrays of strings must be comma separated. They cannot be space separated.
        plugins: [ 'image', 'help', 'wordcount' ]
      });
    </script>
  </head>
  <body>
  <h1>TinyMCE Quick Start</h1>
    <form method="post">
      <div id="mytextarea">Hello, World!</div>
    </form>
  </body>
</html>

If you are Self-hosting TinyMCE, upgrade to TinyMCE 6.0 by navigating to the new community downloads page.

  1. Navigate to the TinyMCE community downloads page
  2. Click the Download button under the Download TinyMCE Community heading to receive the .zip format file.
  3. Unzip the files contents, and move the TinyMCE folder to overwrite the current TinyMCE folder in your project.

Plugin configuration

New in TinyMCE 6.0 are specific plugin formatting rules. You can configure plugins in one of the three following patterns:

  1. An array of strings: plugins: [ 'image', 'help', 'wordcount' ]
  2. A space-separated string: plugins: 'image help wordcount'
  3. A comma-separated string: plugins: 'image,help,wordcount'

TinyMCE 5 and previous versions allowed for a comma-separated string with spaces, and an array of space-separated strings. Upgrading to TinyMCE 6.0 means using one of three new methods:

  1. An array of comma separated strings in quote marks
  2. A space separated string in one set of quotes
  3. A comma separated string in one set of quotes.

When upgrading to TinyMCE 6.0, check on your plugin configuration, and make sure that it matches one of the new plugin formatting patterns.

Upgrade and adjust themes and skins

TinyMCE 6.0 includes a new skin, which appears automatically when loaded. You can change back to the TinyMCE 5 appearance by configuring the tinymce-5 skin in your tiny.init script.

If you’re still using the mobile theme for TinyMCE, this theme was previously deprecated in TinyMCE 5.1. The mobile theme is now removed as of version 6.0. If you load your project with TinyMCE 6.0, and you have the mobile theme configured, you will receive a deprecation notice in the browser console log.

Mobile User Interface support is now available by default in TinyMCE. For mobile design, remove the reference to the mobile theme from your tiny.inti script. 

  1. theme: 'mobile',
        mobile: {
            menubar: true
        },

    If you reload your application after changing to TinyMCE 6.0, the editor will not load, and you will receive a warning message:

    tinymce.min.js:4 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 https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/ for more information.
    
    Themes:
    - mobile
  2. Remove the reference ot the mobile theme Change the mobile theme to the silver theme. The deprecation managers then stop appearing in the console log.

Check your default editor height

When upgrading to TinyMCE 6.0, the default editor height now defaults to 400px. In previous versions of TinyMCE, the default height was 200px.

1. Check your tiny.init configuration for the “height” property. 

2. Specify “height” and the number of pixels if you require an editor heighter larger than 400px, or smaller than 400px.

With these last steps complete, you have successfully completed the first phase in upgrading to TinyMCE 6.0.

Since this is a major release, with potential breaking changes, the next steps are to:

  • Carefully checking through your plugins, and adjust if needed
  • Check any options or APIs you have configured, and adjust if needed

What you need to do after the upgrade

Now you’ve completed the migration, an important step is to double check your console log in developer tools, if you’re using any custom plugins you’ve developed yourself, or included from an open project.

Console log messages indicate what to adjust for your plugins. If you’re making use of TinyMCE in an application within a business, send these warnings to your system administrator for assistance on changing and upgrading TinyMCE.

HTML Schema changes

Since TinyMCE 6.0 uses HTML5 schema by default, you will need to use the HTML 5 elements within the TinyMCE rich text editor. As an example, this means switching out <i> tags for the HTML5 <em> tag syntax.

Upgraded plugins and plugin changes

The following plugins are now included within the TinyMCE 6.0 core functionality, which means you no longer need to explicitly include them in your tiny.init configuration:

  • hr(horizontal line)
  • noneditable
  • paste
  • print

There are also several plugins that have changed from core functionality, to being only included in the premium editor. You will need to remove these plugins if you’re using the free, Core pricing plan.

Check your list of plugins configured in your tiny.init script for these plugins:

  • BBcode – removed in TinyMCE 6.0
  • Full Page – removed in TinyMCE 6.0
  • Image Tools – moved to the Premium plugin list for more support and development and renamed to “Edit Image”
  • Legacy Output – removed in TinyMCE 6.0
  • Spell Checker – removed in TinyMCE 6.0
  • Tabfocus – Removed as a plugin in TinyMCE 6.0. Similar capabilities are available with tab index
  • Table of Contents – moved to the Premium plugin list for more support and development, and renamed from “TOC” to “Table of Contents”

 

Have you used any of the following plugins?

Remove any references to the following plugins:

  1. colorpicker
  2. contextmenu
  3. hr
  4. noneditable
  5. paste
  6. print
  7. textcolor
  8. textpattern

In TinyMCE 6.0, these plugins are now part of the TinyMCE Core. You no longer need to specify them in the plugins, menubar, or toolbar configuration.

Here is an example of a tiny.init script from TinyMCE 5 to 6.0, demonstrating plugin changes with the upgrade:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
        "help", "image", "insertdatetime", "link", "lists", "media", "paste", 
        "preview", "print", "searchreplace", "table", "visualblocks", 
        "bbcode", "fullpage", "imagetools", "legacyoutput", "spellchecker", "toc",
    ],
    toolbar: "undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

And here is the console response if any of the now removed plugins are present: 

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 https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/ for more information.

Plugins:
- bbcode
- fullpage
- legacyoutput
- spellchecker

Upgrade to TinyMCE 5 to 6 deprecation warnings in the console

If you notice this message in your browser console log, remove the plugins listed from your tiny.init script. Then, save and restart your project. Read the Migration Guide for more information on the plugin changes in TinyMCE 6.0.

Renamed plugins and options

The following plugins have been renamed in TinyMCE 6.0:

  • Image tools > Enhanced Image Editing
  • TOC > Table of Contents

And as a result of the name changes, the options available from each plugin have changed as well.

Enhanced Image Editing

  1. imagetools_toolbar > editimage_toolbar
  2. imagetools_proxy > editimage_proxy
  3. imagetools_cors_hosts > editimage_cors_hosts
  4. imagetools_credentials_hosts > editimage_credentials_hosts
  5. imagetools_fetch_image > editimage_fetch_image
  6. imagetools_api_key > editimage_api_key
  7. images_upload_timeout > editimage_upload_timeout

Table of Contents

Several commands for the Table of Contents plugin are now changed. The change mainly affects toolbar buttons:

  1. tocupdate > tableofcontentsupdate
  2. toc_class > tableofcontents_class
  3. toc_depth > tableofcontents_depth
  4. toc_header > tableofcontents_header

If you have any of the following configured in your tiny.init script:

  1. Locate the plugin or options previous name
  2. Replace it with the new name as of TinyMCE 6.0

Other plugins and options changes

If you’ve configured the toolbar_mode option or the forced_root_block option, the way these plugin options behave have changed in TinyMCE 6.0.

The toolbar_mode option will no-longer accepts the false value in TinyMCE 6.0. This was retained for backwards compatibility with the toolbar_drawer option. The 'wrap' option instead keeps the same functionality as false.

The forced_root_block option will no-longer accept the false value or an empty string value in TinyMCE 6.0. Setting forced_root_block to false is not compatible with Real-time Collaboration. It also blocks various editor functions from working correctly and causes non-semantic HTML to be generated.

The Media plugin

Since the Media plugin configuration has changed, any audio, iframe, object, or video tagged elements are no longer treated as a separate or special elements by TinyMCE. These elements need to be configured by specifying them as valid_elements in your TinyMCE configuration. 

The Table plugin

The Table plugin functions are now included in the core capabilities of TinyMCE. Integrating the Table plugin options in TinyMCE 6.0 focuses on User Interface options. Tables also now use the margin attribute and not float to determine their position on a page.

Upgraded options and API changes

API changes: callbacks to promises

Update these APIs to use a promise instead of the success and failure call back: AddOnManager, PluginManager, ScriptLoader, StyleSheetLoader, and ThemeManager.

Have you used textpattern_patterns?

Change this option to the new name text_patterns. This option is now enabled by default. You can switch it off by including the option in your tiny.init script with the false value: text_patterns: false,

Have you configured the isDisabled() method?

The isDisabled() function is now renamed to isEnabled(). If you’ve configured isDisabled() === false, change it to the new isEnabled() === true call. The meaning is reversed, but the function remains the same.

The same change is also in place for the disabled property. This is now the enabled property – set it to enabled: true or false as needed. Search your configuration for these properties and change them out.

If you’re using any Dialog APIs and have disable(<name>) or enable(<name>), change them to setEnabled(<name>, <state>).

Have you configured the fire() function?

The fire() function has been renamed in all TinyMCE APIs. The new dispatch() function replaces it. 

Have you configured the closeButton API?

This API no longer needs the timeout option configured with it. The closeButton API now shows or hides the close button, and you can set the timeout option to set up how long the notification appears before it closes.

Have you configured the link_default_protocol option?

This option now defaults to https. It used to default to a value of http, however this improvement enhances TinyMCE’s security capability.

Final points for upgrading to TinyMCE 6.0

You can have a test drive of the TinyMCE community edition to see how the updates and improvements work, within TinyMCE 6.0 and  get an insight into how TinyMCE 6.0 would perform in your project.

For more information about upgrading to TinyMCE 6.0, refer to the Migration guide. It contains extensive lists of option and API deprecations and adjustments. If you have any questions or concerns, reach out on the TinyMCE GitHub if you have any feedback, or contact us for more information on the upgrading steps.

If you’re aiming to upgrade to use Premium Plugins with TinyMCE 6, sign up for an API key, and then try out some of the TinyMCE Premium Plugins in your project.

ConfigurationMigrationTinyMCEIntegration
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 load and post Ajax content in TinyMCE

    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