Enhance Your Editing with Froala 4.2: Word Count and MS Word Pasting Improvements

We are super excited to announce the release of Froala 4.2, which introduces the new Word Counter. This feature was highly requested by our users and we are thrilled to finally bring it to you.

In addition to adding the Word Count plugin, we’ve made several other improvements to our powerful text editor. We believe this new addition will greatly enhance your editing experience with Froala.

New Features

• Introduce the word count feature.
• Support the new Safari 17 Range API.

Improvements

• Enhance the pasting of content from MS Word.

Let’s dig deeper into the Froala 4.2 release!

Word Counter Plugin

The Word Count plugin lets you easily track the number of words in your content, providing valuable insights into your text’s length. This simple yet powerful tool helps you optimize your writing and ensures your content meets certain word count requirements.

The Word Count feature is beneficial for bloggers, content creators, and writers alike. It allows them to meet their SEO requirements, evaluate their progress with written pieces, and set targets for future writing sessions.

However, Froala already has a character count feature. Adding the word count feature provides another layer of information and flexibility. Knowing the exact number of words in your content lets you make more informed decisions about editing, formatting, and optimizing your text.

Word Count Plugin API

The Word Count plugin comes with powerful API options, events, and methods, allowing you to seamlessly customize and integrate the plugin into your existing workflows.

Word Counter Plugin API Options

The plugin offers two options:

• wordCounterCount to turn the word count display on or off, according to your preference.
• wordCounterMax limits the number of words in the editor.

new FroalaEditor('.selector', {

     wordCounterCount: true,

     wordCounterMax: 1200

});

Word Counter Plugin API Events

The plugin provides two API events:

• wordCounter.exceeded is triggered when the wordCounterMax is exceeded.
• wordCounter.update is triggered when the word count is updated.

new FroalaEditor('.selector', {

  events: {

    'wordCounter.update': function () {

      // Do something every time the word count is updated.

      // this is the editor instance.

      console.log(this);

    },

    'wordCounter.exceeded': function () {

      // Do something after the wordCounterMax is exceeded. 

      // this is the editor instance.

      console.log(this);

    },    

  }

});

Word Counter Plugin API methods

The plugin added the wordCounter.wordCount API method to return the word count in the editor.

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

     // Call the method 

     let words = editor.wordCounter.wordCount();

})

Word Counter is a handy feature that adds another layer of functionality to the Froala text editor. Its API options, events, and methods give you full control over the Word Count plugin and allow you to customize it according to your needs.

Support the new Safari 17 Range API

Safari 17 comes with improved interoperability for the Range API and Selection API. These APIs play a crucial role in interacting with selected content and manipulating the text range in the Safari browser. In this release, Froala added support for the new Safari Range API and Selection API, providing a seamless editing experience for Safari users.

We’re committed to providing the best for all our users, regardless of their chosen browser. Froala continues to deliver a powerful and reliable text editing solution to Safari users by supporting the new Safari 17 Range API and Selection API.

Enhanced Pasting Content from MS Word

MS Word documents contain rich formatting such as bold, italics, font styles, and bullet points. When you paste content from MS Word into the editor, it is crucial to preserve this formatting to ensure the content appears as intended.

In the Froala 4.2 release, we made significant improvements to the way content is pasted from MS Word, especially when it comes to pasting lists. These enhancements ensure that the formatting of the pasted lists is retained, allowing you to seamlessly transfer your content from MS Word to the Froala editor without any loss of list styling, alignment, or structure. Whether you’re pasting ordered, unordered, or nested lists, the pasted content will match the original content from MS Word.

We didn’t just improve the pasting of lists; we also enhanced the functionality to correctly display the icons from the Word document. This means the Froala editor will accurately reproduce any pasted icons.

We have also improved pasting tables to ensure they appear correctly in the Froala editor. We have resolved issues with adding columns and changing cell text colors in pasted tables, making editing the pasted tables more seamless and efficient.

By preserving the formatting while pasting content from MS Word, you can save valuable time and effort that would otherwise be spent reapplying styles and formatting manually. With Froala 4.2, you can confidently transfer your content from MS Word to the editor, knowing that it will preserve your content formatting.

How Can I Update?

Don’t miss out on the benefits of the latest Froala 4.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 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 learn how to download 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.