Froala Editor V4.5: Disable Plugins, Excel Paste, & New Features!

As a top-rated WYSIWYG editor, Froala is dedicated to consistently delivering innovative features that elevate the content creation experience for our users. Today, we’re thrilled to unveil the latest version of our powerful editor – Froala Editor V4.5.

This release includes several exciting new features that enhance the user experience and provide greater flexibility. Imagine being able to effortlessly disable specific plugins, allowing you to tailor the editor to your unique needs. Or how about the ability to seamlessly paste multiple cells from Excel directly into your content? These are just a few of the remarkable enhancements that make Froala Editor V4.5 a must-have for Froala users.

We recommend updating your editor today – it will take less than 5 minutes, and you’ll enjoy an even better editing experience. To help you update your editor as smoothly as possible, we’ve added a detailed section at the end of the post.

A Deep Dive into the Froala Editor V4.5

Easily Disable Specific Froala Plugins

Froala’s modular plugin structure is a powerful feature that allows developers to include only the plugins they need. This makes the editor more efficient, easier to understand, and simpler to extend and maintain. Instead of loading all 40+ plugins by default, developers can use the pluginsEnabled option to specify the active plugins.

However, using this way for disabling one or two plugins could be cumbersome. Developers had to list all the plugins they wanted to keep enabled, which became tedious as the number of plugins grew.

With the new pluginsDisabled option, you can easily turn off specific plugins without hassle. Simply list the plugins you want to disable, and Froala takes care of the rest—no need to manage a long list of enabled plugins.

Now, developers can easily exclude specific plugins without needing to maintain a comprehensive list of enabled plugins. This streamlines the configuration process and gives you greater control over the editor’s functionality.

For example, let’s say you want to disable the “emoticons” and “fullscreen” plugins. You can simply set pluginsDisabled: ['emoticons', 'fullscreen'], and those plugins will be disabled regardless of how the pluginsEnabled option is configured.

This new feature makes it effortless to customize Froala to your specific needs, leading to a more efficient and optimized implementation.

Organize the order of line height dropdown items

Take control of your content’s layout! Froala Editor V4.5 now lets you customize the order of line height options in the dropdown menu, ensuring a more intuitive and user-friendly experience.

Previously, when setting the lineHeights option as an object, the order of the options would be determined by the natural order of the object’s elements in JavaScript. This meant the order was not necessarily intuitive or consistent with how the developer had intended to present the options.

Now, with Froala Editor V4.5, you can set the lineHeights option as an array of objects. When you do this, the editor will display the line height options in the exact order you specify in the array. This gives you complete control over the presentation of these options, ensuring a seamless and intuitive user experience.

For example, let’s say you want to offer your users the following line height options 1, 1.15, 1.5, 2, 3. If you used the object-based approach

new FroalaEditor('.selector', {

  lineHeights: {
    '1': '1',
    '1.15': '1.15',
    '1.5': '1.5',
    '2': '2',
    '3': '3'
  }

});

The options will be displayed in the following order: 1, 2, 3, 1.15, 1.5 due to the way JavaScript objects are structured. But now, with the new array-based approach:

new FroalaEditor('.selector', {

 lineHeights: [

  {label: '1', value: 1},

  {label: '1.15', value: 1.15},

  {label: '1.5', value: 1.5},

  {label: '2', value: 2},

  {label: '3', value: 3},

 ]

});

The options will be shown exactly as you defined them, preserving your intended order and layout.

This enhancement empowers you, the developer, to create a more polished and customized editing experience for your users. By controlling the order of line height options, you can ensure your content authors have easy access to the most relevant and useful formatting choices.

Pasting Multiple Cells From Excel

Pasting Excel data into an existing table just got easier! Now, you can seamlessly merge Excel content into existing tables in Froala. Whether your data has more rows, columns, or different formatting, Froala adapts automatically—saving you time and effort.

Here’s how it works:

When you hover over a table in the Froala editor, you’ll see a new selection icon in the top-left corner. Clicking this icon selects the entire table, allowing you to paste content from Excel directly into it.

If the copied Excel content has more rows or columns than the selected table, the table will automatically expand to accommodate the new data. The formatting from Excel, such as text styles, colors, and cell borders, will carry over seamlessly.

Conversely, if the pasted content is smaller than the existing table, the extra cells will remain intact. This ensures you never lose any of your carefully crafted table structure.

Much More…

We have made additional enhancements and addressed various issues reported by our users to enhance the overall performance and stability of Froala Editor and ensure display the content in the right format. These include:

• Files Manager plugin now supports uploading .hex files.
• Enhance Word Paste plugin to retain the Roman Numerals in numbered lists.
• Improve the link plugin to ensure the right display of the Link Edit popup in the Full Page mode.
• Update the URL plugin to improve the URL and email detection in the pasted content.
• Apply the fontSizeUnit option value to the editor content by default.
• Addresses improvements to ensure proper toolbar positioning and visibility handling in sticky mode.
• Resolved the issue where clear formatting removes video from the content.

These enhancements demonstrate Froala’s commitment to continuously improving the editor’s functionality and addressing user feedback to provide a superior content creation experience.

Please find the complete changelog list here.

How Can I Update?

Don’t miss out on the benefits of the latest Froala 4.5 release. Update today and experience the enhanced editing features and improvements.

If you are using a plain JavaScript library or other framework, check the get started page to know how to download the latest Froala Editor release and how to include it in your project based on your preferred method.

If you are using a plain JavaScript library or other framework, follow the table below to learn how to download the latest Froala Editor release and include it in your project based on your preferred method.

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

npm install froala-editor

<!--

Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.

../css/froala_editor.pkgd.min.js

-->

<link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!--

Replace the {download-folder-path} with the path to the folder containing the JS file e.g.

../js/froala_editor.pkgd.min.js

-->

<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>

bower install froala-wysiwyg-editor

For Froala Editor Version 2 Users:

Follow this migration guide for step-by-step instructions on upgrading from version 2.

Try The Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Support and Feedback

We are dedicated to always offering the best possible experience for all our users. We believe this release, meant to enhance Typescript support, is a stepping stone towards that commitment. We encourage you to try this improved Typescript support and give us your valuable feedback. Your input is crucial for delivering continuous enhancement and meeting your evolving needs. Thank you for being a valuable part of our vibrant and growing community.
We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Change Log

• Please visit the release notes for a complete list of changes.

Get Started

• You can download and start using Froala in less than five minutes following our get-started guide.

Technical Questions

• If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.