Froala 4.1.2 release – Typescript Support Enhancements

A new Froala Editor release is here, packed with exciting TypeScript support enhancements. Say hello to Froala 4.1.2. This new version has a lot of improvements to quality and stability, as well as fixes for our customers’ reported issues. Stay connected with our team to ensure swift, high-quality releases tailored to your needs.

Besides updating the index.d.ts file, this release includes:

  • Improved link paste function.
  • Enable font size adjustments for non-editable content.
  • And More..

Update your editor now to enjoy a better editing experience. To help you update your editor as smoothly as possible, we’ve added a detailed section at the end of the post.

A Deep Dive Into The New Froala Editor V4.1.2

Froala new release

Complete missing type definitions.

We have introduced Typescript support in the 4.1 release. For developers who prefer using TypeScript during web development. This significantly enhances their workflow and productivity. TypeScript offers strict type checking, improved error detection, and enhanced tooling, which not only makes code maintenance easier but also provides developers with better code suggestions and auto-completion.

In the 4.1.1 release, we have addressed major gaps in our type definitions, making it much better.

With this latest Froala Editor release, we have updated the index.d.ts file to include the missing method definitions, resulting in a smoother and more efficient development experience. Get ready to amplify your TypeScript capabilities as you dive into this incredible update!

Examples of methods that have been fixed are as follows:

And you should no longer see the following errors:

  • Property 'el' does not exist on type 'FroalaEditor'.
  • Argument of type 'Partial<RegisterCommandParameters>' is not assignable to parameter of type 'FroalaEditor'.
  • Property '$box' does not exist on type 'FroalaEditor'.
  • Property '$wp' does not exist on type 'FroalaEditor'.

The Froala’s link plugin is one of the most used features in text editing. It not only lets you conveniently insert and edit hyperlinks within the Froala Editor but also it is used to insert a predefined style to your links.

But the superiority of Froala’s link plugin doesn’t end here; it also enables creating a set of predetermined links, which users can choose from when adding or editing a link.

This plugin comes with a powerful API options, for example, you can:

  • Specify if the links should always be open in a new tab.
  • Specify that the rel="nofollow" attribute should be added on all links
  • Let the editor convert the inserted email addresses to mailto: links.
  • Disables adding the noopener attribute when a link opens in a new tab
  • Disables adding the noreferrer attribute when a link opens in a new tab.
  • Sets the default URL prefix.
  • Specify the attributes that could be customized for a link.

Click on the link to see all the Froala’s link options.

The plugin also provides powerful API methods and events such as triggering an event when a bad link is typed for insertion into the Froala Rich Text Editor.

In this release, we improved the link-pasting function and fixed the link plugin’s stopped-working issue when using V4.1 in Iframe mode.

When using the Froala WYSIWYG editor, a handy trick to enhance productivity is to paste a URL directly into the editor, and immediately start typing right after the pasted URL without adding a space, your text will automatically become part of the link. This feature saves you time and effort by eliminating the need to open the edit link popup. Moreover, the latest update has made this even more user-friendly as it now even works if you type a comma after pasting the link.

This release also cleans the pasted link encoding so that (amp) in the pasted link will no longer add an extra amp; on the HTML code.

Iframe mode in Froala Editor ensures better isolation and prevents potential interference with other stylesheets loaded on the page. You can turn it on by configuring the `iframe` option to `true` in the initialization options.

<script>

new FroalaEditor(‘div#froala-editor’, {

iframe: true

})

</script>

However, in v4.1, there were some issues reported regarding the incompatibility of the link plugin when operating in the iframe mode.

In this 4.1.2 update, we have efficiently resolved this issue, reinforcing the efficiency of the link plugin under this mode. Therefore, web developers can now relish an uninterrupted, seamless editing experience with Froala, be it in standard or iframe mode.

Enable font size adjustments for non-editable content.

Many developers set some editor content inside contenteditable=false elements. This helps maintain parts of the content non-modifiable. Developers usually use this when they want to provide templates to users where they can simply fill in relevant information without touching the template’s format.

With the new upgrade in V4.1.2, we’ve enabled font size adjustments for non-editable content. This update allows you to change the font size of text living in contenteditable=false elements while maintaining its uneditable nature.

Bug Fixes

We believe in continuous progress. Therefore, we’ve tracked down and remedied several bugs and issues that users reported. These include:

  • Fix the issue where the text color breaks when there is another attribute than style
  • Fix the issue where users cannot select text using the Left Arrow and Shift combination

We appreciate your continuous support and engagement with Froala.

How Can I Update?

We’ve streamlined the process to make it hassle-free. Just head over to our dedicated page for each framework SDK, where you’ll find detailed instructions on installing or updating to the latest version. Follow the links below to get started.

If you are using a plain JavaScript library or other framework, check the get started page to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

If you are using a plain JavaScript library or other framework, follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

Method How to download Include in your project
CDN –
<!-- 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
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.
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 instructions on how to upgrade from version 2.

Try The Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Support and Feedback

We are dedicated to always offering the best possible experience for all our users. We believe this release, meant to enhance Typescript support, is a stepping stone towards that commitment. We encourage you to try this improved Typescript support and give us your valuable feedback. Your input is crucial for delivering continuous enhancement in meeting your evolving needs. Thank you for being a valuable part of our vibrant and growing community.
We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Change Log

Get Started

  • You can download and start using Froala in less than five minutes following our get started guide.

Technical Questions

Download Froala Editor

Posted on September 12, 2023

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.

    Hide Show