Introducing Froala V4.0.6—The Most Powerful WYSIWYG HTML Editor

Froala is back with some big news! 🎉

The all-new Froala Editor V4.0.6  has arrived, bringing the most performant version of our market-leading WYSIWYG editor to our global developer community.

Because of you, Froala has become the most Powerful HTML Editor! The feedback loop you maintain with our team enables us to turn around quality releases packed with the features and enhancements you require in ever-shorter release cycles. Your suggestions were given top priority in the development of this best-ever version of Froala’s Powerful HTML Editor.

If you’re using Froala in your development, we’re positive you’re going to love V4.0.6. There’s a lot to unpack with this new version—read on to see the amazing things you can do with Froala’s latest user-centric release!

How Version 4.0.6 Empowers Users

1. Plugins:

In Froala editor version 4.0.6 latest release, our developers fixed nineteen issues, all focused on stability and performance. That includes numerous improvements for the core editor, as well as for the following plugins:

• Colors plugin
• File plugin
• Font family plugin
• Font size plugin
• Image plugin
• Link plugin
• Lists plugin
• Table plugin
• Video plugin

If you are loading plugins individually from a CDN on your code, make sure you updated these plugins to the last version. For example, for the colors plugin:

<!-- Colors plugin script -->
https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/colors.min.js
<!-- Colors plugin stylesheet -->
https://cdn.jsdelivr.net/npm/[email protected]/css/plugins/colors.min.css

Find the Javascript and stylesheet links for each plugin by selecting the plugin name from our plugins page.

If you are using the following editor packaged links for your site, all plugins will be included:

<!-- Froala editor script -->
https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js
<!-- Froala editor stylesheet -->
https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css

2. Deep-Dive of Froala Editor V4.0.6  

The release of the Froala Editor V4.0.6  was a huge breakthrough. Let’s take a closer look at some of the main improvements in the Froala editor V4.0.6 release.

      (i). Issues related to the editor API

The Froala WYSIWYG HTML editor came with a powerful JavaScript API that allows developers to easily customize and interact with the editor through its different options, methods, and events.

           a). Enter option:

For example, you can change the HTML output produced when the user hits the Enter key just by setting the “enter” option of your editor:

// CODE EXAMPLE
new FroalaEditor('.selector', { enter: FroalaEditor.ENTER_BR });

The default value for the “enter” option is FroalaEditor.ENTER_P, which will wrap the new text within the HTML <p> tag.

But if you set it to FroalaEditor.ENTER_DIV, the editor will wrap the new text within the HTML <div> tag.

And if you set it to FroalaEditor.ENTER_BR, which is the third and final value for this option, the editor will insert only the <br> HTML tag when the Enter key is clicked.

This is a powerful feature that allows you to customize the editor’s HTML output based on your application, but it wasn’t working as expected in some cases when it was set to ENTER_DIV or ENTER_BR. This affected the HTML output when the html.getSelected() method is used, so our developers fixed this issue and tested it to make sure it always returns the expected HTML output.

Try it now.

            b). Paste from Notepad

Two powerful API options are:

pastePlain, which if enabled, removes the text formatting of the content pasted into the rich text editor but keeps the content’s structure.

And htmlUntouched, which if enabled, applies no special processing to the HTML inside the editor except HTML cleaning.

Enabling both options was causing an issue related to the font size of the content pasted from a notepad, but this also has been fixed.

// CODE EXAMPLE 
new FroalaEditor('.selector', { 
   pastePlain: true,
   htmlUntouched: true,
});

            c). MIME type 

Froala File Options API controls how and what files users can upload through the editor.

One of these options is fileAllowedTypes, which is an array of file types that are allowed to be uploaded.

Some users had an issue when uploading .msg files even after configuring the correct MIME type. This has now been fixed.

// CODE EXAMPLE 
new FroalaEditor('.selector', {
 fileAllowedTypes: ['application/msg', 'application/msword']
});

      (ii). Issues related to the Video feature

Inserting videos in your content is a popular feature nowadays since users prefer to watch videos over reading articles. Froala makes this very easy for you and allows you to control the default width, alignment, display mode, maximum size, whether it is draggable and much more.

When you try to insert a new video in the Froala editor, the video popup has an autoplay option. This wasn’t working with YouTube videos, but our developers fixed this issue.

Try it here

3. What Else is New in V4?

In case you missed the original release, V4 ushered in the next generation of WYSIWYG Editing by introducing some of our user’s most highly-requested features. When you upgrade to V4, you get access to:

Track Changes

This feature allows users to keep track of all the changes they make inside the editor. Edits to text, images, tables, styles, formatting, and more will be tracked followed by accepting and rejecting the changes accordingly through easy access to “Accept or Reject” a “Single or All” changes via accessible buttons in the toolbar.

Markdown Support

Format words & phrases in our rich text editor using code shortcuts through predefined markdown syntax.

Users can markdown Heading, Bold Text, Italic, Blockquote, Ordered list, Unordered list, Code, Fenced code block, Horizontal rule, Link, Image, Table, Footnote, Strikethrough and Task list.

4. Why Should I Upgrade to V4?

• Upgrading Froala is super easy and takes less than five minutes, read about it in the next section.
• Upgrading Froala will not break your products; most of the editor’s functionality is covered by unit tests.
• 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.
• Get benefit of the Track changes and Markdown features which were highly requested by our users.
• Get the latest editor fixes and improvements.

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

5. How Do I Upgrade to V4?

Upgrading Froala is super easy. It is just a matter of four steps or less to upgrade from version 3 to version 4:

• Download the new version.
• Include version 4 scripts.
• Add new plugins, if you are customizing enabled plugins.
• Add new toolbar buttons, if you are customizing the editor toolbar.

For the full instructions, follow this simple guide which describes each of the above points in detail to upgrade your editor to V4 in less than five minutes.

6. Technical Support

We strive for the highest quality with each of our updates—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.

Let us know what you think about our latest release! Join us and our Product Managers in our Github Community to talk about all things Froala.