New Release: Froala Editor 4.0.12

Froala Editor V4.0.12

Froala WYSIWYG Editor is Back With Some Big News!

Froala WYSIWYG Editor Version 4.0.12

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.

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.

Method Hosting Type How to download Include in your project
CDN Web
<!-- 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>
CDN (Always the latest version)
<!-- 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 Locally
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
bower install froala-wysiwyg-editor
NO Package Manager Download Froala WYSIWYG Editor files using the download form here.
Integrated with a Framework Select your preferred framework from 17 different popular frameworks like React, Angular, and Vue.
Other options Check here for other options to use Froala WYSIWYG Editor in your project.

For Froala Editor Version 2 Users:

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

 

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

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

 

What’s next?

Development continues to make Froala a safe, secure, and feature-rich WYSIWYG editor. More changes and improvements are coming up in the next release! Stay tuned and subscribe to our newsletter to be the first to know about the updates!

Posted on June 9, 2022

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *