Learn How to Effortlessly Migrate from TinyMCE to Froala in Your Vue App

When we released Froala 4.1, which supports the LTS Vue version and many other popular JS frameworks, we anticipated significant migration from TinyMCE to Froala. Whether you are a fan of Froala or currently experiencing issues with TinyMCE and looking to switch to Froala for your Vue app, this article aims to provide you with a smooth and efficient transition process. We will guide you through every step, starting from removing TinyMCE to installing and configuring the Froala editor. By the end of this article, you should be able to switch your TinMCE editor to Froala with confidence and ease.

 Why do users migrate from TinyMCE to Froala?

There are several reasons for users to migrate from TinyMCE to Froala, such as:

1. User Interface:
   Many users like the Froala UI. From the flat design to eye-catching SVG icons, Froala clearly stands out. The design of Froala Editor attracts many users who want a clean and modern interface.
   1. Smart Toolbar:
      The Froala Editor boasts an ingenious smart toolbar that organizes its myriad of features into four conveniently grouped context categories: text, block, media, and more. This simple yet intuitive toolbar ensures effortless navigation, as every feature is effortlessly locatable.
   2. Responsive:
      The Froala Toolbar offers a seamless and user-friendly experience by automatically adapting to the user’s screen width. It intelligently displays only the most commonly used buttons, while hundreds of other features are one click away. This is particularly useful for users working on tablets or phones, as it ensures optimal navigation and editing regardless of the screen size of the device.
      In contrast, TinyMCE maintains the toolbar buttons but adjusts the toolbar width based on the screen size, often resulting in the need for a horizontal scrollbar. This can make it challenging for users to locate specific buttons among the clutter, ultimately slowing down the content editing process.
2. Used Technology:
   Both editors are Javascript editors but handle content differently. This results in a different HTML output for each editor. Moreover, these editors possess different API structures, which affects how developers can work with them. Many developers prefer easy use of the Froala API. This allows for easy customization of the editor’s function and the creation of custom elements or plugins.
3. Transparent Pricing:
   Froala plans have a clear pricing model. There are no hidden costs, all Froala’s plugins are included, and there is no limitation on the editor’s usage. In contrast, TinyMCE plans are limited to a certain number of page loads. For example, their “Free“ plan is restricted to 1000 page loads.
   If a small-scale company with 10 users and each user loads a page containing the TinyMCE editor 10 times per day, they will reach the maximum editor-load limit in just 10 days. To continue using TinyMCE, they would need to pay $40 for another 1000 loads, resulting in a monthly cost of $80 or an annual cost of $960. This is actually higher than the cost of the Froala Professional plan.
   In addition, the free TinyMCE plan is limited to one domain, lacks access to all plugins, and does not include professional support.
   (Note: The mentioned prices are due date:8th of September 2023. prices could change later.)
4. Feature quality:
   It is important to note that even if both editors share a feature with the same or similar name, their behaviors may vary. This highlights the significance of testing each feature in both editors, rather than assuming that they will deliver the same level of quality. For instance, we conducted a thorough examination of how each editor pastes content from third-party tools. However, TinyMCE named its feature “PowerPaste“ and made it a premium feature (Included on their Perfossional plan), yet it failed to maintain the pasted content styles as effectively as Froala did. To view the detailed results of our comparison, click here.
5. Multiple Vue components:
   Unlike TinyMCE, which only has a single Vue component for rendering the editor, Froala SDK offers multiple Vue components. In addition to the component for rendering the editor itself, Froala provides a component for rendering editor content outside the editor to make it easy to display the editor content for viewers. Furthermore, the Froala component enables a special rendering mode for the editor on the img, button, input, and <a> tags.
6. Other reasons
   There are many reasons that we will not cover here because we want to focus on learning how to migrate from TinyMCE to Froala. Share your thoughts in the comments section and let us know why you are migrating from TinMCE to Froala.

How to migrate from TinyMCE to Froala in a Vue 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 first step in migrating from TinyMCE to Froala in your Vue application involves uninstalling TinyMCE. Uninstalling TinyMCE involves removing it from the application’s list of dependencies as well as deleting any references to it in your project.

Use your package manager to uninstall TinyMCE. If you are using npm, you can run the following command in your local project directory to uninstall TinyMCE:

npm uninstall -g @tinymce

Inside your npm_modules folder, you should find the “@tinymce“ folder is removed or empty.

Install Froala Vue NPM Package

The next step in transitioning from TinyMCE to Froala is to install the Froala Vue NPM package in the application. To install Froala, use the following command:

npm install vue-froala-wysiwyg

After the installation process completes, you can find the “vue-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.

Begin by deleting the import component statements associated with Tinymce and importing the Froala component instead. It is important to note that there is a distinction in how each editor’s component is imported. Usually, the Tinymce component is imported within a <script use> tag in the specific component where Tinymce will be utilized. On the other hand, it is preferable to import the Froala Vue component in the main.js file, where we use app.use() to globally install and load all Froala components throughout the entire Vue application.

Remove TinyMCE component

Search for the line

import Editor from '@tinymce/tinymce-vue';

and remove all the instances from your Vue applications.

Import Froala in your Vue App

