Froala Editor 4.0.14 — Additional XSS Vulnerability Protection, Improved API, Tables Headers, and Much More!
We love to hear from our customers and resolve any issues they may have had. In order to support our clients, we release a new version of the editor every 30 – 45 days.
Today, we are happy to announce another major release of Froala 4. Froala 4.0.14 comes with important security fixes, API and table improvements, and many bug fixes.
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 the Froala Editor is easy. It takes two steps or less. Read below to learn about the recent product improvements we’ve made, why you should upgrade to Froala Version 4.0.14, and how to update your current version.
✨ Check Out Froala 4.0.14 and Find Out What Was Improved 🚀
1- Additional XSS Vulnerability Protection:
The Froala team is striving to make our WYSIWYG editor XSS vulnerability free. Since V4.0.11, we have resolved the vulnerabilities that can be executed through the HTML onerror event attribute and the embed code option on the inserting of the video popup.
In this release, we have added more protection against XSS vulnerabilities by preventing the injection of malformed HTML through the external content set via setModel on React. We prevent XSS that is triggered through <iframe> elements too.
Cross-site scripting (XSS) is one of the most dangerous security vulnerabilities on the web. The attacker can execute malicious code within your application and steal your data. Don’t hesitate to update your Froala editor today.
Are you ready to try Froala Editor?
2- Improved paste.beforeCleanup API Event:
The Froala Editor has a powerful API. It provides users with options, methods, and events to help in customizing the editor for each user’s use case. Froala events are callback functions that are triggered when a specific editor action has taken place. For example, the “paste content into the editor” action has five events:
The pluralism of “paste” events gives you the ability to customize the content or do a specific action before or after the content is pasted into the editor.
In this release, the paste.beforeCleanup (clipboard_html) event, which is triggered after the content is pasted from the clipboard into the Froala Rich Text Editor, has been improved so that if a string is returned, the new string will be used as the pasted content.
new FroalaEditor('.selector', {
events: {
'paste.beforeCleanup': function (clipboard_html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
3- Tables Improvements :
Dragging a text/image outside from a table
WYSIWYG editors should make editing tables simple. That’s what Froala is doing. As a top-rated WYSIWYG editor, Froala allows performing advanced actions with tables other than inserting tables and editing cell content. For instance, you can drag-and-drop content from inside to outside tables and vice versa. This action was successfully done in the previous releases, but the Uncaught TypeError: Cannot read property 'row' of undefined error appears on the console. Using V4.0.14, this error no longer appears on the console.
Nested tables with table headers
Another important table feature that Froala is loaded with is the ability to create nested tables. A few WYSIWYG editors have this feature. Nested tables give you the ability to create a table inside another table. This makes data representation easier in many situations.
Froala supports setting table headers too. In case you have a nested table, you have the ability to set headers for both the inner and outer tables individually. But when you remove the outer table header the inner table header is removed too.
In this release, you will be able to remove headers for both the inner and outer tables individually.
Select table columns using the keyboard.
Froala has many keyboard shortcuts that you can use to edit your content faster. For instance, you can select table cells by pressing the shift key and the arrow keys. Previously, the editor toolbar was disabled while doing this. This issue has now been fixed.
… and much more!
Several bugs were removed with this release in a constant effort to make the user experience even better.
- Fixed pressing backspace after placing the cursor at the end does not work as expected
- Fixed the increase and decrease indent are not working well with Quote
- Fixed pressing enter on a link at the end removes the whole `fr-view` element
Please find the complete changelog list here.
Pay Once ….. Use Forever
Get Froala V4.0.14
How Do I Upgrade to V4.0.14?
Super easy! Follow the steps below to update to the latest version.
For Froala Editor Version 3 and Version 4 Users
Follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.
| Method | How to download | Include in your project | |
| CDN | – | <!-- 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> | |
| CDN (Always the latest version) | – | <!-- 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 | 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 | bower install froala-wysiwyg-editor | ||
| NO Package Manager | Download Froala WYSIWYG Editor files using the download form here. | ||
| Integrated with a Framework | Select your preferred framework from 17 different popular frameworks like React, Angular, and Vue. | ||
| Other options | Check here for other options to use Froala WYSIWYG Editor in your project. | ||
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.
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?
Development continues to make Froala a safe, secure, and feature-rich WYSIWYG editor. 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!