A look inside the core editor improvements in Froala 4.1

Most JavaScript developers prefer modern libraries and frameworks for coding due to their ability to create web applications that are not only fast and scalable but also easy to maintain. These frameworks provide a set of features and conventions that simplify the development process and reduce the amount of boilerplate code. They also offer security, performance optimization, testing, and deployment benefits. All of these features make it the best choice for developers.

We understand your needs and requirements for having an editor that supports Modern JavaScript Frameworks and we released our 4.1 version for you. A release that supports the popular React and Vue JavaScript libraries’ latest versions. As well as the Angular framework’s latest version.

Moreover, the 4.1 release contains enhancements and bug fixes to the core editor functionality as part of periodic updates to our rich text editor.

The release contains too many improvements. We couldn’t cover all of them in one blog post. We focused on framework improvements in our first post. Today, we will recap quickly the Frameworks improvements and then discuss the core editor improvements in more detail.

React, Angular, and Vue Support

Froala 4.1 supports React 18, Angular 15, and Vue 3. Please refer to the documentation page of your preferred framework and follow it for easy integration. If you want more details, you can read our blog posts about integration with React and Angular. The Vue integration post will be published soon.

Supporting the latest version of these frameworks was very imperative for several reasons:

1. Maximized Compatibility: Frameworks are frequently updated to deal with emerging issues, optimize performance, and add new features. These updates can sometimes interfere with older code. Froala 4.1 ensures compatibility with other software that’s built using the same version of the used framework- this means fewer breakdowns and better performance overall.
2. Improved Performance: The most recent versions of a framework aim to provide optimal performance. They might contain code optimizations that make the applications built with them run faster and smoother. In other words, up-to-date SDKs can make better use of system resources.
3. Access to Latest Features: By supporting the latest version of these frameworks, developers get access to new and enhanced features that weren’t available in previous versions. These features can significantly streamline the development process and allow for more sophisticated applications.
4. Security Measures: As with most software updates, new versions of a framework often come with patches for known security vulnerabilities. By supporting the latest version in the SDK, It helps protect applications from potential attacks or hacking attempts linked to outdated versions.

Now you can enjoy all of these benefits with Froala 4.1, ensuring your web application development is up-to-date, efficient, and secure.

TypeScript Definition Support

Froala 4.1 comes with a TypeScript definition. This is another big feature added to this version. Having a proper TypeScript definition helps developers by providing helpful hints, type-checking at compile-time, and more robust auto-completion.

1. Better Intelligence
   The tooling can provide software development teams with more context-rich granularity when coding — leading to fewer errors.
2. Compile-time Type Checking: Allow for catching possible bugs in your code that you may miss without TypeScript’s type-checking benefit. It greatly enhances build-time code reliability.
3. Definitive Auto-completion: Better auto-completion aids in quick coding, with suggestions based on TypeScript definitions giving developers an accurate find-and-replace functionality. By having accurate types, your editor gets a clear insight into the value or the functionalities that are available without searching the entire code base.

What else

Read our release blog post to learn more about:

• Display The Editor Toolbar At The Bottom On Mobile Devices
• Improved Accessibility
• Enhanced Pasting of content from 3rd party tools
• Change Default Settings for Images Inside Iframe
• Consistent API for image, video, and file uploading
• Improved adding table rows functionality

Core Editor Improvements

Feedback from our user community continues to drive the development and refinement of Froala’s core editor. Improvements include expanding functionality, enhancing user experience, and fixing bugs.

Improvements to the Editor API

Say hello to the toolbarResponsiveToEditor API option for improved editor toolbar responsiveness. 

Froala is known for its responsive toolbar. It was the first editor to introduce API options to handle toolbar button visibility based on screen size. It provides developers with four API options: toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS. These options accept objects or arrays to give the developer flexibility when writing code. 

• toolbarButtons: used to set the list of buttons that appear in the rich text editor’s toolbar on large devices (≥ 1200px).
• toolbarButtonsMD: used to set the list of buttons that appear in the rich text editor’s toolbar on medium devices (≥ 992px). If you don’t set it, the toolbarButtons value will be used.
• toolbarButtonsSM: used to set the list of buttons that appear in the rich text editor’s toolbar on small devices (≥ 768px). If you don’t set it, the toolbarButtonsMD value will be used.
• toolbarButtonsXS: used to set the list of buttons that appear in the rich text editor’s toolbar on extra small devices (< 768px). If you don’t set it, the toolbarButtonsSM value will be used.

