Froala is a great WYSIWYG editor that is used by numerous users to create rich content. Developers use its powerful API to create an intuitive editing experience specific to their project usage case. You can customize the Froala WYSIWYG editor in a variety of ways to meet the needs of your project. In this article, we will discuss some tips and tricks to enhance your users’ usage and productivity.

Edit Link Attributes

Froala is used to edit links through a simple pop-up. By default, the pop-up only allows you to set the URL and the text of the link with an option to open the link in a new tab. Your users could be disappointed if they would like to edit more link attributes such as the title, rel, and class attributes. You may not know, but you can display more attributes in the Froala edit link pop-up easily using the link attributes API option. This option accepts an object with additional attributes that could be customized for a link.

In case you want to add the ability to change the link title attribute, you’ll need to set the linkAttributes like:

new FroalaEditor('textarea.edit', {

linkAttributes: {

title: 'Enter Title'

},

});

Now, if you try to insert or edit a link in your Froala editor, you will see an additional field asking for a ‘Title’. Similarly, you can add other attributes such as the link’s rel, target, and class attributes with more control over the customization. This not only simplifies the editing process but also enhances the user experience.

Setting a Character Limit in Froala for Efficient Content Management

This tip is useful if you are using Froala as an input and want to limit the number of characters that your users can enter. Often, this is important to maintain the required number of the database field. Many developers don’t know that implementing a character limit is pretty straightforward in Froala.

You can use the charCounterMax API option to restrict your users from adding more than a specified number of characters to their content. To implement this, you need to add the charCounterMax option to your Froala editor.

new FroalaEditor('textarea.edit', {

charCounterMax: 500,

});

In this case, users cannot add over 500 characters to the content. If they try to go beyond the set limit, the editor will not accept additional characters.

You can go beyond this and provide a custom message to users when they hit the maximum limit. This can be done by customizing the charCounter.exceeded API event which is triggered when the charCounterMax value is exceeded. For simplicity, you can display an alert with a “You have exceeded the max character limit” message when the limit is reached:

new FroalaEditor('textarea.edit', {

charCounterMax: 500,

events: {

'charCounter.exceeded': function () {

alert('You have exceeded the max character limit');

},

},

});

Here, an alert will pop up once users hit the limit, helping them recognize and adjust their text to the specified character restriction.

Customizing Text Color to Match Your Brand

Froala allows you to choose from a wide set of colors for text editing by default. Additionally, a text box is available for typing any Hex color code. However, there might be situations where you want to limit the color options, such as maintaining consistency with your brand identity or simplifying the user interface.

To set the limitation on text colors, you can modify the colors option in your Froala editor settings. You will need to specify the colors in an array and assign them to the colorsText API option then hide the HEX input to enter a custom color by setting the colorsHEXInput API option to false.

new FroalaEditor('textarea.edit', {

colorsText: ['#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#2B272B'],

colorsHEXInput: false,

});

With this setup, users can only choose from the five different colors specified in the array when coloring their text.

Improves the page performance with editor lazy loading

Lazy loading is a technique that allows you to defer the initialization or loading of an object or a resource until it is actually needed. Lazy loading aims to save memory and bandwidth, as it avoids loading unnecessary data or code. If you are searching for a way to lazy load Froala editor, you don’t need to look far away.

Froala supports this functionality right out of the box. You just need to set the initOnClick option in your Froala editor instance. By setting this option to true, the editor will initialize only the basic code when the page is loaded and the rest of the code when clicking in the editable area.

This can greatly improve the performance of your page, especially if you have multiple instances of the Froala editor on the same page.

new FroalaEditor('textarea.edit', {

initOnClick: true

});

Disable Right Click within the editor

For some websites or applications, disabling right-click within the editor may be necessary to avoid undesired user actions such as copying, pasting, or inspecting the HTML code. This also makes it possible to override the default browser menu with a custom one from your creation.

Fortunately, Froala provides an easy method to achieve this. By setting the disableRightClick API to true, whenever users right-click within the editor, no contextual menu will pop up.

new FroalaEditor('.selector', {

disableRightClick: true

});

