Are you looking for a plugin that displays both characters and words count in TinyMCE ? You just found it. charwordcount is a plugin that allow you to count words in TinyMCE.

TinyMCE count words and characters plugin

The plugin count words in TinyMCE editor and additionally characters count. By default, the plugin ignores counting HTML tags and entities (like  ). If you need to count HTML tags and entities as well, you can enable that in the configuration.

TinyMCE count words plugin

Here is the plugin installation process:

  1. Download the package with recent version of TinyMCE count words plugin from my GitHub repository.
  2. Extract the charwordcount directory into tinymce/plugins/ folder (in your website)
  3. Add charwordcount string in plugins section of your TinyMCE configuration ( tinymce.init({….}) ), in example:
        plugins: [
           "charwordcount nonbreaking  link image pagebreak",
           "searchreplace advlist code lists preview"
        ]
  4. You start start to count words in TinyMCE ! The plugin is ready to use.

 

To enable counting of HTML tags and entities, add the following to the TinyMCE configuration:

charwordcount_include_tags: true

 

Here is example of full TinyMCE configuration that enables counting words in TinyMCE :

tinymce.init({
    selector: "textarea",

    toolbar1: "preview code | restoredraft undo redo | cut copy paste searchreplace | link unlink image | table",
    toolbar2: "formatselect fontselect fontsizeselect | bold italic underline strikethrough | forecolor backcolor",

    menubar: false,
    toolbar_items_size: 'small',

    plugins: [
       "charwordcount nonbreaking  link image pagebreak",
       "searchreplace advlist code lists preview"
    ]
});

 

TinyMCE count words plugin example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>charwordcount TinyMCE plugin example</title>

        <script src="tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: "textarea",
                width: 800,
                height: 300,
                resize: false,

                plugins: [
                    "charwordcount advlist link image lists preview pagebreak",
                    "searchreplace code insertdatetime nonbreaking",
                    "table textcolor paste textcolor"
                ], 

                // optional, includes HTML tags and entities (like &nbsp;) in count; disabled by default;
                charwordcount_include_tags: false, 

                toolbar1: "preview code | restoredraft undo redo | cut copy paste searchreplace",
                toolbar2: "formatselect fontselect fontsizeselect | bold italic underline strikethrough",

                menubar: false,
                toolbar_items_size: 'small'
            });
        </script>
    </head>
    <body>
        <textarea>TinyMCE count words plugin in action!</textarea>
    </body>
</html>

You can find a live example of the plugin in action here: TinyMCE count words example.

The example code is included in the plugin package inside example folder.

Comments?

Do you have any comments or feedback regarding the plugin? Post it below!