The Ultimate Guide to Migrating from TinyMCE to Froala in React
In the latest release of Froala, version 4.1, we made a significant update by supporting the LTS React version among several other popular JavaScript frameworks. With this major update, we expect a considerable migration from TinyMCE to Froala. Whether you’re already a fan of Froala or currently facing challenges with TinyMCE and are considering a switch to Froala for your React app, this article aims to provide you with a smooth and efficient transition process. Throughout this guide, we will walk you through every step, ensuring a seamless migration from TinyMCE to Froala React SDK. From removing the TinyMCE component to installing and configuring the powerful Froala rich text editor React component, our goal is to equip you with the knowledge and confidence to make the switch.
Why do users migrate from TinyMCE to Froala?
There are several reasons for users to migrate from TinyMCE to Froala, such as:
- Technology:
Froala editor has its own unique way of handling content, leading to distinct and cleaner HTML outputs. Additionally, the Froala editor boasts different API structures. It introduces a developer-friendly API where its options, events, and methods are comprehensive and easy to use. This API enables effortless customization of the editor’s functionality and allows for the creation of custom elements and plugins, empowering developers with endless possibilities. - Transparent Pricing:
Froala distinguishes itself with a transparent pricing model that guarantees no hidden fees. Moreover, in all plans, all of Froala’s plugins are included, and there are no restrictions on editor usage. In contrast, TinyMCE’s pricing plans come with limitations on the number of page loads. For instance, the free plan only allows for 1000-page loads. For example, a company with 10 users each loading a page containing the TinyMCE editor 10 times per day, would exhaust the capacity in just 10 days, forcing them to pay $40 for an additional 1000 loads. This would result in a monthly expense of $80, or a whopping $960 annually. Remarkably, the cost of Froala’s professional plan is actually lower than this. What’s more, the free Tinymce plan is limited to a single domain, lacks access to all plugins, and does not provide professional support. - Multiple React components:
In contrast to Tinymce, Froala React SDK stands out for its versatility, offering not just one but multiple React components. These components include a main component for rendering the editor, a component to preview the editor’s content, and some special components for initializing the editor on the<img>,<button>,<input>, and<a>HTML elements. With Froala React SDK, you’re equipped with a powerful toolkit to enhance both the functionality and presentation of your content. - Design:
The Froala UI has gained immense popularity among users for its sleek and captivating design. From its modern flat layout to captivating SVG icons, Froala Editor truly stands apart from other options available. Its design has particularly caught the attention of users in search of a clean and contemporary interface, making it an appealing choice for a wide range of individuals.- Toolbar:
Froala’s innovative toolbar ingeniously organizes the vast array of features into four distinct and conveniently grouped context categories: Text, Block, Media, and More. By using this simple yet intuitive toolbar, your navigation through the editor becomes effortless. You still have the option to customize it displaying only the toolbar buttons you needed. - Responsive UI
The Froala toolbar takes user experience to a whole new level with its seamless and user-friendly design. It cleverly adapts to your screen width, ensuring a perfect fit for any device. It’s like having a personal assistant that knows exactly what buttons you need the most. With just one click, you can access a plethora of features that are neatly organized, making content editing a breeze. Whether you’re on a tablet or a phone, the Froala toolbar guarantees optimal navigation and editing, regardless of screen size. On the other hand, TinyMCE maintains its toolbar buttons but struggles to adjust the toolbar width based on screen size, often leading to the annoyance of a horizontal scrollbar. This cluttered layout can be a real hassle for users trying to find specific buttons, ultimately slowing down their content editing process. Choose Froala and enjoy an efficient and hassle-free editing experience!
- Toolbar:
- Feature quality:
It is crucial to understand that even if two editors have a feature with identical or similar names, their functionalities may differ. This emphasizes the importance of testing each feature in both editors instead of assuming they will produce equivalent results. For instance, when we examined how each editor handles content pasted from third-party tools, Froala effectively maintained the pasted content styles. On the other hand, TinyMCE, which named its feature “PowerPaste” and made it a premium feature, failed to do so. View the comparison results here. - Other reasons
Many reasons could make users migrate from TinyMCE to Froala. Share your thoughts in the comments section and let us know why you are considering migrating from TinMCE to Froala.
How to migrate from TinyMCE to Froala in a React app?
The migration from TinyMCE to Froala is easy and straightforward. Follow these steps for a hassle-free process:
Uninstall TinyMCE Vue NPM Package
the initial task would involve uninstalling Tinymce from your application. In case you are using npm, you can execute the following command within your local project directory to successfully uninstall Tinymce
npm uninstall -g @tinymce
This will remove the TinyMCE React package as well as remove it from the application’s list of dependencies.
Install Froala React NPM Package
The next step in transitioning from TinyMCE to Froala is to install the Froala React NPM package in the application. To install Froala, use the following command:
npm install react-froala-wysiwyg
After the installation process is completed, you can find the react-froala-wysiwyg folder inside your npm_modules folder.
Replace TinyMCE with Froala in your components
The final step involves replacing any references to TinyMCE in your components with Froala.
Remove TinyMCE component Import statements
Search for the line
import { Editor } from "@tinymce/tinymce-react";
and replace it with the import of Froala component, stylesheets, and required plugins
// Require Editor CSS files. import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css'; // Import all Froala Editor plugins // Note: you can import a single plugin if needed import 'froala-editor/js/plugins.pkgd.min.js'; //import Froala component import FroalaEditorComponent from 'react-froala-wysiwyg';
Substitute all instances of TinyMCE with Froala
Search for <Editor which defines the TinyMCE component inside the template files and replaces it with the <FroalaEditorComponent. The two components have different tags. Therefore, it is important to replace these tags. Here is a list of TinyMCE tags and how we should handle them when migrating to Froala.
Before we start, let us consider an example of the TinyMCE Editor component:
class App extends Component {
constructor() {
super();
}
render() {
return (
<Editor
apiKey="limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m"
cloudChannel='5-stable'
disabled={false}
initialValue='test initialValue'
inline={false}
onEditorChange={ }
plugins=''
tagName='div'
textareaName=''
toolbar=''
value=''
outputFormat='html'
init={{
height: 500,
menubar: false,
plugins: [
'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',
}}
/>
);
}
}
render(<App />, document.getElementById('root'));
Some of the tags will no longer be needed when migrating to Froala. Go ahead and remove them directly. they are:
api-keycloudChanneldisabledoutput-formatscriptLoadingtinymceScriptSrcrollbacktextareaName
For other tags:
id
This tag is used in both components to define the “id” attribute of the element that the editor is initialized on; therefore, we keep it as it is.
init
TinyMCE uses this property for setting the editor options. for example:
<editor
init = {{
width: 600,
height: 300,
plugins: [
'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',
menu: {
favs: {
title: 'My Favorites',
items: 'code visualaid | searchreplace | emoticons'
}
},
menubar: 'favs file edit view insert format tools table help',
content_css: 'css/content.css'
}}
/>
When migrating to Froala, find the equivalent Froala API option and use it inside the config parameter of the Froala component
<FroalaEditorComponent
config = {{
width: 600,
height: 300,
pluginsEnabled: [
'lists', 'link', 'image', 'imageManager', 'charCounter', 'fullscreen', 'lineBreaker', 'codeBeautifier', 'codeView', 'colors', 'draggable', 'video', 'table', 'emoticons', 'wordPaste'
],
toolbarButtons: {
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'clearFormatting']
},
'moreParagraph': {
'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
},
'moreRich': {
'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'insertHR']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
}
}}
/>
In case the selector property is defined in TinyMCE init, this should be passed to the tag prop of the Froala component as it represents the HTML element where the editor will be initialized at.
For example, the below code
<editor
init = {{
selector: 'textarea',
width: 600,
height: 300,
menu: {
favs: {
title: 'My Favorites',
items: 'code visualaid | searchreplace | emoticons'
}
},
menubar: 'favs file edit view insert format tools table help',
content_css: 'css/content.css'
}}
/>
Should be converted to
<FroalaEditorComponent
tag = 'textarea'
config = {{
width: 600,
height: 300,
}}
/>
inline
Used by TinyMCE to set the editor to inline mode. In Froala, set the toolbarInline: true inside the config tag options object.
Example:
<editor
inline={true}
/>
This will be converted to
<FroalaEditorComponent
config={{toolbarInline: true}}
/>
tagName
Is an optional prop to define the HTML element for the editor in the inline mode instead of using selector inside the init prop.
When you are migrating to Froala, the tagName value should be passed to the tag prop for the Froala component.
For example, the below code
<editor
inline={true}
tagName='div'
/>
Should be converted to
<FroalaEditorComponent
tag='div'
config={{toolbarInline: true}}
/>
initialValue
The initial content of the editor when the editor is initialized. Assign the initial value to the “model” prop for the Froala component.
Example
<Editor initialValue='<p>Once upon a time...</p>' />
This will be converted to
<FroalaEditorComponent tag='div' model="<p>Once upon a time...</p>" />
plugins
Used to include plugins for the editor. In Froala, set the pluginsEnabled API option to the equivalent Froala plugins and add it within the config prop.
It is important to note that certain core functionalities of TinyMCE are implemented through plugins in Froala; while some functionalities provided by Froala plugins are already available by default in TinyMCE.
For example, TinyMCE has font size as a core function, whereas a Froala plugin is required to add this option.
Example
<Editor plugins="emoticons wordcount help code lists" />
Will converted to
<FroalaEditorComponent
config={{ pluginsEnabled: ['emoticons', 'charCounter', 'help', 'codeView', 'lists'] }}
/>
Toolbar
Used to set the editor toolbar buttons. while migrating your code to Froala, configure the Froala toolbarButtons API option with the desired buttons and add it to the config prop.
In Froala, you can also set the toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS API options to customize the toolbar buttons based on the screen size.
Example:
<editor toolbar="bold italic underline code" />
Will be converted to
<FroalaEditorComponent
config={{ toolbarButtons: ['bold', 'italic', 'underline', 'html'] }}
/>
Events
Examine the events being used and locate their corresponding names in the Froala API events list. It may also be necessary to alter the function assigned to the event. In this case, some Froala API methods can be used to achieve the desired functionality.
Example:
<Editor onClick={this.handlerFunction} />
Will be converted to
<FroalaEditorComponent config={{ events: { 'click':handlerFunction } }} />
Full Code Example
Considering all these changes, now let’s see an example of how the code will change after migrating the TinyMCE React component to the Froala React component.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Editor } from "@tinymce/tinymce-react";
class App extends Component {
constructor() {
super();
}
render() {
return ( <Editor
apiKey = "limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m"
cloudChannel = '5-stable'
disabled = {
false
}
initialValue = 'test initialValue'
inline = {
false
}
onEditorChange = {}
plugins = ''
tagName = 'div'
textareaName = ''
toolbar = ''
value = ''
outputFormat = 'html'
init = {{
height: 500,
menubar: false,
plugins: [
'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',
}}
/>
);
}
}
render( < App / > , document.getElementById('root'));
This will be converted to
import React, { Component } from 'react';
import { render } from 'react-dom';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
// Import all Froala Editor plugins
// Note: you can import single plugin if needed
import 'froala-editor/js/plugins.pkgd.min.js';
//import Froala component
import FroalaEditorComponent from 'react-froala-wysiwyg';
class App extends Component {
constructor() {
super();
}
render() {
return ( <FroalaEditorComponent
model = "test initialValue"
tag = "div"
init = {
{
Key: "***", //Editor Key
height: 500,
pluginsEnabled: [
'lists',
'link',
'image',
'imageManager',
'charCounter',
'fullscreen',
'lineBreaker',
'codeBeautifier',
'codeView',
'colors',
'draggable',
'video',
'table',
'emoticons',
'wordPaste',
],
toolbarButtons: {
moreText: {
buttons: [
'bold',
'italic',
'underline',
'strikeThrough',
'clearFormatting',
],
},
moreParagraph: {
buttons: [
'alignLeft',
'alignCenter',
'formatOLSimple',
'alignRight',
'alignJustify',
'formatOL',
'formatUL',
'paragraphFormat',
'paragraphStyle',
'lineHeight',
'outdent',
'indent',
'quote',
],
},
moreRich: {
buttons: [
'insertLink',
'insertImage',
'insertVideo',
'insertTable',
'emoticons',
'insertHR',
],
},
moreMisc: {
buttons: [
'undo',
'redo',
'fullscreen',
'selectAll',
'html',
'help',
],
align: 'right',
buttonsVisible: 2,
},
},
}
}
/>
);
}}
render( < App / > , document.getElementById('root'));
Still Need Help?
Are you using custom plugins? This tutorial will help you to migrate them to Froala.
For more information, we check our migration from TinyMCE to the Froala feature matching guide.
With these implementations, your transition from TinyMCE to Froala should be complete!
Testing and Verifying Your Changes
After switching from TinyMCE to Froala, check all updates are functioning properly. Test the editor function and confirm that the application works the same or better than before.
Conclusion
Integrating Froala into your React app is a seamless process that will not only simplify your editing tasks but also boost the productivity of your React app. With Froala, you gain access to a wide range of comprehensive tools designed specifically for efficient rich text editing. Switch from TinyMCE to Froala now and leverage the robust features that define Froala.
No comment yet, add your voice below!