Froala Editor V4.0.11: New Table Option,and Much More!
- Posted on
- By Mostafa Yousef
- In Editor, General
Table of contents
- ✨ What’s Improved 🚀
- 1- Enhanced support against XSS vulnerabilities:
- 2- Improvements to Tables:
- Add table footer button:
- Perfectly paste formatted tables from Froala to Excel:
- … and much more!
- Get Froala V4.0.11
- How Do I Upgrade to V4.0.11?
- For Froala Editor Version 3 and Version 4 Users
- If you‘re hosting Froala files locally:
- If you’re using CDN:
- For Froala Editor Version 2 Users:
- Try The Latest Froala Editor
- Are you ready to use Froala in production?
- Useful Links:
- Change Log
- Get Started
- Support and Feedback
- Technical Questions
- What’s next?
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.
It is always strongly advised to update your copy of Froala Editor promptly to avoid any potential risk.
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.
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:
- 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.
- 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.
Try The Latest Froala Editor
Explore a variety of examples that show you the functionality in Froala HTML Editor.
If you like to see the HTML output while trying Froala, use Froala Online HTML Editor.
Are you ready to use Froala in production?
Level up your rich text editing capabilities today with the plan that best suits your needs.
Useful Links:
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.
Support and Feedback
- We’d love to hear what you think of the latest release! Join us on GitHub Community to chat with product managers, developers, and other members of the Froala team.
Technical Questions
- If you have a technical question, you can check to see if we already answered it in our help center. If not, contact our Support team.
What’s next?
More changes and improvements are coming up in the next release! Stay tuned and subscribe to our newsletter to be the first to know about the updates!
No comment yet, add your voice below!