Froala Editor V4.5.1: Enhanced Filestack, Styling Non-editable Content, and More

We are excited to announce the release of Froala Editor 4.5.1. This version includes several new features and improvements, such as enhanced performance, bug fixes, and new customization options. Users can now enjoy a more seamless editing experience with increased stability and efficiency.

By upgrading to Froala Editor V4.5.1, users will benefit from using the Filestack plugin on all browsers, the ability to easily style contenteditable="false" elements, and much more!

Let’s dive in and explore the key highlights.

Filestack Plugin now works across all browsers

Froala Editor 4.3 introduced the powerful Filestack plugin, allowing users to easily upload and manage files from various cloud storage providers.

The Filestack integration offers a complete file upload management solution. When a user uploads a file, a CDN link is created instantly, providing optimized and rapid file delivery.

However, the previous version had some browser compatibility restrictions, limiting its usage.

With Froala Editor V4.5.1, the Filestack plugin now works seamlessly across all browsers and operating systems. Users can now enjoy a consistent and reliable file management experience, regardless of their browser of choice.

Configuring the Filestack plugin is easy. Check out these guides for more details:

• New storage solutions available inside an HTML editor software
• Advanced Image & Video Upload and Transformation Features

With the cross-browser compatibility of the Filestack plugin, users can now confidently manage their files from any device or browser, saving time and hassle. This improvement further enhances the flexibility and reliability of the Froala Editor, making it an even more powerful tool for content creation and management.

Easily Style Non-Editable Content

Froala Editor 4.5.1 introduces a powerful new feature that gives you more control over styling your content. The update adds a new configuration option called (allowStylingOnNonEditable). When you set this to true, users will be able to style contenteditable=”false” elements. If a user styles content partially within a non-editable element, the entire element’s content will be styled.

new FroalaEditor('#editor', {

allowStylingOnNonEditable: true

});

By default, this configuration is set to false, maintaining the old behavior where non-editable element styling is not allowed.

By unlocking the ability to style non-editable content, Froala Editor 4.5.1 gives you greater creative control and a more streamlined editing experience. No more workarounds or compromises – just the freedom to format your content exactly how you want it.

Table Formatting Enhancements

This release supercharges table formatting, dramatically boosting user productivity. The new features streamline content management and editing, saving time and reducing frustration.

Multi-cell Content Formatting

You can now select and format multiple table cells at once. Simply click and drag, or use the (Shift + Arrow) keys shortcut. Then, apply text styles like font size, bold, italics, alignment, and background color across all selected cells with a single action.

Improved table content alignment

If the user wants to align content within a table cell, he can select the cell and align the content from the table popup alignment option or from the editor toolbar alignment options.

Previously, the table popup alignment applies styles directly to the <td> elements, while toolbar alignment targets the content inside these cells. This discrepancy leads to conflicts when switching between the two alignment methods, causing the alignment to stop working as expected.

Froala V4.5.1 syncs the two alignment methods for a seamless experience. Now, if a cell is selected and a style is applied from the toolbar, it is applied to the entire td element. However, if a specific text or element within the cell is selected, the style from the toolbar applies only to that selected text/element.

Additional Table Improvements

Froala V4.5.1 also addresses other table-related issues. It removes the unnecessary .fr-table-selector overlay that appeared when hovering over the editor inside a table, even without a table inside the editor. And it fixes table resizing problems when using Froala within the Fluent UI 8 Dialog component.

These table formatting enhancements make Froala Editor an even more powerful tool for organizing and presenting your content. With these time-saving features, you can focus on creating great work instead of wrestling with formatting.

Track Content Movements with Ease

Froala Editor 4.5.1 introduces an exciting new feature that allows you to track content movements. When you enable the Track Changes plugin, the editor will now visually indicate whenever users drag and drop content within the document.

The ability to track drag and drop actions further enhances Froala Editor’s capabilities. Now, you can confidently rearrange content, knowing you can monitor and understand the changes. This makes Froala an even more powerful tool for efficiently expressing your ideas and keeping your content organized.

To take advantage of this feature, simply enable the Track Changes plugin by including its button in the toolbarButtons option. Refer to the plugin’s documentation to learn more about its configuration and usage.

new FroalaEditor('#froala-editor',  {

toolbarButtons: ['bold', 'italic', 'underline','fontFamily', 'color',  'paragraphStyle','trackChanges', ]

});

Bug Fixes

Additionally, the team has addressed various bug fixes and stability improvements to ensure a seamless and reliable editing experience for all Froala Editor users. These include:

• The release resolves an issue that caused the editor to freeze when users inserted an image as a base64 string and then switched to the Code View. This fix ensures a smooth transition between the visual and code editing modes, saving users from frustrating interruptions.
• The team removed a duplicate identifier runtime error in the TypeScript type definition file index.d.ts. This issue had previously caused problems with TypeScript compilation, making integration with TypeScript-based projects more challenging. By addressing this bug, the Froala team has improved the editor’s overall compatibility and reliability for developers.

Please find the complete changelog list here.

How Can I Update?

Don’t miss out on the benefits of the latest Froala 4.5.1 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.