Froala 4.4: Empowering Developers with New Advancements

Froala Release

We’re thrilled to announce the release of Froala WYSIWYG Editor version 4.4, a milestone that demonstrates our commitment to delivering cutting-edge solutions for developers and Froala customers alike.

This release is packed with a host of exciting updates, enhancements, and bug fixes that are sure to elevate your content creation and management experience.

Froala SDKs now support the latest versions of popular frameworks:

  • React SDK supports React 18.
  • Angular SDK supports Angular 19.
  • Django plugin works with Django 5.
  • WordPress plugin integrates with WordPress 6.

In addition to these framework updates, this release includes several bug fixes, with a particular focus on improving the content pasting experience. Furthermore, we’ve enhanced the integration with the Dompurify library, which helps sanitize HTML and strengthen security.

Let’s dive in and explore the key highlights.

Froala 4.4 release

SDK Updates: Embracing the Future

Froala SDKs help developers seamlessly integrate the Froala WYSIWYG Editor into their applications. With this release, we’ve ensured our SDKs work with the latest versions of popular frameworks. This empowers developers to leverage cutting-edge technologies and deliver exceptional user experiences.

React SDK

The React SDK now supports React 18, ensuring seamless integration with the recent advancements in the React ecosystem. This allows developers to benefit from new React 18 features such as:

  • Concurrent Rendering: React 18’s concurrent rendering allows for smoother and more responsive user interfaces by enabling non-blocking rendering.
  • Automatic Batching: This feature reduces the number of re-renders, improving performance and efficiency.
  • Suspense for Data Fetching: Enhanced support for Suspense allows for better handling of asynchronous data fetching, making your application more robust.
  • startTransition API: This API helps in marking updates as non-urgent, ensuring smoother transitions and better user experience.

As a developer, updating to the latest Froala React SDK is beneficial if you want to leverage the new features and improvements in React 18. This can enhance the performance and user experience of your application, making it more efficient and responsive.

To update your Froala React SDK, run the following command:

npm update froala-editor    

If new to Froala, follow the React SDK documentation to get started.

Angular SDK

The Angular SDK has been updated to work with Angular 19, providing developers with the tools to leverage the latest features and improvements in the Angular framework.

As a developer, updating to the latest SDK is generally recommended to take advantage of:

  • Improved Performance: Angular 19 includes performance enhancements that can make your applications run faster and more efficiently.
  • New Features: You’ll have access to the latest features and APIs introduced in Angular 19, which can help streamline development and improve functionality.
  • Better Compatibility: Ensures compatibility with other libraries and tools that are also updated to work with Angular 19.
  • Security Updates: Newer versions often include security patches that protect your application from vulnerabilities.

To update your Froala Angular SDK, run the following command:

npm update froala-editor --save

If new to Froala, follow the Angular SDK documentation to get started.

Django Framework Plugin

The Froala Django framework plugin has been updated to work seamlessly with the latest version of the popular Python web framework, Django 5.0. This update empowers developers building web applications with Django to integrate the Froala WYSIWYG Editor into their projects easily.

Django 5.0 introduces several new features and improvements, including:

  • Enhanced URL handling.
  • Improved database support.
  • Enhanced security features.

By updating the Froala Django plugin to work with Django 5.0, we’re enabling our developers to take advantage of these new features and improvements. This allows you to build more robust, secure, and feature-rich web applications with the Froala WYSIWYG Editor seamlessly integrated into your Django-powered projects.

To update your Froala Django plugin to the latest version, follow these steps:

  1. Open your project’s requirements.txt file (or equivalent dependency management file).
  2. Locate the line that specifies the Froala Django plugin version and update it to the latest version:
    froala-editor-django==4.4
    
  3. Save the requirements.txt file and run the following command in your terminal to update the dependencies:
    pip install -r requirements.txt
    

After completing these steps, your Froala Django plugin will be updated to the latest version, allowing you to leverage the new features and improvements introduced in Django 5.0. This will help you build even more powerful and efficient web applications with the Froala WYSIWYG Editor seamlessly integrated into your Django-based projects.

If you’re new to using the Froala Django plugin, be sure to check out the Froala Django documentation to get started.

WordPress Plugin

The Froala WordPress plugin has been updated to work seamlessly with the latest version of WordPress, WordPress 6, ensuring a smooth and reliable integration for our WordPress-based customers.

This update is especially important for Froala users who leverage the WordPress platform to power their websites and blogs. The Froala WordPress plugin empowers WordPress administrators to seamlessly integrate the Froala WYSIWYG Editor into their content creation workflows. With this plugin, admins can create posts and pages using the robust editing capabilities of the Froala Editor.

Beyond the admin experience, the Froala WordPress plugin also enables front-end integration. This allows your website’s users to leverage the Froala Editor when adding comments or submitting other user-generated content.

