Froala 4.1.2 release – Typescript Support Enhancements and More

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

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:

• selection.setAfter
• selection.setAtEnd
• selection.setAtStart
• selection.setBefore
• undo.saveStep
• format.is
• image.get

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

Improved link Plugin

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.

Improved Link Pasting

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.

Fix the Link Plugin Incompatibility with Iframe Mode in Froala v4.1.

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.

• React SDK
  • To install run npm install react-froala-wysiwyg
  • To update run npm update froala-editor
  • React SDK Documentation 
• Angular SDK
  • To install run npm install angular-froala-wysiwyg
  • To update run npm update froala-editor –save
  • Angular SDK Documentation 
• Vue.js SDK
  • To install run npm install vue-froala-wysiwyg –save
  • To update run npm update froala-editor –save
  • Vue.js SDK Documentation 

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.

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

• Please visit the release notes for a complete list of changes.

Get Started

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

Technical Questions

• If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.