As you can see, these options are set based on window width. But in real applications, there are many cases where the developers limit the width of the editor to a reasonable width, for example, setting the editor max-width to 800px. In such cases, if you resize your browser, you may observe the toolbar buttons adjust before the editor size itself changes. It was the developer’s responsibility to use the provided options to adjust the toolbar display as needed. However, there were many requests to change this toolbar behavior to make it responsive to the editor size, not the screen size. 

In this release, we introduce another option to control editor toolbar behavior. The toolbarResponsiveToEditor API option accepts a Boolean with a default value set to false. This means the toolbar responds to the browser window size. If you prefer to make the editor toolbar responsive based on editor size, set the toolbarResponsiveToEditor option to true. This option enhances the editor’s UI by making toolbars more responsive. To enjoy this new option, update your editor now.

The updated API method html.wrap generates cleaner HTML output

The editor html.wrap API Method helps developers customize the HTML output by wrapping the text using a div with the class fr-temp.

• The first parameter determines if the editor text should be wrapped or not.
• The second parameter determines if the <td> and <tr> text should be wrapped or not.
• The third parameter determines if the text inside the<blockquote> tag should be wrapped or not.

Merging cells in a table wrapped using html.wrap creates empty paragraphs inside the merged cell.

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.html.unwrap(false, true, false);

})

With the new updated html.wrap API Method, developers will now experience cleaner editor content when using this method. We encourage you to explore this improved feature and harness its potential in your web application development projects.

Get rid of console error when inserting content using the editor html.insert API method

The html.insert API method allows developers to insert content inside the editor programmatically. You may want to insert content inside the editor in different cases. For example, when a specific event occurs or when you create a custom button that inserts specific content when clicked.

The method takes two parameters:

1. The first parameter is the HTML to be inserted.
2. A Boolean parameter. Set it to True if you want the editor to clean HTML content upon insertion, or False to insert content without any cleaning.

Occasionally, a “TypeError: Cannot read properties of undefined (reading 'which')“ error message shows up in the console when calling this method. This no longer happens.

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.insert('foo bar', true);
})

Improved drag and drop experience

The Froala Draggable plugin allows you to move elements using your computer mouse. In the latest update, we have improved the overall drag and drop experience. User interactions are now more fluid and accurately represented on screen, providing a smooth, responsive experience while moving elements.

The plugin comes with thedragInline API option which specifies how the dragged elements should be placed in the new position. When this option is set to false, dragged elements are placed between block tags and not inside them.
Try to drag the section with red border in the below example:

Improved Safari Support

As part of Froala’s ongoing effort for cross-browser usability, continued improvements have been made to ensure better support for Safari. Now pasting links and images from third-party tools inside the Safari editor has been improved. We have also resolved issues related to incorrect behavior on Ipad Safari when backspacing on Korean text.

As always, we highly encourage developers to update their Froala version to enjoy these improvements and keep their editor within specifications.

Maintaining Viewport Stability: Enhanced FullScreen Transitions and Resolving iFrame Scrolling while pressing backspace

In an effort to deliver a more fluid user experience, we have enhanced full-screen transitions, resulting in more intuitive and engaging displays that go easy on the eyes whenever the mode is toggled. As a result of these UI enhancements, you can expect seamless switches between full-screen and standard modes, ensuring viewport stability for user convenience.

We have also addressed an issue regarding iFrame scrolling while pressing backspace. This unusual activity created difficulty navigating backward through the text. The loss of place posed a significant inconvenience, particularly in lengthy texts. This issue is now resolved. Pressing the backspace key no longer triggers unexpected and intrusive scrolling behavior, enabling greater ease and focus when editing and revising your content. 

Many bug fixes

Every new release of Froala features bug fixes to improve its software stability and quality.

Table row with display: none style no longer causes issues

Consider the following scenario

• You have a table inside the editor
• One of the table rows has a display: none style
• You delete a row after the row with the display: none style

Previously, the editor was deleting the incorrect row, but this issue has now been resolved, and the correct row will now be deleted.

Check the release notes for the complete list of updates and improvements

How do I upgrade to V4.1?

Downloading and updating the Froala Editor is extremely straightforward. We have a dedicated page for each Framework SDK that explains in detail how to install or update your SDK 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.

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.

Support and Feedback

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

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.