Disabling this option is also recommended if you are using the inline mode and you set the toolbarVisibleWithoutSelection to Keep the editor visible next to the cursor even when there is no selection.

To create a custom action instead of the default browser context menu, you can first detect if the user right-clicked the editor by listening for the mousedown event and checking if the right mouse button was pressed, then do whatever you want. Here is an example:

new FroalaEditor('textarea.edit', {

disableRightClick: true,
events: {

'mousedown': function (e) {

if (e.which == 3) {

console.log('Right-click detected.');

}

}

},

});

In the above example, the console will log a message every time the user right-clicks within the editor.

Conclusion

Froala is an excellent WYSIWYG editor that gives you a range of customization options to suit your unique needs. With its friendly UI and rich features, it allows you to enhance the editing process and improve the overall user experience. Whether it is setting character limits, customizing text colors, lazy loading for improved performance, or disabling right-click for more control, Froala’s functionalities pay heed to every minor detail. Master these tips, and you can maximize the potential of content management with Froala.

Try experimenting with these features and witness how Froala transforms your regular content into interactive and engaging ones. Remember, the ability to adapt and customize according to your requirements is what makes an editor truly powerful. And, Froala stands out in this aspect. Start your free trial now!

Integrating Character Counter on Froala WYSIWYG Editor Running on an Angular App Project

Froala WYSIWYG Editor is a powerful and customizable  angular rich text editor that can enhance the text editing experience in your Angular applications.

One useful feature that you may want to add is the Character Counter plugin to keep track of the number of characters in the editor.

In this tutorial, we’ll walk you through integrating the Character Counter plugin from Froala into your Angular app editor.

Prerequisites

Before we begin, make sure you have the following prerequisites:

• Node.js and npm (Node Package Manager) are installed on your system.
• Angular CLI (Command Line Interface) is installed on your machine.

If you haven’t installed it, you can do so using the following command:

npm install -g @angular/cli

Now, you can create a new Angular app using the Angular CLI:

ng new myApp

cd myApp

Replace “my-app” with your preferred app name.

Step 1: Installing Froala WYSIWYG Editor

In your Angular app project, navigate to the project root folder and install Froala WYSIWYG Editor using npm:

npm install angular-froala-wysiwyg

This command will install the required packages for Froala integration.

Step 2: Update index.html

Open the index.html file in your project’s src folder and add the following code inside the <head> tag:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>MyApp</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet">

</head>

<body>

  <app-root></app-root>

</body>

</html>

This code includes the Froala Editor CSS stylesheet.

Step 3: Update app.module.ts

Open the app.module.ts file in your project’s src/app folder and make the following changes:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';


@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    FroalaEditorModule.forRoot(),

    FroalaViewModule.forRoot(),

  ],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}

In this code, we import the Froala Editor module and configure it using FroalaEditorModule.forRoot() and FroalaViewModule.forRoot().

Step 4: Update angular.json

Open the angular.json file in your project root folder and add the Froala Editor CSS styles to the “styles” array:

"styles": [

  "src/styles.css",

  "node_modules/froala-editor/css/froala_editor.pkgd.min.css",

  "node_modules/froala-editor/css/froala_style.min.css"

],

This ensures that the Froala Editor styles are included in your Angular app.

Step 5: Update app.component.html

Open the app.component.html file in your project’s src/app folder and add the following code:

<div class="content" role="main">

  <div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>

</div>

This code creates a div element with the [froalaEditor] directive to initialize the Froala Editor component.

Step 6: Update app.component.ts

Open the app.component.ts file in your project’s src/app folder and replace its contents with the following code:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

  editorContent = '<a href="https://froala.com/">Froala Angular WYSIWYG Editor</a>';

  public options: Object = {

    events: {

      'froalaEditor.contentChanged': function () {

        console.log('Content updated!');

      }

    }

  };

}

We import the necessary Angular module and define the AppComponent class. We set the editorContent variable with the initial HTML content for the Froala Editor.

We define the options object to specify event handling.

In this example, we’ve added a content change event that logs a message when the editor’s content changes.

Step 7: Include the Character Counter plugin

