Introducing Froala 4.5.2: Now with Find & Replace, Enhanced Colors, and More

Froala 4.5.2 is now available, introducing the long-awaited Find & Replace plugin (beta), expanded alpha color support, and a series of critical usability fixes. This update enhances editing flexibility while preparing the foundation for future stable features.
Dive into what’s new, test the beta plugin, and help shape the next release by sharing your feedback.

Spotlight on the New Find and Replace Plugin

 The highlight of version 4.5.2 is the new Find and Replace plugin. Please note: This feature is currently in beta and disabled by default, giving you the opportunity to test it and provide feedback before its stable release, targeted for our next update by the end of June.

When enabled, this plugin introduces a range of capabilities that our users have been eagerly awaiting:

• Search Functionality: Users can now search for specific text or words within the editor and see the total number of occurrences, even in styled text like bold or italic.
• Replace Options: The plugin provides the ability to replace a specific occurrence or all occurrences of the searched text with new replacement text.
• Highlighted Matches: Each instance of the searched text is highlighted, making it easy for users to identify and navigate the matches.
• Advanced Search: Users can enable options to match case or restrict the search to whole words only.
• Draggable Popup: The search and replace interface is presented in a fully draggable popup, allowing users to position it wherever is most convenient.
• Keyboard Shortcuts: Opening the search popup can be performed using customizable keyboard shortcuts. Default is (CTRL + F).
• Undo Functionality: Users can easily revert any changes made through the Find and Replace plugin by using the undo feature or the (Ctrl + Z) shortcut.
• Intuitive Design: The plugin features an intuitive and user-friendly interface, making it accessible for both novice and advanced users.

Developers can further customize the Find and Replace behavior using its dedicated options, events, and methods.

To enable the plugin, its resource file must be loaded separately in each application where it’s needed. The method for loading it depends on the type of application you’re working with. Here are a few examples:

1.  For Web Applications (using a <script> tag):
   <script src="froala-editor/js/plugins/find_and_replace.min.js"></script>
2. For JavaScript Modules (using import):
   import 'froala-editor/js/plugins/find_and_replace.min.js';
3. For Node.js/CommonJS (using require):
   require('froala-editor/js/plugins/find_and_replace.min.js');

Ensure that the plugin file is included and loaded correctly in the application’s runtime environment for the plugin functionality to be available.

Here is an example of Froala with find and replace plugin enabled

Alpha Color Support

One of the notable improvements in this Froala 4.5.2 release is the enhanced support for alpha colors (RGBA) in text coloring. This ensures that users can now properly apply transparency to the text within the editor.

For example, let’s say you want to apply a semi-transparent blue color to a section of text. Developers can now add the RGBA color value rgba(0, 0, 255, 0.5) or the Hex color value #0000ff80 to the colorsText array. This enables users to select the desired color from the text color popup in the editor. The text will then be displayed with the specified level of transparency, allowing the background to partially show through.

new FroalaEditor('div#froala-editor', {

    colorsText: [   

    'rgba(255, 220, 59, 0.7)', 'rgba(255, 220, 59, 0.5)',

    '#ffdc3bb3','#ff1e001a','#ff1e0040','#ff1e0059','#ff1e0080','#ff1e00a6',

    '#ff960026','#ff96004d','#ff960066','#ff96008c','#ff9600bf',

    '#ffdc3b26','#ffdc3b40','#ffdc3b66','#ffdc3b80','#ffdc3bb3',

    'REMOVE'

],

});

This improvement in alpha color support empowers users to create more visually striking and nuanced content within the Froala editor. Whether you’re designing eye-catching headings, highlighting important information, or creating subtle textual effects, the enhanced color capabilities give you greater creative control and flexibility.

Other Improvements and Bug Fixes

While the Find and Replace plugin is the highlight of this release, we’ve also addressed several other issues and made various improvements to the Froala editor:

• Increase Indent button and keyboard shortcut functions Synchronization: Fixed an issue where the Increase Indent button and keyboard shortcut were not correctly synchronized, leading to inconsistent behavior.
• Handling URLs with Hyphens: When pasting a URL that ends with a hyphen (e.g., https://example.com/-) into the Froala Editor as plain text (Ctrl + Shift + V), the editor incorrectly removed the hyphen from the hyperlink, resulting in a broken or incorrect link.
  Now, the full URL, including the trailing hyphen, is preserved when pasted as plain text.
• Table Formatting Consistency: Addressed inconsistent behavior with selection and clear formatting for tables, ensuring a uniform experience regardless of the presence of text after the table.
• Ordered List Button Error: Fixed an error that occurred when clicking the Ordered List button, which previously threw a “querySelectorAll is not a function” error.
• Shadow DOM Compatibility:
  Fixed an issue where tooltips were rendering outside the Shadow DOM scope, causing styles not to apply correctly.
  Moreover, resolved an issue where inputs were not editable when working inside a shadow DOM, making the editor more versatile in various environments.
• Fixed console errors appeared after clicking the Ordered List button while htmlUntouched is true.
• Addressed a problem where the image resize box would expand to full width when a caption was added with htmlUntouched: true, avoiding unexpected layout shifts.

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.