Froala 4.2.2 Release – Enhancing Pasting From Microsoft Word, Support YouTube Shorts, and More

We are excited to announce the release of Froala Editor 4.2.2. Froala always brings stability and quality improvements with each new release to keep delivering our customers the best WYSIWYG editing experience.

Froala V4.2.2 improves MS Word pasting, supports YouTube Shorts, improves the inline toolbar on mobile, and more.

Let’s dig deep into the most significant changes in this release.

Enhancing Pasting From MS Word

The latest version of Froala significantly improves the experience of pasting content from Microsoft Word. Users can now upload pasted images to their server and receive the corresponding upload events. Additionally, the editor retains font formatting, even for font families that use MS Word attributes. Overall, the pasting experience from MS Word is better than ever, saving users time while maintaining clean, well-formatted documents.

Enhanced Pasting Images

Previously, when you pasted images with other content from MS Word into the editor, the pasted images were just displayed in the editor with other content. Now the pasted image is also uploaded to the server and triggers the related events such as the image.beforeUpload event.

Uploading images to the server allows you to save the images to your content management system and use them later. This enhanced pasting experience ensures a seamless workflow when incorporating content from Microsoft Word into your Froala-powered applications.

Support Microsoft Word Custom Font Family Attributes

Microsoft Word represents font families in various ways, sometimes using HTML attributes and other times employing custom attributes like mso-bidi-font-family and mso-fareast-font-family.

In this release, Froala adds support for the following custom MS Word attributes:

• mso-bidi-font-family
• mso-fareast-font-family
• mso-fareast-theme-font

This preserves the text font format when pasting from MS Word, ensuring a seamless integration of content into your Froala-powered applications while maintaining original formatting.

Fix Table Pasting

Previously, pasting a table from Microsoft Word into the editor could place the table outside the selected div, resulting in extra div elements. This issue has been resolved; now, tables from DOCX files paste directly within the selected div without adding extra div elements.

Support YouTube Shorts

The Froala Video plugin enables users to insert videos directly in the editor from different sources. It automatically parses YouTube, Vimeo, Yahoo, and DailyMotion video links.

The Froala Video plugin now supports YouTube Shorts, enabling users to embed short-form videos directly into their documents. Users can manage these videos just like regular YouTube videos, including resizing, adjusting alignment, and previewing or removing them, all within the editor’s interface without leaving the page.

With the addition of YouTube Shorts support, Froala continues to evolve and adapt to the changing landscape of digital content, keeping users aligned with the latest social media trends and enriching their overall content experience.

Enhancing Mobile Experience

Froala 4.2.2 enhances the mobile editing experience by improving the responsiveness of the alignment and font size dropdowns in the inline toolbar. The update ensures that these dropdowns reliably respond to user clicks, allowing for easy selection of alignment options and font sizes directly from the toolbar, thus streamlining the mobile editing workflow. These enhancements aim to provide a seamless editing experience across all devices and platforms.

Enhancing List Management with Track Changes Enabled

If you utilize the Track Changes plugin, which is not enabled by default, this update is for you. In earlier versions, users experienced issues formatting unordered lists when Track Changes was enabled. This issue is no longer happening.

How Can I Update?

Don’t miss out on the benefits of the latest Froala 4.2.2 release. Update today and experience the enhanced editing features and improvements.

If you are using a plain JavaScript library or other framework, check the get started page to know how to download 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 learn how to download the latest Froala Editor release and 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 for step-by-step instructions on upgrading 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.