To enable the character counter feature, you need to configure the options object in your component’s TypeScript file. Here’s an example:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

  editorContent = '<a href="https://froala.com/">Froala Angular WYSIWYG Editor</a>';

  public options: Object = {

    charCounterCount: true,

    charCounterMax: 140,

    events: {

      'froalaEditor.contentChanged': function () {

        console.log('Content updated!');

      }

    }

  };

}

In this example, we set charCounterCount to true to enable the character counter. You can also specify the charCounterMax property to define the maximum character limit for your editor.

This plugin serves a specific purpose: it enables you to limit the number of characters that users can input or edit within the WYSIWYG editor.

• Character Limitation: The primary function of the char_counter.min.js plugin is to enforce a character limit. This is particularly useful when you want to restrict the amount of text or content that users can add to a specific area, such as a comment box, a description field, or any other input field where text input needs to be controlled.
• Real-Time Character Count: The plugin typically provides a real-time character count feature. It counts and displays the number of characters currently entered or edited by the user. This count is often displayed near the editor, allowing users to monitor their input as they type.
• Limit Exceedance Handling: When the user exceeds the specified character limit, the plugin can be configured to prevent further input or display a warning or error message. This ensures that users know the limit and can’t go beyond it.
• Customization: Depending on the plugin’s capabilities and the integration into your application, you may have options to customize the appearance and behavior of the character counter, such as changing the color or style of the counter display or the error message.
• Ease of Use: Implementing this plugin is usually straightforward. You include the plugin’s JavaScript file in your project, initialize it, specify the character limit, and set up any event handlers or display elements as needed.

Step 8: Run Your Angular App

With all the necessary changes made, you can now run your Angular app:

npm start

This command will start a development server, and your app will be available at http://localhost:4200/ by default.

Conclusion

You have successfully integrated Froala WYSIWYG Editor into your Angular app.

Now, when you navigate to your app’s URL, you will see the Froala Editor in action, complete with the initial content and event handling as configured.

The Character Counter plugin is a valuable tool for enforcing character limits and providing real-time character count feedback within a WYSIWYG HTML editor.

It helps maintain content quality, prevents excessive input, and enhances the user experience when dealing with text or content input fields in web applications.

Froala WYSIWYG Editor provides a wide range of features and customization options, allowing you to create rich text editing experiences tailored to your needs.

Explore the Froala documentation for more details on how to utilize its features in your Angular application.

The people who are crazy enough to think they can change the world are the ones who do

— Steve Jobs.

When the Froala WYSIWYG editor idea started, many WYSIWYG editors were already on the market. The goal wasn’t to add another standard editor. We were obsessed with offering an out-of-box experience that would revolutionize web editing. It was founded on improving the drawbacks and exposing the strengths of the pre-existing editors, including TinyMCE.

From introducing the most mobile-friendly editor toolbar to being the first WYSIWYG editor with the popup with formatting controls appearing the same on mobile devices as on desktops, Froala continued pushing the boundaries in ways never seen before in the WYSIWYG editor market. With every update and new feature added, the underlying goal was to enhance the web editing process for the end-users and developers alike. Ensuring that, as Steve Jobs said, we are “the ones who do”.

Froala initialization modes

While other WYSIWYG editors were developed to provide the same user interface regardless of the HTML element they initialized on, Froala innovated this, making initializing the editor on different HTML elements generate a different user interface suitable for editing that element specifically.

For example, initializing the editor on the HTML <a> element will not open the full editor with the hundreds of toolbar buttons. Instead, it will display Froala’s Edit Link popup, which easily lets you change the URL and display the text of the hyperlink. This focus on user-centered design facilitated ease of interaction and enhanced the user experience tenfold.

<script>

var editor = new FroalaEditor('a#example');

</script>

If you prefer a more comprehensive editing experience, you can easily initialize the editor on a ‘textarea’ or a regular ‘div’ element.

<script>

var editor = new FroalaEditor('textarea#example');

</script>

In <img> element instance, when Froala initializes, it brings up a simple window to replace the image, adjust its alignment, insert alt text, and other relevant properties.

<script>

