This plugin works just like a status plugin reflecting the count of words entered by the editor while entering content in the rich text editor.
How to create ?
Create clientlibs for our text component with
categories[] | String | core.aeexplorers.text
Now, add word-count.js in the above created clientlib and update the file name in js.txt as well.
word-count.js
(function ($, $document) {
"use strict";
function word_count(htmlContent){
htmlContent = htmlContent.replace(/<[^>]*>/g," ");
htmlContent = htmlContent.replace(/ /g, ' ');
htmlContent = htmlContent.replace(/\s+/g, ' ');
htmlContent = htmlContent.trim();
var count = htmlContent.split(" ").length;
var displayCount=count;
if(count===1 && htmlContent.split(" ")[0]==='') {
displayCount=0;
}
var htmlStringToShow="<p class=\"word-count\" style=\"color:blue\">Word Count : "+displayCount+"</p>"
return htmlStringToShow;
}
$document.on("dialog-ready", function() {
var textarea=$(".cq-RichText-editable");
var htmlContent = textarea.html();
var htmlStringToShow=word_count(htmlContent);
$(htmlStringToShow).insertAfter(textarea);
$(".cq-RichText-editable").keyup(function(){
var htmlContent = $(this).html();
var htmlStringToShow=word_count(htmlContent);
$(".word-count").html(htmlStringToShow);
});
});
})($, $(document));
Now, include the above created clientlibs to cq:dialog of text component by adding the property
extraClientlibs[] | String | core.aeexplorers.text
The plugin is now created and ready to use.
How to use ?
Place a text component on the content page and start typing. Just below the text area, a word count status would be displayed which will be updated in real time, as an when you enter a character.

To download the installable jcr package, click on the below button.
It worked for me. Thanks 🙂
LikeLike