Migrate from Froala Editor to TinyMCE

As developers, we need to make sure we’re 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’re keeping ongoing maintenance to a minimum.

This also applies to our choice of rich text editor.

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

Get involved in open source, or explore the advantages of opensource
Save money, while keeping your options open for scaling up
Take advantage of Tiny's rich set of premium plugins, or get support from Professional or Flexible plans
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.

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.

New to TinyMCE? Try the live demo.

Want to better understand how TinyMCE compares to Froala? Read our comparison.

Migrate from Froala Editor 4.0 to TinyMCE 5.10 in three steps

Whatever your reasons, you can migrate from Froala Editor 4.0 to TinyMCE 5.10 in three simple steps.

1. Migrate the configuration

To migrate from a basic Froala 4 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="https://cdn.jsdelivr.net/npm/froala-editor@4.0.8/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>;

<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' />

Copy the TinyMCE source script into the <head> of the page. Remember to replace api-key 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 14 day trial of our premium plugins!)

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

Add the tinymce.init function inside script tags in your HTML document head:

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

Add TinyMCE into the page body with a <textarea> element:

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

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('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. Some of the Froala plugin-provided functionality is TinyMCE core functionality. Essentially, you can do 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 include a plugin for the TinyMCE editor, add a plugins option and provide a space-delimited list of plugins:

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

Delete any Froala sourcing scripts and 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 a 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 here.