--- title: "Migrating from Froala to TinyMCE" description: "Upgrading your rich text editor from Froala Editor v3 to TinyMCE 6." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/migration-from-froala/" md_url: "https://www.tiny.cloud/docs/tinymce/6/migration-from-froala/index.md" version: "6" last_updated: "2022-03-31T00:32:33Z" tokens: 4344 --- Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/migration-from-froala/). # Migrating from Froala to TinyMCE This page covers the basic steps for migrating from Froala Editor 3 to TinyMCE 6. Procedures and links to our documentation have been included to assist with your migration to TinyMCE. **Covered in this section:** - [Migrating a Basic Froala Configuration to TinyMCE](#migrating-a-basic-froala-configuration-to-tinymce) - [Updating the list of Plugins](#updating-the-list-of-plugins) - [Migrating a Custom Toolbar Layout](#migrating-a-custom-toolbar-layout) - [Configuring Inline Mode](#configuring-inline-mode) - [Migrating Custom Buttons](#migrating-custom-buttons) - [Migrating Custom Drop-down Toolbar Buttons](#migrating-custom-drop-down-toolbar-buttons) ## Migrating a Basic Froala Configuration to TinyMCE To migrate from a basic Froala 3 configuration to a basic TinyMCE 6 configuration, you need to: 1. Replace the Froala links and source scripts with a TinyMCE source script. 2. Replace the Froala editor variable assignment with the `tinymce.init` function. ### Replace Froala links and source script with a TinyMCE source script 1. Remove the Froala links and source script, located in the `` of the target HTML page. For example: ```html ``` 2. Insert a TinyMCE source script into the `` of the page. - For Tiny Cloud deployments: ```html ``` Replace `your-api-key` with your [Tiny Cloud API key](/my-account/). - For Self-hosted TinyMCE deployments: ```html ``` Replace `/path/to/tinymce/base/directory` with the relative path of the `tinymce/` directory containing `tinymce.min.js`. For information on TinyMCE deployment types, see: [Installing TinyMCE](../installation/). ### Replace the Froala editor variable assignment with the tinymce.init function To insert an editor in the body of the page for a ` ``` 1. Remove the Froala editor variable assignment script. ```html ``` 2. Add a `tinymce.init` function. ```html ``` For information on configuring the `selector` setting, see: [Basic Setup](../basic-setup/). ### Examples: Basic Configuration The following examples show an initial Froala configuration and the migrated TinyMCE configuration. #### Froala 3 - A Basic Configuration ```html
``` #### TinyMCE 6 - A Basic Configuration ```html
``` ### Additional Information For information on: - Getting started with TinyMCE, see: [TinyMCE Quick Start](../cloud-quick-start/). - Installing TinyMCE, see: [Installing TinyMCE](../installation/). ## Updating the list of Plugins Some *Froala core functionality* is implemented by [plugins for TinyMCE](../work-with-plugins/); 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 a TinyMCE editor, add a `plugins` option and provide a [space-delimited list of the plugins to include](../editor-important-options/#plugins), as shown below. You should delete any Froala sourcing scripts and Froala links from the page. ### Examples: Enabling Plugins The following examples show how plugins are included or enabled in the Froala and TinyMCE editors. #### Froala 3 - Enabling Plugins ```html ``` #### TinyMCE 6 - Enabling Plugins ```html ``` ### Additional Information on Plugins - For information on enabling plugins for TinyMCE, see: [Integration and setup options: plugins](../editor-important-options/#plugins). - For a list of TinyMCE plugins, see: [Add plugins to TinyMCE](../work-with-plugins/). ## Migrating a Custom Toolbar Layout To migrate a Custom Toolbar Layout from Froala to TinyMCE: - Change the `toolbarButtons` option to `toolbar`. - Update the toolbar item listing. - Update the `plugin` option as required. ### Change the `toolbarButtons` option to `toolbar` Rename the Froala option `toolbarButtons` to `toolbar`. ### Update the toolbar item listing Froala and TinyMCE use different formats for listing toolbar items. Froala accepts the list of toolbar buttons as a two-dimensional array of strings, with each array defining a group of toolbar items. For example: ```js toolbarButtons: [['undo', 'redo'], ['paragraphFormat'], ['bold', 'italic'], ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'], ['formatOL', 'formatUL'], ['indent', 'outdent']] ``` TinyMCE accepts a space-delimited string with horizontal bars (`|`) for grouping items. For example: ```js toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent' ``` Replace the names of toolbar items with the TinyMCE names. For example: | Toolbar Button | Froala | TinyMCE | | --- | --- | --- | | Format/Style Selector | `paragraphFormat` | `blocks` | | Ordered list | `formatOl` | `numlist` | | Unordered list | `formatUL` | `bullist` | ### Update the `plugin` option as required The list of plugins may need updating, as indicated in [Updating the list of Plugins](#updating-the-list-of-plugins). For example, the TinyMCE toolbar items; `numlist` and `bullist`, require the `lists` plugin. For a list of toolbar items with the required plugins, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/). ### Examples: Custom Toolbar Layouts The following examples show a custom toolbar layout in Froala and the same layout migrated to TinyMCE. #### Froala 3 - Creating a Custom Toolbar Layout ```html

Froala Custom Toolbar

``` #### TinyMCE 6 - Creating a Custom Toolbar Layout ```html

TinyMCE Custom Toolbar

``` ### Additional Information on Customizing Toolbars - For information on customizing the TinyMCE Toolbar, see: [User interface options: Toolbar](../toolbar-configuration-options/#toolbar). - For a list of toolbar items, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/). ## Configuring Inline Mode When migrating from Froala to TinyMCE, the `toolbarInline` option changes to `inline`. Some additional settings you should consider include: - [The Quick Toolbar plugin](../quickbars/). - [Context Toolbars](../contexttoolbar/). - [Context Menus](../contextmenu/). - [Disabling the TinyMCE menubar](../menus-configuration-options/#menubar). ### Examples: Enabling Inline Mode The following examples show Froala and TinyMCE configured for inline mode. #### Froala 3 - Configuring Inline Mode ```html

Froala Inline Mode

Hello, World! I'm a froala editor!
``` #### TinyMCE 6 - Configuring Inline Mode ```html

TinyMCE Inline Mode

Hello, World! I'm a tiny editor!
``` ### Additional Information for Inline Mode For information on: - The inline editing mode, see: [Setup inline editing mode](../use-tinymce-inline/). - Configuring a Quick Toolbar, see: [Quick Toolbar plugin](../quickbars/). - Configuring a contextual toolbar, see: [Context Toolbar](../contexttoolbar/). - Configuring a contextual menu, see: [Context Menu](../contextmenu/). - Disabling the TinyMCE menubar, see: [User interface options: Menubar](../menus-configuration-options/#menubar). - The TinyMCE distraction-free editing mode, see: [TinyMCE distraction-free editing mode](../use-tinymce-distraction-free/). ## Migrating Custom Buttons The TinyMCE `addButton` option is used in place of the Froala `RegisterCommand` option. For information on getting started with the `addButton` option, see: [Toolbar buttons](../custom-toolbarbuttons/#how-to-create-custom-toolbar-buttons). ### Examples: Custom Toolbar Buttons The following examples show a Froala editor and a TinyMCE editor with a basic configuration and two custom toolbar buttons. #### Froala 3 - Creating a Custom Toolbar Button ```html

Froala Custom Button

``` #### TinyMCE 6 - Creating a Custom Toolbar Button ```html

TinyMCE Custom Button

``` ### Additional Information on Custom Toolbar Buttons - For an overview on creating custom toolbar buttons, see: [Toolbar buttons](../custom-toolbarbuttons/#how-to-create-custom-toolbar-buttons). - For information on the available types of toolbar buttons and examples of custom toolbar buttons, see: [Types of toolbar buttons](../custom-toolbarbuttons/). ## Migrating Custom Drop-down Toolbar Buttons The TinyMCE `addMenuButton` option is used in place of the Froala `RegisterCommand` `type: dropdown` option. For information on getting started with the `addMenuButton` option, see: [Toolbar buttons](../custom-toolbarbuttons/#how-to-create-custom-toolbar-buttons) and [Types of toolbar buttons: Menu button](../custom-menu-toolbar-button/). ### Examples: Custom Drop-down Buttons The following examples show a Froala editor and a TinyMCE editor with a basic configuration and a custom drop-down toolbar button. #### Froala 3 - Creating a Custom Drop-down Button ```html

Froala Custom Drop-down Button

``` #### TinyMCE 6 - Creating a Custom Drop-down Button ```html

TinyMCE Custom Drop-down Button

``` ### Additional Information on Drop-down Buttons For information on creating drop-down buttons, see: [Types of toolbar buttons: Menu button](../custom-menu-toolbar-button/).