var editor = new FroalaEditor('img#example');

</script>

Besides the <img> and <a> HTML tags, it also outputs a specific user interface when used on the <button> and <input> elements.

This flexibility to adopt initiative UI depends on the specific HTML element it initializes upon distinguishing Froala from many of its competitors. It underlines our commitment to offering a highly personalized experience that eases and expedites the editing process for the end user.

This flexibility allows Froala to be used as a standalone Image uploader or in building a modern drag-and-drop web page builder.

How to implement initialization modes in the Vue app?

First, let us quickly recap how we can add Froala to a Vue app. It is a simple 3-step process:

3. Install the Froala package via NPM. Use the command

   npm install vue-froala-wysiwyg

   in the terminal to download and add it to your project’s node_modules folder.

4. After successfully installing the package, you need to import it into your main.js file. Add the code below to complete this:

   import { createApp } from "vue";
   
   import App from "./App.vue";
   
   //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";
   
   const app = createApp(App);
   
   app.use(VueFroala);
   
   app.mount("#app");

5. Finally, to display the editor, all you need to the Froala component inside your template

   <froala tag=’textarea’ :config="config"></froala>

   See the following complete example:

   <template>
     <img alt="Vue logo" src="./assets/logo.png">
     <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
   </template>
   
   <script>
   
   export default {
     name: 'App',
     data () {
       return {
         config: {
             toolbarButtons: {
   
               'moreText': {
   
                 'buttons': [ 'italic', 'underline', 'bold', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
   
               },
   
               'moreParagraph': {
   
                 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple']
   
               },
   
               'moreRich': {
   
                 'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
   
               },
   
               'moreMisc': {
   
                 'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
   
                 'align': 'right',
   
                 'buttonsVisible': 2
   
               }
   
             },
           events: {
             initialized: function () {
               console.log('initialized')
             }
           }
         },
         model: '<i>Edit Your Content Here!</i>'
       }
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

The Froala Vue component attributes are:

•  `tag` – This should match the HTML element on which you want to initialize the editor. By default, the tag is ‘textarea’. We set its value to ‘a’, ‘img’, ‘button’, or ‘input’ which we call the special tags, to implement the other initialization modes.
•  `config` – This is an optional attribute where you can pass the Froala configuration options.
•  v-model – Using this with the ‘froala’ component, Vue can handle automatic synchronization between the component and its underlying data model. This proves useful when integrating Froala alongside other components within your Vue application, as it promotes interactive and dynamic content creation.

Special tags

The Froala editor Vue special tags are img, button, input, and a tags. using these tags you can have different initialization modes. In this case, there are some considerations:

3. The model must be an object containing the attributes for your special tags.
4. The model can contain a special attribute named innerHTML which inserts innerHTML in the element, for example, If you are using ‘button’ tag, you can specify the button text like this

   buttonModel: {
   
   innerHTML: 'Click Me'
   
   }

5. Froala provides an additional option when using special tags. This option is
   vueIgnoreAttrs: (default: null) This option is an array of attributes that you want to ignore when the editor updates the v-model:

   config: {
   
   vueIgnoreAttrs: ['class', 'id']
   
   }

Examples of using special tags:

1. Img

<template>
  <froala
    id="edit"
    :tag="'img'"
    :config="imageOptions"
    v-model:value="imgModel"
  ></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      imgModel: {
        src: "https://fakeimg.pl/350x200/?text=Click%20on%20me",
      },

      imageOptions: {
        vueIgnoreAttrs: ["style"],
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example,  we have set the :tag attribute to “img”.

<froala :tag="img" :config="imageOptions" v-model:value="imgModel"></froala>

The model must be an object containing the attributes for your special tags. In the case of the img element, you must declare the “src“ attribute so you can render the image.

imgModel: {

src: "https://fakeimg.pl/350x200/?text=Click%20on%20me",

}

Note, the model will change as the attributes change during usage.

and we used the special option vueIgnoreAttrs to prevent “Style” from being updated in the model.

imageOptions: {

vueIgnoreAttrs: ["style"],

},

When you run your Vue app, you’ll see an image. Clicking on it will open the Froala edit image popup, allowing you to replace the image, add ALT text, insert a caption, and more.

2. Button

<template>
  <froala id="edit" :tag="'button'" v-model:value="buttonModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      buttonModel: {
        innerHTML: "Click Me",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “button”.

<froala id="edit" :tag="'button'" v-model:value="buttonModel"></froala>

We used the model’s special attribute “innerHTML” to specify the button

buttonModel: {

innerHTML: 'Click Me'

},

As the editor changes the button text, the innerHTML attribute from buttonModel model will change too.

When you run your Vue app, you’ll see a button with the text ‘Click me‘. Clicking on it will open a popup to update the button text.

3. input tag

<template>
  <froala id="edit" :tag="'input'" v-model:value="inputModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      inputModel: {
        placeholder: "I am an input!",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “input”.

<froala id="edit" :tag="'input'" v-model:value="inputModel"></froala>

We used the model to set the input placeholder attr

inputModel: {

placeholder: 'I am an input!'

},

This will show an input field with the placeholder text “I am an input!”. Clicking on it will open a popup to update the input text.

4. a tag

<template>
  <froala id="edit" :tag="'a'" v-model:value="linkModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      linkModel: {
        href: "https://www.froala.com/wysiwyg-editor",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “a”.

  <froala id="edit" :tag="'a'" v-model:value="linkModel"></froala>

We used the model to assign the href attribute to the desired URL.

      linkModel: {
        href: "https://www.froala.com/wysiwyg-editor",
      },

This will show a link named “My link” and has the URL “https://www.froala.com/wysiwyg-editor”. When this link is clicked, the Froala edit link popup will open allowing the link’s properties to be updated.

Easily edit multiple HTML elements

These examples illustrate how you can simplify the task of revising HTML tags in your Vue app while maintaining a dependable link to v-model values. This enables faster, more reactive application updates with minimal effort. Whether it’s tweaking an image property, editing button text, adjusting a link, or updating an input text, Froala provides a seamless and intuitive editing experience. By utilizing special tag attributes in combination with v-model, you can instantly reflect changes made in the editor on your Vue App. The potential of this feature paves the way for more flexible, user-friendly applications enhanced by real-time responses and modifications.

Start using the Froala editor Vue SDK now.

Learn how to migrate From TinyMCE to Froala.

Here are several Froala Vue WYSIWYG editor examples you can try:

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.

In web development, creating a seamless editing experience is often a necessity.

Whether you’re building a content management system (CMS), a blog platform, or a collaborative document editor, providing a feature-rich and intuitive inline text editor can enhance the user experience.

One tool that stands out for this purpose is the Froala WYSIWYG Editor, which offers an Inline React Editor mode that allows you to embed rich text editing capabilities into your React applications.

In this article, we’ll delve into how to use Froala’s Inline Mode in a React App project.

What is the Froala WYSIWYG Editor?

Before diving into the intricacies of implementing Froala’s Inline Mode in a React-based application, it’s crucial to understand what the Froala WYSIWYG Editor brings to the table.

Froala is more than just another text editor; it’s a powerful JavaScript library designed to deliver a high-quality, user-friendly WYSIWYG (What You See Is What You Get) experience. Unlike traditional text editors, Froala allows for seamless text editing and formatting right within web applications, mimicking the features and capabilities of a full-fledged word processor.

One of the standout features of Froala is its flexibility.

Spotlight: Inline Mode

One feature that deserves special mention is Froala’s Inline Mode. This mode allows you to embed the editor directly within the text of your web page. Instead of switching to a separate editing interface, users can edit text on-the-fly, making the user experience more intuitive and less disruptive.

Setting Up Your React App

To get started with using Froala’s Inline Mode in a React application, you first need to set up your project.

If you haven’t already created a React app, you can do so using Create React App or your preferred method.

Once your project is ready, follow these steps to integrate Froala into your app:

Step 1: Installation

You can install the Froala WYSIWYG Editor for React by running the following command in your project directory:

npm install react-froala-wysiwyg --save

Step 2: Adding the Editor

In the component where you want to use the Froala Inline Editor, import Froala features and code the component:

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

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

import FroalaEditorComponent from "react-froala-wysiwyg";

function App() {

  let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

  return (

    <div id="froala-editor">

          <h1>Froala WYSIWYG Editor </h1>

          <h2>Tutorial about Inline React Editor</h2>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

        }}

      />

    </div>

  );

}

export default App;

In this code snippet, we code the necessary components and plugins for the Froala editor.

The toolbarInline: true configuration option is what enables the Inline Mode.

    <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

          toolbarInline: true

        }}

  />

