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

Migrate from Froala Editor to TinyMCE

Ben Long

September 14th, 2019

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

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.

What next?

Once you have 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.

MigrationFroala
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Person writing on a blackboard with spotlight shining from light above. World globe and abacus also in surrounds. by Ahmet Itlas
    Tips & How-Tos

    Establishing your LMS business case: Online learning benefits & more

    by Ben Long in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor