Skip to content

Instantly share code, notes, and snippets.

@ClementParis016
Last active July 10, 2024 14:09
Show Gist options
  • Save ClementParis016/ab06847c41160c22f278e4cabe4a0879 to your computer and use it in GitHub Desktop.
Save ClementParis016/ab06847c41160c22f278e4cabe4a0879 to your computer and use it in GitHub Desktop.
TinyMCE characters counter plugin
tinymce.init({
plugins: 'charactercount',
elementpath: false
});
/**
* 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;
}
});
.mce-label.mce-charactercount
margin: 2px 0 2px 2px
padding: 8px
font-size: 12px
.mce-path
display: none !important
@sabareesh-warlock
Copy link

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;
		}
	});
}
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment