Blueprint - Migrate from Froala Editor to TinyMCE

As developers, we need to make sure we are taking the time to regularly re-evaluate whether our tech stack is working for us, while at the same time making decisions that ensure we are keeping ongoing maintenance to a minimum.

This applies to our choice of rich text editor too.

There are several reasons why you might want to switch to TinyMCE. You may want to:

Reap the benefits of open source
Save money, while keeping your options open for scaling up
Take advantage of Tiny’s rich set of premium plugins or pro support
Have the flexibility to integrate your own custom plugins as well

We’re often talking to customers who are migrating from alternative editors to TinyMCE. So with that in mind, here’s a handy guide on how to migrate from Froala.

New to TinyMCE? Try the live demo.

Migrate from Froala Editor to TinyMCE in three steps

Whatever your reasons, you can migrate from Froala Editor 3 to TinyMCE 5 in three simple steps with a bit of cutting and pasting.

Want more info? This article provides the basic steps, but if you’re after more information, check out our comprehensive guide on migrating from Froala in our documentation.

1. Migrate the configuration

To migrate from a basic Froala 3 configuration to a basic TinyMCE 5 configuration, you need to replace the Froala links and source scripts with a TinyMCE source script, and replace the Froala editor variable assignment with the tinymce.init function.

Replace Froala links and source script with a TinyMCE source script

Remove the Froala links and source script, located in the <head> of the target HTML page. For example:

<link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script> <link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />

Insert a TinyMCE source script into the <head> of the page. For example, for Tiny Cloud deployments (where api-key is replaced with your Tiny Cloud API Key):

<script src='https://cdn.tiny.cloud/1/api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin'></script>

Don’t have a cloud subscription? Get a free API Key. (You’ll even get a free trial of our premium plugins!)

Replace the Froala editor variable assignment with the tinymce.init function

To insert an editor in the body of the page for a <textarea> element such as:

<form method='post'>
  <textarea id='myeditor'>Enter your comment here!</textarea>
</form>

Remove the Froala editor variable assignment script:

<script>
  var editor = new FroalaEditor('textarea#myeditor')
</script>

And add a tinymce.init function:

<script>
  tinymce.init({ selector: 'textarea#myeditor' });
</script>

2. Update the list of plugins

You’re going to find that some Froala core functionality is implemented by plugins for TinyMCE, and some Froala plugin-provided functionality is TinyMCE core functionality.

For example:

Froala includes ordered lists as part of the core functionality, but the lists plugin provides ordered lists for TinyMCE.
Adding a font size option in Froala requires a plugin, but fontsize is core functionality for TinyMCE.

To include a plugin for the TinyMCE editor, add a plugins option and provide a space-delimited list of plugins to include, as shown below.

<script>
  tinymce.init({
    selector: '#tiny_editor',
    plugins: 'emoticons wordcount help code lists'
  });
</script>

And delete any Froala sourcing scripts and Froala links from the page. For example:

<head>
  <meta charset='utf-8'>
  <link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />
  <!-- Examples of Froala Plugin scripts -->
  <!-- Colors plugin -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/colors.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/plugins/colors.min.css' rel='stylesheet' type='text/css' />
  <!-- Emoticons plugin -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/emoticons.min.js'></script>
  <link href='../css/plugins/emoticons.min.css' rel='stylesheet' type='text/css' />
  <!-- Font Family plugin -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/font_family.min.js'></script>
  <!-- Font Size plugin -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/font_size.min.js'></script>
  <!-- Help plugin -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/help.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/plugins/help.min.css ' rel='stylesheet' type='text/css' />
</head>

3. Migrate any customizations

You may have more specific customizations that you want to migrate. For example:

You’ll find that these are just as straightforward to migrate (follow the links to the docs).

Looking for more information? Find out more about customizations or any of the migration process by checking out our comprehensive guide on migrating from Froala in our documentation.