RTE Runtime Word Count Plugin

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(/&nbsp;/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.