In order to use Froala in your Vue application, it must be properly integrated. This involves importing the Froala WYSIWYG editor styles files into your application.

Open the main.js file and Import the Froala component, plugin files, and its styles using these lines of code:

//Import Froala Editor plugins

import 'froala-editor/js/plugins.pkgd.min.js';

// Import Froala Editor css files.

import 'froala-editor/css/froala_editor.pkgd.min.css';

import 'froala-editor/css/froala_style.min.css';

// Import Froala Editor component

import VueFroala from 'vue-froala-wysiwyg';

Once imported, make sure to pass it in the app.use() method.

app.use() is used to install the Froala components to the entire Vue application, not to a single component

const app = createApp(App);

app.use(VueFroala);

app.mount('#app');

Substitute all instances of TinyMCE with Froala in your template files.

Search for <Editor which defines the TinyMCE component inside the template files and replace it with the <froala. The two components have different tags. Therefore, it is important to replace these types of 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:

<Editor

api-key="your-api-key"

cloud-channel="6"

:disabled=false

id="uuid"

:init="{

selector: 'textarea',

plugins: 'lists link image paste help wordcount',

toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'

}"

initial-value="Once upon a time..."

:inline=true

@click="handlerFunction"

/>

Some of the tags will no longer be needed when migrating to Froala. Go ahead and remove them directly. they are:

1. 1. • api-key
      • cloud-channel
      • disabled
      • output-format
      • tinymce-script-src
      • model-events

id

This tag is used in both components; therefore, we keep it as it is.

tag-name

Is used to define the HTML element for the editor in the inline mode. Replace it with :tag. If it is not defined use :tag=textarea

init

This is the object sent to the tinymce.init method to initialize the editor. It contains the editor options. for example

<editor

:init="{

selector: '#myTextarea',

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'

}"

/>

The most commonly used options are selector, plugins, toolbar, menu, and menubar. We will cover the equivalent for plugins and toolbar options in Froala below.

Because Froala displays only a toolbar, menu and menubar options will be removed.

For the selector option, add its value to the :tag attribute.

For other options like height, find the equivalent Froala API option and use it instead. In this case, Froala also uses the height option to set the editor height.

initial-value

The initial content of the editor when the editor is initialized. Put the initial value inside the component tag.

Example: using initial-value

<editor

initial-value="Once upon a time..."

/>

This will be converted to

<froala>Once upon a time...</froala>

v-model

Replace it with v-model:value

inline

Used 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 converted to

<froala

:config="{toolbarInline: true}"

></froala>

plugins

Used to include plugins for the editor. In Froala, set the pluginsEnabled API option to the equivalent Froala plugins and add it to the :config tag options object.

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"

/>

It will be converted to

<froala   :config="{ pluginsEnabled: ['emoticons', 'charCounter', 'help', 'codeView', 'lists'] }" > </froala>

toolbar

Used to set the toolbar for the editor. In Froala, set the toolbarButtons API option with the equivalent Froala toolbar buttons and add it to the :config tag options object.

In Froala, you can also set the toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS API options to customize the toolbar buttons based on the screen size.

While the toolbar attribute in the <editor> component accepts a string, the Froala toolbarButtons options accept arrays.

Example:

<editor

toolbar="bold italic underline code"

/>

Will converted to

<froala :config="{ toolbarButtons: ['bold', 'italic', 'underline', 'html'] }" > </froala>

Events

In the TinyMCE <editor> component, you will find event names declared after the @ symbol, such as:

<editor @click="handlerFunction" />

However, in Froala, Events are declared in the event objects inside the option object that is passed to the tag attribute.

So to migrate events, you will need to check which events are used and find the equivalent event name from 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: migrating events

In TinyMCE:

<editor    @click="handlerFunction" />

In Froala:

<froala :config="{ events: { 'click':handlerFunction } }"  ></froala>

Full Example

Considering all these changes, now let’s see an example of how the <Editor> tag in TinyMCE will look after modification to <froala> in our Vue template.

Considering the following TinyMCE config

<Editor

cloud-channel=6

disabled =false

id="uuid"

:disabled=false

api-key="no-api-key"

:init="{

selector: 'textarea',

height: 300,

}"

plugins="emoticons wordcount help code lists"

toolbar="bold italic underline code"

initial-value="Once upon a time..."

:inline=true

@click="handlerFunction"

/>

The corresponding Froala config will be as follows:

<froala

tag='textarea'

:config="{

heightMax: 300,

pluginsEnabled: ['emoticons', 'charCounter', 'help', 'codeView', 'lists'],

toolbarButtons: [['bold', 'italic', 'underline'],['html']],

toolbarInline: true,

events: { 'click':handlerFunction }

}"

:id="uuid"

>Once upon a time...</froala>

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 migrating from TinyMCE to Froala, ensure that all changes are working correctly. Test all editor features and verify whether the application behaves the same or better than before.

Conclusion

By switching from TinyMCE to Froala, you can now leverage the robust features that define Froala.

Integrating Froala into your Vue app is smooth, and straightforward, and actually enhances the productivity of your Vue app. Froala provides you with comprehensive tools to tackle rich text editing tasks efficiently. So make the switch and watch your Vue application thrive with Froala.