WYSIWYG

Characters count in summernote wysiwyg

Max Hutschenreiter -

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

Want products news and updates?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.

Impressions from our Team

  • #Office #Garden - #

  • #workhard - #

  • #belgrade #skyline - #

  • #happybirthday Phil :) - #

  • #happybirthday Stefan 🥂 - #

  • #happybirthday Lidija 🍾 - #

  • Say hi 👋 to our newest team member ☕️ - #

  • #bithday #cake 😻 - #

  • #stayathome #homeoffice #42coders - #

  • #stayathome #homeoffice #42coders #starwars :) - #

  • #stayathome #homeoffice #42coders - #

  • We had a really nice time with #laracononline #laravel - #

  • Happy Birthday 🎂 Miloš - #

  • Happy Birthday 🎂Nikola - #

  • #42coders #christmas #dinner what a nice evening :) - #

  • Happy Birthday 🎂 Ognjen - #

  • Wish you all a merry Christmas 🎄🎁 - #

  • #happybirthday Luka! - #

  • https://communian.com Triff dich mit Menschen aus deiner Umgebung die deine Interessen teilen :) Wir sind gerade live gegangen und freuen uns über jede neue Community die zu uns kommt ❤️ - #

  • Nice #meetup at #myposter thanks! - #

© 2020 42coders All rights reserved.