Froala Editor V4.0.10 — Improved Toolbar, Pop-up Positioning, and Much More!

✨ What’s Improved 🚀

1- Improvements to the Toolbar:

First, why do users love the Froala toolbar?

The Froala smart toolbar allows you to keep a vast range of features without overwhelming the user with hundreds of buttons giving your users a better UX.

You still have the choice to switch back to the classic toolbar by simply setting the toolbarButtons API option to an array with button names that need to be displayed.

Froala has the most responsive WYSIWYG HTML Editor toolbar since you can display different buttons based on the screen size by setting the toolbarButtonsMD,  toolbarButtonsSM, and toolbarButtonsXS API options.

Moreover, you can set where to display the Editor toolbar:

1. Top (default)
2. Bottom (By setting toolbarBottom API option to true )
3. Sticky (By setting toolbarSticky API option to true )
4. Inline (By setting toolbarInline API option to true )

Then, What’s improved in the Editor Toolbar?

1. The inline toolbar width:

The inline toolbar is a floating toolbar that becomes visible when you select a text inside the editor, or when the editor is focused (e.g. by clicking it) if the toolbarVisibleWithoutSelection API option is enabled. As a result, the editor can be used to edit the content that looks just like the final page.

In the previous version, the toolbar always takes the full width of the editable content. Now, the inline toolbar width will be related to the buttons it contains.

Before	Now

This improvement has a great impact on the user experience and increases productivity since all buttons are available closer to users’ clicks.

2. Sticky bottom toolbar improvements:

When you set the toolbarBottom API option to true, the editor toolbar is displayed at the bottom of the editor but it becomes hidden when you add a lot of content and scroll to the top. If you set the toolbarSticky API option to true also, in the previous release, the toolbar will remain visible on the bottom instead of becoming hidden while you scroll up through the content. However, any new content you add at the bottom will be hidden behind the toolbar until you scroll down.

In this release, the toolbar will no longer hide the new content you are adding so that you will always have full visibility within the editor.

 

Before

Now

2-  Improvements to Image Pop-up Position:

When you click on an image inside the editor a pop-up is displayed to allow you to:

• Replace the image.
• Edit the width and height of the image.
• Edit the image display.
• Edit the image alignment.
• Edit the image ALT attribute (alternative text).
• Add or edit image caption.
• Remove the image.
• Insert or edit image link.
• Add a predefined style to the image.

If you include the TUI Scripts and the TUI Froala Plugin script

<!-- Include Froala TUI plugin JS -->

<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/image_tui.min.js"></script>

The Froala image pop-up will also have a button to open the TUI editor that allows you to do advanced editings like cropping, flipping, rotating images, and much more.

The Froala API allows you to determine which buttons to display on the image pop-up through the imageEditButtons option. The Froala image API is very powerful to the extent that it allows the use of the Froala Editor as a standalone Javascript image uploading library.

All of these powerful features make the Froala image API even more functional, without annoying side effects like image pop-ups at locations far from where the image was originally placed. This side effect was resolved in the latest release of the Froala image API, so make sure to upgrade and enjoy this new perfect image accuracy feature!

3- Improvements to Table-Paragraph Formatting:

You might have previously tried to remove a paragraph before or after a table but it didn’t get removed. Now it will work seamlessly using the delete and backspace buttons.

… and much more!

• Improvements to multiple videos uploading
• Improvements to Firefox support.
• Plus seven more tweaks and fixes!

Little things can make a big difference — even seemingly small changes can save your whole team some precious time. In this blog post, we highlighted the latest Froala WYSIWYG HTML Editor improvements and updates that make our own customers joyful.

Get Froala V4.0.10

We highly recommend updating your Froala Editor to the latest version as soon as possible. That way you can take advantage of all the new improvements and fixes.

How Do I Upgrade to V4.0.10?

It’s super easy and requires only two steps or less:

For Froala Editor Version 3 and Version 4 Users

• If you‘re hosting Froala files locally:
  1. Download the new files

  There are many ways to download the new files, the easiest way is the NPM. simply copy/paste the below command into your terminal

  npm install froala-editor

  For other download options, go to our get started page and select your preferred download method from the step one dropdown menu.

  2. Replace the old files:

  If you have downloaded the files in an external location, copy and paste them into your project files.

You don’t have to do anything if you’re using the CDN link that contains @latest because you are already using the latest version.

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

If you are using the CDN links that contain the Froala version number, edit it to be 4.0.10 as follows

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step upgrade instructions.

Love the new features of Froala WYSIWYG HTML Editor V4? Upgrade now!

1. Upgrading Froala is simple and takes fewer than five minutes.
2. Upgrading Froala will not break your products. The Editor’s functionality is extensively tested.
3. If you are on an active perpetual plan, once it ends you can use the last version of Froala that you upgraded to for a lifetime. That is why it is better to always update to the latest version.
4. Benefit from the Track Changes and Markdown features, two of the most popular additions to Froala Editor that were highly requested by our users.
5. Get the latest Editor fixes and improvements.

Read this blog post for more details about why you should upgrade to V4.