Froala Editor 4.0.16 Released: Quality and Stability Improvements

Today, we are excited to introduce Froala’s 4.0.16 release. It is another release built around you with a focus on quality enhancements, stability improvements, and fixes for customer-reported issues. Because you keep in touch with our team, we can quickly put out quality releases that focus on your needs.

Since version 3.0.1, there have been a lot of improvements, new features, and security enhancements added to the Froala editor without 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. To help you update your editor as smoothly as possible, we’ve added a detailed section at the end of the post.

A Deep Dive into the New Froala Editor V4.0.16

The Froala v4.0.16 release includes improvements and fixes to the styling and formatting of list items, the placement of popups, problems with scrolling in the editor viewport, and a lot more!

Improved pasting content feature 

We know how disappointing it is when you try to paste some content into your WYSIWYG editor, only for the content to look different. We know some of you experience a few issues when pasting hyperlinks and images into Safari. So, we’ve improved this feature in our latest release. You can solve pasting issues by updating your editor to the latest version. Additionally, there are no longer any extra leading or trailing spaces when you paste text from a clipboard.

Improved List feature 

Adding ordered and unordered lists is a basic feature for any WYSIWYG editor. Froala’s List plugins allow users to not just insert basic lists like numbers and bullets but also advanced types such as lower greek or upper roman. You can enable or disable inserting advanced list types through the listAdvancedTypes API option.

There were several issues with lists that have been resolved in this release:

• Inserting an image inside a list then setting it to display inline and aligning it to the left results in overlapping the list with the image.
• Toggling the list button on an empty field creates extra list items.
• The images or URLs which are inserted are not in line with the number formatting. They move upwards out of the format.

Improved Language support 

The Froala WYSIWYG editor supports 38 languages. By default, it uses the English (United States) language, but you can easily change this using the language API option. Make sure you have the language file in the /langs folder. For example, if you want to set your editor language to Estonian, your script should be like

<!-- Include the language file. -->

<script src='../langs/es.js'></script>

<script>

  $(function() {

    $('div#froala-editor').froalaEditor({

      // Set the language code.

      language: 'es'

    })

  });

</script>

In the latest release, we added some missing translations for Dutch(nl), Japanese (ja), and some other languages.

Fixed the issue where the zIndex option is ignored for popups after exiting fullscreen mode

One of the powerful options of the Froala editor is the ability to customize the z-index value for the popups and toolbars. This is helpful when the editor and your application’s parts do the same in fullscreen mode. Update now to solve this issue.

Editor viewport jumps when pressing the ENTER key after enabling iframe and heightMax options

The Froala editor provides you with amazing features. For instance, you can load your editor in Iframe. This isolates your editor’s contents from the rest of the page. For example, elements inside the editor will not be affected by other styles you are using on your webpage. To enable this feature, set the iframe API option to “true”

new FroalaEditor('.selector', {

  iframe: true

});

Another option that the Froala editor provides is the heightMax API option, which allows you to set a maximum height for the rich text editor’s editing box. We noticed that using those two features together leads to an issue when you try to add a new line using the ENTER key. This issue has been resolved, and you can now use these options together safely.

… and much more!

Several bugs were fixed with this release in a constant effort to make the user experience even better.

• Fixed the issue where embedded Google Documents are deleted when deleting text in the next row.
• Fixed the issue where a pop-up drop-down menu becomes hidden when trying to scroll over its contents using the mouse.

Please find the complete changelog list here.

Get Froala V4.0.16

How Do I Upgrade to V4.0.16?

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.

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.

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 better for everyone.