New Release: Froala Editor 4.0.12

Froala WYSIWYG Editor is Back With Some Big News!

We’re committed to producing a high-quality WYSIWYG editor and today we’re pleased to announce the 12th release of Froala Version 4. We’d like to extend a special thank you to all of the Froala community members, users, and clients. Your valuable feedback helps our team to turn around quality releases every 30 – 45 days with an emphasis on your needs.

Froala 4.0.12 supports:

• Rendering the Editor inside the HTML5 dialog element
• Keeping email/URL hyperlinks while doing plain text
• More improvements and bug fixes.

Take advantage of all the new improvements by updating your Froala Editor to the latest version now. Updating Froala Editor is super easy, it takes two steps or less and it takes less than five minutes. We have a dedicated section in this article on how to update your Editor. Please find it below.

Check Out Froala 4.0.12 and Find Out What Was Improved

1- Added support to the HTML5 <dialog> element:

HTML5 introduced the <dialog> tag to allow coders to easily create a new popup dialog box or another interactive component, such as a dismissable alert, inspector, or subwindow on a web page. The <dialog> tag can be used to display different types of forms such as a contact form and in this case, there is a high possibility that you need to enable users to create rich text content. That’s where Froala Editor can give you a handy solution to enhance your forms.

In the previous releases, The Editor popups and tooltips were displayed behind the <dialog> element even after increasing the index of the editor popups.

By adding support to the <dialog> element, Froala Editor popups and tooltips will display correctly inside the <dialog> element. Just make sure to set the scrollableContainer option to the id of the <dialog> element and let your users enjoy the amazing rich-text editing experience as good as when Froala is used inside any other HTML element.

2- keeping hyperlinks while pasting without format:

Froala 4.0.12 brings improvements to the content plain pasted in the Editor. As you might know that there are two keyboard shortcuts to paste the content:

• Ctrl+V  (Cmd+V on Mac). which keeps the styling from a rich format document like a Google Doc, Word file, or even Apple Notes while pasting it in the editor.
• Ctrl+Shift+V (Cmd+Shift+V on Mac). which strips all formatting from the original copied text. And we call this plain paste.

In the previous Froala releases, if you try to plain paste a hyperlink to an email address or a URL into the editor, it will be pasted without the hyperlink. In this release, the hyperlink will not be removed while you plain paste a text.

Other improvements and bug fixes

Several bugs were removed with this release in a constant effort to make the user experience even better. Some of these include:

• When Froala initializes inside a table cell, selecting content of the tables created inside the Editor is working correctly now.
• We have fixed that when trying to dynamically get the Editor HTML in JavaScript, the returned HTML contains a wrong border style of <td> elements.
• Removing the border style from images that have a caption will now be removed properly.
• Inserting a link without selecting a text inside the editor is no longer inserted in the wrong position.
• Clicking on backspace is now working properly while the ‘enter’ option is set to FroalaEditor.ENTER_BR

Please find the complete changelog list here.

Get Froala V4.0.12

How Do I Upgrade to V4.0.12?

Super easy! Follow the steps below to update to the latest version.

For Froala Editor Version 3 and Version 4 Users

The following table contains information about popular methods for downloading the latest Froala Editor release and how to include it in your project. Check the row that contains 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 upgrade instructions.