Understanding the final component line-by-line

This code is a simple React application that uses the Froala WYSIWYG Editor to render a rich text editor on a web page. Let’s break down the code step by step:

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

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

These lines import the necessary CSS stylesheets for the Froala WYSIWYG Editor. These styles define the appearance and layout of the editor.

import FroalaEditorComponent from "react-froala-wysiwyg";

This line imports the FroalaEditorComponent from the “react-froala-wysiwyg” library.

This component is a React wrapper for the Froala WYSIWYG Editor, allowing you to integrate it into your React application.

Define the App component:

function App() {

This is a functional React component named App. It’s the entry point of your application.

let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

Here, a string variable named model is defined, which contains HTML content. This HTML content will be displayed in the Froala WYSIWYG Editor when the component is rendered.

Render the component:

return (

<div id="froala-editor">

<h1>Froala WYSIWYG Editor</h1>

<h2>Tutorial about Inline React Editor</h2>




<FroalaEditorComponent

tag="textarea"

model={model}

config={{

toolbarInline: true

}}

/>

</div>

);

The return statement contains JSX code that defines the structure of the rendered component.

Inside the div with the id “froala-editor,” there are two heading elements (h1 and h2) providing some context about the editor.

The FroalaEditorComponent is used to render the Froala WYSIWYG Editor itself. It is configured as follows:

• tag="textarea": This specifies that the editor should be rendered as a textarea element.
• model={model}: This sets the initial content of the editor to the HTML content stored in the model variable.
• config: This is an object that specifies configuration options for the editor. In this case, it sets toolbarInline to true, indicating that the toolbar should be displayed inline with the editor.

Export the App component:

export default App;

This exports the App component so that it can be used in other parts of the application or imported into other files.

In summary, this code sets up a simple React application that displays a Froala WYSIWYG Editor with some initial HTML content.

Users can interact with the editor to edit and format text as needed. The editor’s appearance and behavior are controlled by the configuration options provided in the config object.

You can further customize the editor by adding or removing plugins and adjusting configuration settings to suit your project’s requirements.

Customizing the Inline React Editor

The power of the Froala Inline Mode lies in its customizability. You can tailor the editor’s behavior, appearance, and functionality to align perfectly with your project’s requirements. Let’s explore some common customizations you might want to consider:

1. Adding Custom Buttons

One of the most common customizations is adding custom buttons to the editor’s toolbar. This allows you to extend the editor’s functionality beyond the default options.

2. Customizing Styles and Formatting

Froala allows you to customize the available text formatting options, such as font size, font family, and text color. You can also define custom styles for your project.

3. Image and Media Handling

Integrating media handling capabilities into your inline editor can greatly enhance its usefulness. Froala supports image and media embedding, allowing users to add images, videos, and other multimedia content directly into the text.

Conclusion

Incorporating an Inline React Editor into your web application using Froala’s Inline Mode is a powerful way to enhance the user experience and provide rich text editing capabilities.

With its flexibility, customization options, and straightforward integration, Froala makes it relatively simple to create a feature-rich text editor that suits your project’s needs.

Throughout this article, we’ve covered the essential steps for setting up the Froala Inline Mode within a React application.

We’ve also explored various customization options, from adding custom buttons to handling media uploads, and discussed how to handle user-generated content.

By following these guidelines and experimenting with Froala’s extensive documentation and examples, you’ll be well on your way to implementing a seamless and user-friendly inline text editor in your React project.

Whether you’re building a CMS, a collaborative writing platform, or any application requiring rich text editing, Froala’s Inline Mode can be a valuable addition to your toolkit.