Froala Editor V4.0.11 — New Table Option, Security Patch, and Much More!

Reaching the top is hard, but staying there is harder. That’s why we periodically release a new Froala Editor version every 30 – 45 days. Being ranked #1 for WYSIWYG Editors 2 years in a row by G2 is a great honor and it pushes us to keep producing a top-quality WYSIWYG editor.

Today, We are happy to announce another major release of Froala 4. Froala 4.0.11 comes with important security fixes for the XSS vulnerability while inserting videos. It also includes important improvements to table styling and formatting with one new table option added. We have also made enhancements to the table keyboard navigation within a total of fourteen improvements included in this new release.

It is highly recommended to update your Froala Editor to the latest version as soon as possible. That way you can take advantage of all the new improvements and keep your editor secure. Updating Froala Editor is easy, it takes two steps or less and it takes less than five minutes. We have a dedicated section in this article on how to update your Editor. Please find it below.

✨ What’s Improved 🚀

1- Enhanced support against XSS vulnerabilities:

Cross-site scripting (XSS) is a security vulnerability allowing an attacker to execute malicious code within your application. It could be very dangerous to the extent of stealing your user’s sensitive data. That’s why It is always important when using a third-party application to ensure it can’t be used to allow XSS attacks in your application.

In Froala, we keep on striving to deliver the best, most secure editing solution for our users. By default, Froala removes the <script> and <style> HTML tags from code inserted into the Editor. Also, the Editor removes JavaScript event handlers that are assigned to the HTML tags from the DOM before they are inserted. For example, writing:

<img src="x" onclick="alert(document.domain)">

Will converted to:

<img src="x" class="fr-fic fr-dii">

This way it’s not possible to load and execute common XSS payloads into the editor.

In this release, we enhanced the support against a potential XSS vulnerability. The vulnerability allowed the injection of malformed HTML bypassing content sanitization through the embed code option on the inserting video popup, which could result in executing JavaScript code.

2- Improvements to Tables:

Froala 4.0.11 brings in improved and extended table support.

Add table footer button:

This was a highly requested feature, we’ve listened and now, you can add a table footer in the same simple way you were able to add a table header:

• Insert a table.
• Click on the table.
• Click on the “Table footer” button from the displayed popup.

To remove a table footer:

• Click on the table.
• Click on the “Table footer” button from the displayed popup again.

The table edit popup has a lot of buttons that allow you to easily edit the table with a few clicks which gives your users a comfortable and easy editing table experience. You can modify which button should appear on the table edit popup through the tableEditButtons option.

Perfectly paste formatted tables from Froala to Excel:

Imagine you were working long hours to create a data presentation with your web app. You are using a WYSIWYG editor, you have created a large data table and spent a few hours formatting and styling it in the proper way you wanted. Finally, you want to send it to someone who doesn’t have access to your web app For revision, you decide to send it in Excel format but once you copied the table from the WYSIWYG Editor to Excel you find the table format is corrupted and you need to redo it again!

It is very annoying, isn’t it?

With Froala 4.0.11 you don’t need to worry about that. Pasting tables from the Froala Editor to Excel sheet has never been better. Every cell with its format will be copied to the excel sheet perfectly.

Before	After

… and much more!

Please refer to the complete changelog list for more improvements, and bug fixes.

Get Froala V4.0.11

This release introduces some security patches, new features, improvements, and bug fixes. It’s highly recommended to update your Editor as soon as possible.

If you have an expired perpetual license, you will need to renew it to get the latest updates. The good news is you can renew it within May for up to 45% discount.

How Do I Upgrade to V4.0.11?

Super easy! Follow the steps below to update to the latest version.

For Froala Editor Version 3 and Version 4 Users

If you‘re hosting Froala files locally:

1. Download the new filesThere are many ways to download the new files, the easiest way is the NPM. simply copy/paste the below command into your terminal

   npm install froala-editor

   For other download options, go to our get started page and select your preferred download method from the step one dropdown menu.

2. Replace the old files:If you have downloaded the files in an external location, copy and paste them into your project files.

If you’re using CDN:

You don’t have to do anything if you’re using the CDN link that contains @latest because you are already using the latest version.

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

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

If you are using the CDN links that contain the Froala version number, edit it to be 4.0.10 as follows

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

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

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step upgrade instructions.