Characters count in summernote wysiwyg

Max Hutschenreiter - 31 May 2019

Summernote is a great and free WYSIWYG editor that offers basically everything that paid WYSIWYG does, however when I got to the point where I need real-time characters count and limiter, I haven’t found that option so I'm providing you with a workaround for it.

The first step would be to add count span, that you can position wherever you want:

<span id="total-characters"></span>

And before calling summernote, set char limit:

let charLimit = 2000;

Let’s assume that you are calling summernote on textarea with id “textarea”, and it’s waiting for parameters, and one of them is callbacks, so here’s what it needs to contain:

callbacks: {
	onKeydown: function(e) {
		let characters = $('#textarea').summernote('code').replace(/(<([^>]+)>)/ig, "");
		let totalCharacters = characters.length;
		$("#total-characters").text(totalCharacters + " / " + charLimit);
		var t = e.currentTarget.innerText;
		if (t.trim().length >= charLimit) {
			if (e.keyCode != 8 && !(e.keyCode >= 37 && e.keyCode <= 40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey)) e.preventDefault();
		}
	},
	onKeyup: function(e) {
		var t = e.currentTarget.innerText;
		$('#textarea').text(charLimit - t.trim().length);
	},
	onPaste: function(e) {
		let characters = $('#textarea').summernote('code').replace(/(<([^>]+)>)/ig, "");
		let totalCharacters = characters.length;
		$("#total-characters").text(totalCharacters + " / " + charLimit);
		var t = e.currentTarget.innerText;
		var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
		e.preventDefault();
		var maxPaste = bufferText.length;
		if (t.length + bufferText.length > charLimit) {
			maxPaste = charLimit - t.length;
		}
		if (maxPaste > 0) {
			document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
		}
		$('#textarea').text(charLimit - t.length);
	}
}

It will prevent any kind of input or trim if visitor pasted text, based on the limit.

Tags: javascript · jquery · summernote · wysiwyg