Froala Editor 4.0.17 Released: Improving Convenience and User Experience

Froala always brings more stability and quality improvements with each new release. Our goal is to keep delivering the best WYSIWYG editing experience at affordable prices to our customers. Our success formula is:

Top quality editor + transparent pricing plans without hidden costs + all features included = the best value for the cost WYSIWYG editor (Froala)  

The Froala team is excited to announce the release of Froala Editor 4.0.17. It is another release built around you that comes with many fixes for customer-reported issues.

What’s New in Froala Editor V4.0.17

The Froala v4.0.17 release includes improvements and fixes to content pasting and formatting, iOS device support, images, and a lot more!

Typing a comma after pasting a link now breaks the link editing

When pasting a URL into the Froala WYSIWYG editor, typing directly after it without adding a space will cause the user’s text to be part of the link. This enhances productivity as it allows users to quickly edit the URL without having to open the edit link popup. As URLs typically do not include commas, Froala will henceforth break the link if a comma is typed immediately after it.

The “Clear Formatting” tool now removes inline styles from pasted content

One of the features that Froala provides is the ability to clear the formatting that you applied to a text with a single button click. Before this release, the “Clear Formatting” tool didn’t remove the inline styles of the content pasted on the editor, especially when pasting in content from Microsoft Word. Now, this tool can get rid of any unwanted inline styles of the pasted content, too.

PRO TIP:

If you want Froala to automatically remove text formatting but keep content structure when pasting content into the editor, turn on the paste plain feature.

new FroalaEditor('.selector', {

pastePlain: true

});

Improved “keep format on delete” feature 

Whenever you type inside the Froala WYSIWYG editor, the last text format you applied remains in effect for any new text you type. For example, if you start typing in normal font weight and then apply bold formatting to one of the words, all words after that will automatically be in bold. However, if you delete the bolded text and continue typing in the non-bolded format, your text will remain in the non-bolded format unless you have the “keep format on delete” feature enabled.

new FroalaEditor('.selector', {

keepFormatOnDelete: true

});

This feature preserves the formatting of deleted text and applies it to the replacement text. It is useful for keeping the correct format of text when replacing content.

The buttons for inserting lists are now disabled when an image is selected

When you click on an image inside the Froala editor, the image edit popup appears, and the toolbar buttons are disabled to prevent users from executing a command before closing the image edit popup. Before the latest release, the ordered and unordered list buttons on the main toolbar were not disabled whenever an image was selected. This is now fixed, and the OL/UL button will be grayed out when an image is focused.

Although not recommended, you can enable the editor toolbar buttons while an image is selected by calling the “toolbar.enable” Froala API method. To ensure the toolbar buttons are enabled each time the image edit popup is shown, assign an event handler for the “popups.show.image.edit” event to call the “toolbar.enable” method.

var editor = new FroalaEditor('#editor', {
  events: {
    popups.show.image.edit' : function(){
      // this is the editor instance.
      this.toolbar.enable();
    }
  }
});

… and much more!

In this release, several bugs were fixed as part of an ongoing effort to make the user experience better.

• Ensure that the image resize feature functions properly when the editor is initialized with its CSS position property set to “absolute”.
• Froala no longer has any problems concerning the addition or removal of HTML <br> tags in empty paragraphs.
• Resolved the problem of backspace not functioning on iOS devices.
• Fixed the issue where the cursor moves when toggling between formatting.

All these improvements come together to make an already powerful WYSIWYG editor even better. Please find the complete changelog list here.

Get Froala V4.0.17

Since version 3.0.1, we’ve made a lot of improvements, added new features, and enhanced the security of the Froala editor without making any breaking changes. This means that if you haven’t updated Froala in a while, you are missing out on a lot. Plus, like in every Froala release, you don’t have to worry about your product breaking after updating the editor. If you update your editor today, which will take less than 5 minutes, you will enjoy a better editing experience that we think you’ll adore. In the unlikely event that something unexpected occurs, you can easily undo changes in under 5 minutes.

Updating your editor could also resolve some issues that you or your users might have had before. Don’t hesitate to update your editor today.

How Do I Upgrade to V4.0.17?

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.

<!-- 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 to get step-by-step instructions on how to upgrade from version 2.

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.

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.

You’re helping us build a better editor

Thank you for using Froala. With your support, we’re working to make WYSIWYG editing more enjoyable, accessible, and beneficial for everyone.