How to migrate to TinyMCE 5

The manual explains how to make TinyMCE 4 to TinyMCE 5 migration easy

TinyMCE 5 is a new version of the well-known TinyMCE 4, a content editor for your websites. Even though TinyMCE 4 is still supported and very popular, we recommend switching to TinyMCE 5.

TinyMCE 5 is an evolutionary upgrade, so in most cases you will experience no problems migrating to it from TinyMCE 4.

Official migration guide published at TinyMCE website mostly targets developers of add-ons. While the present article aims to shed the light on installing of TinyMCE 5 on your website in the first hand (not the development).

If you want to install TinyMCE 5 from scratch, refer to the installation manual or take a look at the installation example. The below text applies to migration to TinyMCE 5 from the existing installation.

How to migrate to TinyMCE 5 from TinyMCE 4

  1. Download the latest version of TinyMCE 5.
  2. Replace all TinyMCE 4 files to TinyMCE 5 files.
  3. Done!

Now your website features editing of content using the new editor. If that didn't happen, see below.

Migration details

Most users do not experience problems while migration, and TinyMCE 5 starts works instantly.

But what if TinyMCE 5 does not work, or works the wrong way? This means you are using some specific feature peculiar to TinyMCE 4 only, for instance, a plugin, a configuration option, etc.

Add-ons for TinyMCE 5

When you switch to TinyMCE 5 you must update all plugins you use.

Plugins from official TinyMCE package

The new version already has replacements for standard plugins, and possibly you will need to add them to the plugins section of your config (although, usually this is not needed).

Additional plugins

Some plugins do not need TinyMCE 5 adaptation because its API remained the same. The principal difference that makes older plugins incompatible is throwing out the old UI SDK.

Many third-party plugins including premium add-ons take this change into account, and this allows them to have one version that fits both TinyMCE 4 and TinyMCE 5. In this case all you need to do is to place your plugin to the plugins directory and add it to the config. For instance, this is true for N1ED (leave it as it is).

If you have some specific third-party add-on, including your own, refer to its documentation and perform all steps the developers of the plugin envisaged for migration to TinyMCE 5.

Changes in core plugins

Here are some nuances that changed the way standard plugins behave in TinyMCE 5.

  • The autoresize plugin automatically turns off the resize flag upon plugging.

  • Names of the following settings have changed:

    • autoresize_min_height → min_height
    • autoresize_max_height → max_height
    • textcolor_cols → color_cols
    • textcolor_map → color_map

    Simply rename them in your config if you use the old names.

  • The following settings are removed: flex, border, layout, spacing, padding, align, pack, no-wrap. Instead of using these settings, configure TinyMCE look using CSS.

Themes for TinyMCE 5

Having changed its UI, TinyMCE 5 abandoned using old themes (skins) and switched to the new modern-looking "Silver" theme. If you use something else, make the following changes to your TinyMCE config:

theme: 'silver',

Uploading files to TinyMCE 5

If uploading files does not work, please check that you use correct setting for your file manager integration.

If you have the file_browser_callback option in your config, replace it with the newer one file_picker_callback that supports new callback format.

Also, you can use the Flmngr file manager that is compatible with TinyMCE 5. It configures TinyMCE 5 automatically.