Froala is back with some big news!

Froala is excited to announce the release of its eighth major product version in the last six months!

Version 4.0.8 comes with a few new quality improvements that are going to make your life easier. We’ve also made improvements for multiple editor instances and delivered a few quality enhancements to provide you with a more satisfying user experience. To learn more about Froala HTML Editor updates, features, API basics, framework plugins, server integrations, and examples, you may visit the WYSIWYG Quick Start Guides.

A Deep Dive into the New Froala Editor V4.0.8

In the 4.0.8 release, we’ve made fixes that address some of the major issues reported with `toolbarInline` and `toolbarContainer` while multiple instances of the editor are being controlled using a single toolbar.

We highly recommend updating your Froala Editor as soon as possible to take advantage of all the new improvements and fixes.

Since there are no breaking changes in this version, if you are using version 4, all you have to do is install the new version from the download page and replace the old files in your product folder. 

But if you are on v2 or v3, you will have to follow one of these migration guides to get step-by-step upgrade instructions.

Let’s take a look at what you can expect with Froala Editor V4.0.8

1. Multiple editor instances improvements

The Froala WYSIWYG editor makes it easy to initialize multiple editors on the same page. All you have to do is initialize the editor on each element using its unique ID if you want each to have a separate configuration.

  <!-- HTML -->  
    <dev id="editor1"></dev>
    <dev id="editor2"></dev>
 
    <!-- JS Code -->  
    <script src="../froala_editor.pkgd.js"></script>
    <script>
        const editor1 = new FroalaEditor('div#editor1', {
                            iframe: true
                        });
        const editor2 = new FroalaEditor('div#editor2', {
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|', 'undo', 'redo','trackChanges','markdown'];
                        });                        
    </script>

Alternatively, you could use the element’s class name in case all the editors will have the same configuration:

    <!-- HTML -->  
    <dev id="editor1" class="froala-editor"></dev>
    <dev id="editor2" class="froala-editor"></dev>
 
    <!-- JS Code -->  
    <script src="../froala_editor.pkgd.js"></script>
    <script>
        new FroalaEditor('.froala-editor', {
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|', 'undo', 'redo','trackChanges','markdown'];
            });                        
    </script>

In another common case, some users want to have multiple editors that are controlled from a single toolbar. While this sounds complicated, it is actually quite simple. All you have to do is to set the `toolbarContainer` option like this:

    <!-- HTML -->  
    <dev id="toolbar-container"></dev>
    <dev id="editor1" class="froala-editor"></dev>
    <dev id="editor2" class="froala-editor"></dev>
 
    <!-- JS Code -->  
    <script src="../froala_editor.pkgd.js"></script>
    <script>
        new FroalaEditor('.froala-editor', {
            toolbarContainer: "#toolbar-container",
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|', 'undo', 'redo','trackChanges','markdown'];
            });                        
    </script>

a) How does the Track Changes feature work in the multiple editors mode?

The Track Changes feature is another version 4 feature that was highly requested by our community. With Track Changes, you can test how the content will look if you edit it in a certain way, and then you can accept the changes you like and discard the ones that don’t look good.

With Track Changes, users can track all the changes made to their text, images, tables, styles, formatting, and more. Try the Track Changes feature now.

In the multiple editors mode, the Track Changes feature enables users to track changes on each editor separately. In previous versions, Track Changes would not work while a common toolbar was used, but in version 4.0.8 it will work independently! 

b) Multiple editors with inline toolbar:

In the Inline Toolbars mode, editor toolbars are hidden by default and appear only on the content selection or, if toolbarVisibleWithoutSelection option is set to true, the toolbar will appear when you click in the editing area. This enables users to see exactly how their content will look without the editor toolbar in the way.

Check this example for two editor instances with an inline toolbar.

In previous versions, some users reported that the cursor jumps unexpectedly between instances when using multiple editors with `toolbarInline` and `toolbarVisibleWithoutSelection` and this has been fixed on this release. Also, a full-screen view feature is now working with `inlineToolbar` mode, which will give users a better editing experience. 

2. Amazing feature

One of the amazing features of the Froala WYSIWYG editor is the ability to initialize it on different elements, and in each one of these initialization modes Froala Editor does a different task.

When Froala Editor is initialized on an image, it opens the image popup menu once that image is clicked, enabling users to replace, edit, and add a link to that image.  Since the image popup menu has many useful features, you can benefit from it in different use cases depending on your project type.

In the previous version, 4.0.7, some users reported that they got “Uncaught TypeError: Cannot read property ‘split’ of null” while enabling editing on the image. Our developers fixed this issue on this release.

3. More improvements you will find in version 4.0.8

• Fixed TrackChanges to work with ‘toolbarContainer’ option
• Fixed full-screen view to work with ‘inlineToolbar’ mode
• Fixed selection/cursor position for text styling to work when ‘htmlUntouched’ is enabled
• Fixed high-level security vulnerability independent packages for Node
• Fix to extend reported textfield CSS selector for input type=”number”
• Fixed Uncaught TypeError: Cannot read property ‘split’ of null while enabling editor on image
• Fixed issue of toggling between list items causing paragraph elements to be removed when multiple paragraph items are wrapped inside a ‘DIV’ tag
• Fixed to handle paste and match style option in Safari browser
• Fixed issue of the cursor jumping unexpectedly when using multiple editors with ‘toolbarInline’ and ‘toolbarVisibleWithoutSelection’

For a complete list of improvements and updates, please check our changelog page.

4. Get Froala v4.0.8

How Do I Upgrade to v4.0.8?

If you are loading Froala using the following CDN links:

<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>

Update your Froala Editor if you are already using version 4.0.8, but if you are hosting it on your server, download this new version now.

If you are on a version earlier than version 4, these migration guides will help you to upgrade your Froala Editor.

Love the new features of Froala Editor v4? Upgrade now!

1. Upgrading Froala is simple and takes less 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 will be able to use the last version of Froala that was available for a lifetime, so 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.
6. Read this blog post for more details about why you should upgrade to v4. 

Final Notes

We would like to thank all the Froala users who have used the Froala Editor and shared their feedback with us. We would not be where we are today without your support!

The bottom line is that Froala is the most powerful editor on the market. It’s great for novices who want to start using the WYSIWYG functionality in their apps since it requires minimal coding expertise. On the other hand, more advanced users will also find what they need in its feature set as it is completely extensible. 

Every day, Froala Editor makes the web a little more beautiful.

The release of Froala Editor v4.0.8 sets the stage for spectacular feature improvements. Jonathan Denney, cofounder and CTO of ConvertFlow, said, “Your tool has helped over a thousand companies launch on-site promotions using ConvertFlow since we implemented it last summer. Thanks!” This release is another step toward this vision.

We wish you a happy holiday season and an amazing 2022 ahead!

Technical Questions

If you have a technical question, you can check to see if it has already been answered at our help center. If not, contact our Support team. 

Community

We’d love to hear what you think of the latest release! Join us in our community on GitHub Community to chat with product managers, developers, and other members of the Froala team.