The plugin comes with a dedicated configuration page in the WordPress admin dashboard, making it easy for administrators to customize the editor’s settings to match their specific needs.

To update the Froala WordPress plugin to the latest version:

  1. Backup Your WordPress Site: Before making any changes, it’s always a good idea to create a full backup of your WordPress site. This will allow you to restore your site in case any issues arise during the update process.
  2. Download the Latest Plugin Version: Visit the Froala WordPress plugin GitHub repository and download the latest version of the plugin. You can either clone the repository or download the ZIP file containing the plugin files.
  3. Replace the Plugin Files: Log in to your WordPress admin dashboard and navigate to the “Plugins” section. Locate the existing Froala WYSIWYG Editor plugin and deactivate it. Then, delete the plugin folder from the wp-content/plugins/ directory of your WordPress installation.
  4. Install the Updated Plugin: Upload the new plugin files you downloaded in Step 2 to the wp-content/plugins/ directory, either by extracting the ZIP file or cloning the repository directly into the plugins folder.
  5. Activate the Updated Plugin: Once the new plugin files are in place, go back to the “Plugins” section in your WordPress admin dashboard and activate the Froala WYSIWYG Editor plugin.

If you encounter any issues during the update process or have questions about the new Froala WordPress plugin features, please don’t hesitate to reach out to our support team. We’re here to ensure seamless integration and help you make the most of the Froala WYSIWYG Editor within your WordPress-powered projects.

Improved Content Pasting: Enhancing the User Experience

Froala is renowned for its powerful pasting capabilities. However, in this release, we’ve made significant improvements to the content pasting functionality. We’ve addressed various issues and edge cases to ensure a smoother and more reliable pasting process.

One key improvement is the retention of the id property for table of contents (TOC) items when pasting content from Microsoft Word. This allows users to seamlessly scroll down to a specific section identified by the TOC item, preserving the intended navigation structure.

Additionally, Froala now supports the mso-list attribute from Office HTML. This helps maintain the proper hierarchy of complex multi-level lists after pasting them, ensuring the lists remain in order.

These improvements enhance the overall user experience, making it easier for users to paste content into the Froala Editor without losing formatting or structure.

Bug Fixes and Improvements

In this release, we’ve addressed various issues reported by our users to enhance the overall performance and stability of the Froala Editor. These improvements include:

  • Enhanced table header handling: We’ve ensured proper table structure and resolved issues where rows might not correctly align within the <thead> section. This improves the merging of table header cells.
  • Consistent underline color: We’ve made the underline color match the text color.
  • Restored full-page content: We’ve fixed the issue where the editor did not return the full-page content when the fontFamilyDefaultSelection option was used.
  • Cleaned text formatting: We’ve resolved the issue where the text format was not properly cleaned when setting the enter option to FroalaEditor.ENTER_BR.
  • Preserved cursor position: We’ve fixed the issue where the cursor position was lost when content was wrapped with html.wrap inside tables.
  • Improved link handling: We’ve resolved an issue where all formatting was removed when inserting a link containing special characters. The fix is to URL-encode the link, ensuring special characters are stored correctly.

Additionally, we’ve enhanced the integration with the DOMPurify library, a powerful HTML sanitization tool, to further strengthen the security and reliability of the Froala Editor. DOMPurify now respects the configurable options htmlAllowedAttrs, htmlAllowedTags, htmlAllowedEmptyTags, and not just the contenteditable property.

You can find the release notes on our website.

Embracing the Future of Content Creation

The Froala WYSIWYG Editor 4.4 release represents a significant step forward in our mission to empower developers and content creators with the tools they need to thrive in the ever-evolving digital landscape. By aligning our SDK updates with the latest versions of popular frameworks like React, Angular, and Django, we’re ensuring that our users can leverage the most cutting-edge technologies and seamlessly integrate Froala into their workflows.

Moreover, the bug fixes and security enhancements included in this release underscore our dedication to providing a reliable and secure content editing experience. By addressing the XSS vulnerability and improving the DOMPurify integration, we’re safeguarding our users’ content and protecting their digital assets from potential threats.

Unlocking New Possibilities

As we move forward, we remain committed to pushing the boundaries of what’s possible in the world of content creation and management.

Whether you’re a seasoned Froala user or new to our platform, we encourage you to explore the latest features and enhancements. Upgrade your Froala WYSIWYG Editor to version 4.4 and unlock a world of new possibilities for your content creation and management needs.

If you have any questions or feedback, our dedicated support team is always here to assist you. We value your input and look forward to continuing our collaboration as we shape the future of content creation together.

Try The Latest Froala Editor

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

Change Log

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

Get Started

Following our get started guide, you can download and start using Froala in less than five minutes.

Change Log

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

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.

Posted on January 9, 2025

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *