TinyMCE characters counter plugin

script.js

tinymce.init({
  plugins: 'charactercount',
  elementpath: false
});

tinymce-charactercount.plugin.js

/**
 * Credit: https://amystechnotes.com/2015/05/06/tinymce-add-character-count/
 * This is a slightly modified version to work with more recent TinyMCE version, fix some code styling and don't trim 
 * trailing and leading whitespaces from count.
 */

tinymce.PluginManager.add('charactercount', function (editor) {
  var _self = this;

  function update() {
    editor.theme.panel.find('#charactercount').text(['Characters: {0}', _self.getCount()]);
  }

  editor.on('init', function () {
    var statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0];

    if (statusbar) {
      window.setTimeout(function () {
        statusbar.insert({
          type: 'label',
          name: 'charactercount',
          text: ['Characters: {0}', _self.getCount()],
          classes: 'charactercount',
          disabled: editor.settings.readonly
        }, 0);

        editor.on('setcontent beforeaddundo keyup', update);
      }, 0);
    }
  });

  _self.getCount = function () {
    var tx = editor.getContent({ format: 'raw' });
    var decoded = decodeHtml(tx);
    var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, '');
    var tc = decodedStripped.length;
    return tc;
  };

  function decodeHtml(html) {
    var txt = document.createElement('textarea');
    txt.innerHTML = html;
    return txt.value;
  }
});

tinymce.sass

.mce-label.mce-charactercount
  margin: 2px 0 2px 2px
  padding: 8px
  font-size: 12px

.mce-path
  display: none !important

Perfect Man, thank you very much, I changed the font to 11px and "{0} CHARACTERS" instead "Characters: {0}", now is perfect.

works like a charm, thanks!

Super. Thank you a lot. P

Thanks a lot bro. Works like a charm.

need delete "\n"

editor.getContent({format: 'raw'}).replace(/\n/g, '')

Where should I put tinymce.sass ?

I'm wondering the same thing. Is there a default name and path for it? I'm having an issue where the text is located and am thinking the CSS would help.

Rename the folder charactercount
Change the first line to
tinymce.PluginManager.add('charactercount', function (editor,url) {
Just below that add:
tinymce.DOM.loadCSS(url + '/css/charactercount.css');
Minify the file and name it plugin.min.js
Create a subfolder called css
Create a file within that folder called charactercount.css
Place the following css:
.mce-label.mce-charactercount {
margin: 2px 0 2px 2px;
padding: 8px;
font-size: 14px;
}
Clear your cache and reload the page. Works great!

Is there a way to limit the maximum number of characters that can be entered, like the maxlength attribute on textarea ?

I guess Adding custom text in statusbar in TinyMCE 5.x does not work like it used to in 4.x.

I had tried this code but it is not working for me can any once check my code.

tinymce.PluginManager.add('charactercount', function (editor) {
	var _self = this;

	function update() {
editor.theme.panel.find('#charactercount').text(['Characters: {0}', _self.getCount()]);
	}

	editor.on('init', function () {
var statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0];

if (statusbar) {
		window.setTimeout(function () {
	statusbar.insert({
			type: 'label',
			name: 'charactercount',
			text: ['Characters: {0}', _self.getCount()],
			classes: 'charactercount',
			disabled: editor.settings.readonly
	}, 0);

	editor.on('setcontent beforeaddundo keyup', update);
		}, 0);
}
	});

	_self.getCount = function () {
var tx = editor.getContent({ format: 'raw' });
var decoded = decodeHtml(tx);
var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, '');
var tc = decodedStripped.length;
return tc;
	};

	function decodeHtml(html) {
var txt = document.createElement('textarea');
txt.innerHTML = html;
return txt.value;
	}
});

tinymce.init({
selector:'.product_desc',
height : "280",
plugins: 'lists code charactercount',
elementpath: false,
branding: false,
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | code | numlist bullist ',
init_instance_callback: function (ed) {
	ed.on('keyup', function (e) {
		var max = 300;
		var count = ed.contentDocument.body.innerText.length;
		//console.log(count);
		document.getElementById("character_count").innerHTML = "Characters: " + count;
		if (count > max) {
			alert("Maximum " + max + " characters allowed.");
			return false;
		}
	});
	ed.on('keypress', function (e) {
		var max = 300;
		var count = ed.contentDocument.body.innerText.length;
		console.log("Key Press");
		count = count + 1;
		console.log(count);
		if (count > max) {
			alert("Maximum " + max + " characters allowed.");
			return false;
		}
	});
}
});