Froala V4.1.1 release: Enhancing Typescript Support

Today, we are delighted to introduce Froala V4.1.1, an update that builds upon the successes of our best release ever with Froala v4.1 which introduced updated LTS support for React, Vue, and Angular among other important improvements.

In response to our users’ feedback, We have introduced, in V4.1.1, significant changes to ensure a smoother and more compatible experience with TypeScript in Froala.

Froala 4.1 & TypeScript

Froala 4.1 has introduced TypeScript definitions support. This addition is a game-changer for developers as it offers a range of benefits that enhance productivity and code reliability. It provides developers with helpful hints, type-checking at compile-time, and more robust auto-completion.

1. Better Intelligence:
   Software development teams can now enjoy contextual granularity while coding, thus reducing the chances of making errors..
2. Compile-time Type Checking:
   Allowing developers to catch potential bugs in their code that may have been missed. This significantly enhances build-time code reliability.
3. Definitive Auto-completion:
   This feature is a boon for quick coding. Suggestions based on TypeScript definitions provide accurate find-and-replace functionality, making coding a breeze. With accurate types, your editor gains a clear insight into the values and functionalities available, eliminating the need to search through the entire code base.

However, there were some incorrect definitions and missing properties in the index.d.ts file. As a result, using these properties could lead to TypeScript errors. Especially, when using the Angular SDK. Release 4.1.1 came to resolve these issues.

What’s new in Froala 4.1.1?

Froala 4.1.1 boasts enhanced typescript definition support, successfully addressing any issues encountered in 4.1, and guaranteeing seamless compatibility with Angular TypeScript.
To fully benefit from these enhancements and avoid coding complications, we encourage all users to promptly update to the latest release. For instructions on how to update, please refer to our handy “how-to-update” section located at the bottom of this post.

let’s dig deeper into the 4.1.1 release

Displaying toolbar buttons correctly on Angular

Now that Froala supports the latest Angular release, you can enhance your users editing capabilities with the Froala editor. Follow this comprehensive step-by-step tutorial to integrate Froala into your Angular app.

The basic integration process will only display the editor’s default toolbar buttons. However, by importing Froala’s plugin scripts into the app.module.ts file, users can now have access to additional buttons related to those plugins.

For instance, by importing the align plugin

import 'froala-editor/js/plugins/align.min.js';

The editor toolbar will display the following buttons:

• Align right
• Align left
• Center
• Justify

To enjoy the full range of features, you can import all the editor plugins with a single statement thereby displaying all plugin toolbar buttons

import 'froala-editor/js/plugins.pkgd.min.js';

Furthermore, You have the flexibility to customize the editor toolbar to your liking by utilizing the toolbarButtons API option. Simply set this option with the desired toolbar buttons and pass it within the Froala Angular component options tag.

<div [froalaEditor]="options" [(froalaModel)]="content" ></div>

Fix TypeScript Definitions

As we mentioned above, in V4.1.1, we added properties that were missed in v4.1, we’ve also fine-tuned some definitions to ensure everything works smoothly.

Many properties have been added or edited. Such as:

• FE.DEFAULTS
• FE.DefineIcon
• FE.DefineIconTemplate
• FE.END_MARKER
• FE.KEYCODE
• FE.MARKERS
• FE.PLUGINS
• FE.POPUP_TEMPLATES
• FE.RegisterCommand
• FE.RegisterQuickInsertButton
• FE.RegisterShortcut
• FE.START_MARKER

If you’ve been encountering errors while creating custom buttons, plugins, or icons, don’t worry! Simply update your editor and it will now work without these errors.

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