How to Migrate from Froala editor to TinyMCE

Developers' needs… what can IT business leaders do to meet them? A helpful first step – is to assist in regularly re-evaluating whether your tech stack works, and keeping maintenance to a minimum.

This also applies to the rich text editor recruited for your product. And if you find a product that works better than the current rich text editor in your tech stack, why not change it?

For instance, how much time and maintenance is needed to change to TinyMCE? It’s not a large investment.

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

Get involved in open source, or explore the advantages of open source
Take advantage of Tiny's rich set of premium plugins, or get improved levels of technical support, with Professional or Flexible plans
Have the flexibility to integrate your own custom plugins

Often, we hear stories from customers involving their need to migrate from alternative editors to TinyMCE. So with that in mind, here's a handy guide on how to migrate from the Froala editor.

This article provides the basic steps, but if you're after more information, check out the comprehensive guide on migrating from Froala.

New to TinyMCE? try the live demo.

Want to better understand how TinyMCE compares to Froala? read our comparison

Which is better, Froala or TinyMCE?

Froala is a basic rich text editor that’s only available via a paid license. TinyMCE has many diverse and rich features, and is available through a free, open source license and a paid, premium license.

When comparing the two projects, head to head, the feature array is the big difference. As an example of the rich feature difference, Froala does not provide format painting, case changes, image editing, or checklists (some essential features). Find out more about which rich text editor is right for you, and how the editors compare.

Froala problems users face

There are issues that may come up when running Froala – some have solutions, and some don’t. If any of these are familiar to you, the next section explains how to migrate from Froala:

1.Froala editor not working

A problem that emerges from Froala conflicting with other libraries loading into the web page.
You may need to review the libraries loading into the page.

2.Froala events not working

There have been breaking changes in versions of Froala where events stop working after an upgrade. You may need to downgrade to an earlier version to restart events again.

3.Froala image upload not working

In some cases, when scripting image upload with PHP, the image upload may not be working.
Froala may need to know the exact extension of the file, and the file MIME-type.

Migrate from Froala Editor 4.0 to TinyMCE 6 in three steps

If you need a reliable rich text editor, and one with a thriving developer community behind it, you can migrate from Froala Editor 4.0 to TinyMCE 6 in three steps. This procedure assumes that:

You can access and adjust your app or software dependencies
Your app or software has an index.html file, or an equivalent file, that holds your Froala configuration

1. Migrate the configuration

Migrate to TinyMCE 6 by replacing the Froala link tag and source script with a TinyMCE source script, and replace the Froala editor variable assignment with the tinymce.init function.

Start with the Froala CSS package. Remove it from the <head> section of the document:

<link href="https://cdn.jsdelivr.net/npm/froala-editor@4.0.8/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>;
<link rel="stylesheet" href="froala_editor_4.0.13/css/plugins/emoticons.min.css">

When it comes to the CSS and editor style, TinyMCE does not require a separate CSS link. You can manage the appearance within the TinyMCE configuration script with a few lines of CSS. Plugins in Froala generally require a correctly configured CSS link – TinyMCE does not require this additional line.

Locate the script that links to the Froala JavaScript source file, which may not be in the document head section since the Froala documentation places the script in different locations. This example has the emoticons plugin configured alongside the editor source:

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@4.0.8/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' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala_editor_4.0.13/js/plugins/emoticons.min.js"></script>

Copy the TinyMCE source script into the <head> of the page. Remember to replace api-key with your Tiny Cloud API Key. TinyMCE does not require a separate script tag and source link for each plugin you wish to use (more on plugins in section 2 of this article):<

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

Don't have a cloud subscription? Get a FREE API key. (You'll even get a free 14 day trial of our premium plugins!)

Next up is to replace the Froala editor variable assignment with the tinymce.init function. Remove the Froala editor variable assignment script from your HTML head section (or .js file if using a separate file):

 <script>
      var editor = new FroalaEditor('div#froala-editor', {
          key: "Activation_KEY",
          heightMin: 100,
          heightMax: 200,
          direction: 'ltr',
          toolbarButtons: [
            ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL'],
            ['insertHTML', 'undo', 'redo', 'html']
            emoticonsButtons: ["emoticonsBack", "|"] 
          ]
      });
    </script>

Add the tinymce.init function inside script tags in your HTML document <head> section (or in your separate file):

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

Then add an id that matches the specified id (myeditor) into the document body where you want TinyMCE to appear:

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

2. Update the list of plugins and other features

The original Froala configuration had it’s plugins and features set up over the following lines:

<link rel="stylesheet" href="froala_editor_4.0.13/css/plugins/emoticons.min.css">
…

   heightMin: 100,
   heightMax: 200,
   direction: 'ltr',
   toolbarButtons: [
            ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL'],
            ['insertHTML', 'undo', 'redo', 'html']
   emoticonsButtons: ["emoticonsBack", "|"]

For easier maintenance, you can create the same level of functionality with fewer lines of JavaScript.

Many of the same essential rich text editing functions after migrating to TinyMCE. 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 replicate the plugins and functionality from the Froala example, you can configure the plugins, editor size, and a floating toolbar commonly seen in rich text editors with the following JavaScript:

        <script>
            tinymce.init({
                selector: 'textarea#myeditor',
                plugins: 'emoticons wordcount help code lists directionality',
                max_height: 200,
                min_height: 100,
                menubar: false,
                toolbar: 'formatgroup',
                toolbar_groups: {
                    formatgroup: {
                        icon: 'format',
                        items: 'bold italic underline | undo redo | code | emoticons'
                    }
                }
            });
        </script>

This reproduces all the functionality provided by the Froala example, and does so with fewer lines of code.

This results in less time spent maintaining the rich text editor:

If you have any of the following additional script and link tags, you can delete the Froala links from your HTML or JS files:

<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 straightforward to migrate (follow the links to the docs).

Migrating when using NPM packages

If you've installed Froala with an NPM package, as the Froala documentation recommends, you can remove it following the same steps as the CDN migration, except for an alternative first step.

1. Install TinyMCE by NPM

Run the command to install TinyMCE through NPM:

npm i tinymce

Remove the Froala NPM packages from your environment:

npm uninstall -g froala-editor

2. Replace Froala NPM links with TinyMCE NPM links. Froala has several NPM links to remove. Remember that NPM packages are usually stored in the /usr/local/lib/node_modules/ directory.

<link href="/usr/local/lib/node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /></link>
<link href="/usr/local/lib/node_modules/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" /></link>
<script type="text/javascript" src="/usr/local/lib/node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>

Exchange the Froala NPM content with the TinyMCE package link:

<script
  type="text/javascript"
  src="/usr/local/lib/node_modules/tinymce/tinymce.min.js"
>
  {" "}
</script>;

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

After changing the NPM links, the steps to migrate from Froala are the same as the steps to migration from the CDN. You can follow Step 2, and then on to Step 3 in the previous section to completely migrate from Froala to TinyMCE.

Looking for more migration 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.

What next?

Once you’ve migrated to TinyMCE, you can scale up and take full advantage of our Premium solutions at any time. Try the PowerPaste live demo while you're there.

Get your FREE TinyMCE API key today!