Migrating from Froala to TinyMCE
Upgrading your rich text editor from Froala Editor v3 to TinyMCE 5.
Contribute to this pageThis page covers the basic steps for migrating from Froala Editor 3 to TinyMCE 5. 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
- Updating the list of Plugins
- Migrating a Custom Toolbar Layout
- Configuring Inline Mode
- Migrating Custom 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 5 configuration, you need to:
- Replace the Froala links and source scripts with a TinyMCE source script.
- 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 Tiny Cloud deployments:
<script src='https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin'></script>
Replace
your-api-key
with your Tiny Cloud API key.
- For Tiny Cloud deployments:
- For Self-hosted TinyMCE deployments:
<script src='/path/to/tinymce/base/directory/tinymce.min.js'></script>
Replace
/path/to/tinymce/base/directory
with the relative path of thetinymce/
directory containingtinymce.min.js
.
For information on TinyMCE deployment types, see: Installing TinyMCE.
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>
- Add a
tinymce.init
function.<script> tinymce.init({ selector: '#myeditor' }); </script>
For information on configuring the selector
setting, see: Basic Setup.
Examples: Basic Configuration
The following examples show an initial Froala configuration and the migrated TinyMCE configuration.
Froala 3 - A Basic Configuration
<!DOCTYPE html>
<html>
<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' />
</head>
<body>
<form method='post'>
<textarea id='basic_froala'>Hello, World! I'm a froala editor!</textarea>
</form>
<script>
var editor = new FroalaEditor('textarea#basic_froala')
</script>
</body>
</html>
TinyMCE 5 - A Basic Configuration
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='https://cdn.tiny.cloud/1/my-api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin'></script>
</head>
<body>
<form method='post'>
<textarea id='tiny_basic'>Hello, World! I'm a tiny editor!</textarea>
</form>
<script>
tinymce.init({ selector: 'textarea#tiny_basic' });
</script>
</body>
</html>
Additional Information
For information on:
- Getting started with TinyMCE, see: TinyMCE Quick Start.
- Installing TinyMCE, see: Installing TinyMCE.
Updating the list of Plugins
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 a TinyMCE editor, add a plugins
option and provide a space-delimited list of the plugins to include, 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
<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>
TinyMCE 5 - Enabling Plugins
<script>
tinymce.init({
selector: '#tiny_editor',
plugins: 'emoticons wordcount help code lists'
});
</script>
Additional Information on Plugins
- For information on enabling plugins for TinyMCE, see: Integration and setup options: plugins.
- For a list of TinyMCE plugins, see: Add plugins to TinyMCE.
Migrating a Custom Toolbar Layout
To migrate a Custom Toolbar Layout from Froala to TinyMCE:
- Change the
toolbarButtons
option totoolbar
. - 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:
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:
toolbar: 'undo redo | formatselect | 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 | formatselect |
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. 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.
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
<h2>Froala Custom Toolbar</h2>
<form method='post'>
<textarea id=froala_custom_toolbar>Hello, World! I'm a froala editor!</textarea>
</form>
<script>
var editor = new FroalaEditor('textarea#froala_custom_toolbar', {
paragraphFormatSelection: true ,
toolbarButtons: [['undo', 'redo'], ['paragraphFormat'], ['bold', 'italic'],
['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
['formatOL', 'formatUL'], ['indent', 'outdent']]
})
</script>
TinyMCE 5 - Creating a Custom Toolbar Layout
<h2>TinyMCE Custom Toolbar</h2>
<form method='post'>
<textarea id='tiny_custom_toolbar'>Hello, World! I'm a tiny editor!</textarea>
</form>
<script>
tinymce.init({
selector: '#tiny_custom_toolbar',
plugins: 'lists',
toolbar: 'undo redo | formatselect | bold italic
| alignleft aligncenter alignright alignjustify
| numlist bullist | outdent indent',
});
</script>
Additional Information on Customizing Toolbars
- For information on customizing the TinyMCE Toolbar, see: User interface options: Toolbar.
- For a list of toolbar items, see: Toolbar Buttons Available for TinyMCE.
Configuring Inline Mode
When migrating from Froala to TinyMCE, the toolbarInline
option changes to inline
. Some additional settings you should consider include:
Examples: Enabling Inline Mode
The following examples show Froala and TinyMCE configured for inline mode.
Froala 3 - Configuring Inline Mode
<h3>Froala Inline Mode</h3>
<form method='post'>
<div id=froala_custom_inline_toolbar>Hello, World! I'm a froala editor!</div>
</form>
<script>
var editor = new FroalaEditor('div#froala_custom_inline_toolbar', {
toolbarInline: true,
charCounterCount: false
})
</script>
TinyMCE 5 - Configuring Inline Mode
<h3>TinyMCE Inline Mode</h3>
<form method='post'>
<div id='tiny_custom_inline_toolbar'>Hello, World! I'm a tiny editor!</div>
</form>
<script>
tinymce.init({
selector: '#tiny_custom_inline_toolbar',
inline: true
});
</script>
Additional Information for Inline Mode
For information on:
- The inline editing mode, see: Setup inline editing mode.
- Configuring a Quick Toolbar, see: Quick Toolbar plugin.
- Configuring a contextual toolbar, see: Context Toolbar.
- Configuring a contextual menu, see: Context Menu.
- Disabling the TinyMCE menubar, see: User interface options: Menubar.
- The TinyMCE distraction-free editing mode, see: TinyMCE distraction-free editing mode.
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.
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
<h2>Froala Custom Button</h2>
<form method='post'>
<textarea id=froala_custom_button>Hello, World! I'm a froala editor!</textarea>
</form>
<script>
FroalaEditor.DefineIcon('mybutton1', {NAME: 'star', SVG_KEY: 'star'});
FroalaEditor.RegisterCommand('mybutton1', {
title: 'My Button',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert(' <strong>It\'s my button!</strong> ');
}
});
FroalaEditor.RegisterCommand('My Button', {
title: 'My Button',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert(' <strong>It\'s my other button!</strong> ');
}
});
var editor = new FroalaEditor('textarea#froala_custom_button',{
toolbarButtons: [['mybutton1'],['My Button']]
})
</script>
TinyMCE 5 - Creating a Custom Toolbar Button
<h2>TinyMCE Custom Button</h2>
<form method='post'>
<textarea id='tiny_custom_button'>Hello, World! I'm a tiny editor!</textarea>
</form>
<script>
tinymce.init({
selector: '#tiny_custom_button',
toolbar: 'myButton1 | myButton2',
setup: function (editor) {
editor.ui.registry.addButton('myButton1', {
icon: 'user',
onAction: function (_) {
editor.insertContent(' <strong>It\'s my icon button!</strong> ');
}
});
editor.ui.registry.addButton('myButton2', {
text: 'My Button',
onAction: function (_) {
editor.insertContent(' <strong>It\'s my text button!</strong> ');
}
});
}
});
</script>
Additional Information on Custom Toolbar Buttons
- For an overview on creating custom toolbar buttons, see: Toolbar buttons.
- For information on the available types of toolbar buttons and examples of custom toolbar buttons, see: Types of toolbar buttons.
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 and Types of toolbar buttons: Menu 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
<h2>Froala Custom Drop-down Button</h2>
<form method='post'>
<textarea id='froala_custom_button_menu'>Hello, World! I'm a froala editor!</textarea>
</form>
<script>
var option_values = {
'Opt1': '<strong>You clicked menu item 1!</strong>',
'Opt2': '<em>You clicked menu item 2!</em>'
};
FroalaEditor.DefineIcon('mybuttonmenu', {NAME: 'plus', SVG_KEY: 'add'});
FroalaEditor.RegisterCommand('mybuttonmenu', {
title: 'My Other Button Menu',
type: 'dropdown',
focus: false,
undo: false,
refreshAfterCallback: true,
options: {
'Opt1': 'Menu item 1',
'Opt2': 'Menu item 2'
},
callback: function (cmd, val) {
this.html.insert(option_values[val]);
}
});
var editor = new FroalaEditor('textarea#froala_custom_button_menu', {
toolbarButtons: [['mybuttonmenu']]
})
</script>
TinyMCE 5 - Creating a Custom Drop-down Button
<h2>TinyMCE Custom Drop-down Button</h2>
<form method='post'>
<textarea id='tiny_custom_button_menu'>Hello, World! I'm a tiny editor!</textarea>
</form>
<script>
tinymce.init({
selector: '#tiny_custom_button_menu',
toolbar: 'my_button',
setup: function (editor) {
editor.ui.registry.addMenuButton('my_button', {
text: 'My button menu',
icon: 'gamma',
fetch: function (callback) {
var items = [
{
type: 'menuitem',
text: 'Menu item 1',
onAction: function () {
editor.insertContent(' <strong>You clicked menu item 1!</strong>');
}
},
{
type: 'menuitem',
text: 'Menu item 2',
icon: 'user',
onAction: function () {
editor.insertContent(' <em>You clicked menu item 2!</em>');
}
}
];
callback(items);
}
});
}
});
</script>
Additional Information on Drop-down Buttons
For information on creating drop-down buttons, see: Types of toolbar buttons: Menu button.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.