Skip to content

Instantly share code, notes, and snippets.

@tamewhale
Created September 15, 2010 20:07
Show Gist options
  • Save tamewhale/581361 to your computer and use it in GitHub Desktop.
Save tamewhale/581361 to your computer and use it in GitHub Desktop.
A word count and limit for tinyMCE
// this assumes an existing html tag containing the upper limit
// of the word count, with an id of #word-count- + the id of the tinymce instance
// e.g. <p>Words left: <span id="word-count-textarea-1">200</span></p>
// add as a parameter to the tinyMCE.init({}); function
setup: function(ed) {
var text = '';
var span = document.getElementById('word-count-' + ed.id);
if(span) {
var wordlimit = span.innerHTML;
ed.onKeyDown.add(function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8) {
return tinymce.dom.Event.cancel(e);
}
});
}
}
@danward48
Copy link

This is written for tinymce 3.X, in 4.X I beleive it shoudl be like so:

setup: function(ed) {
var text = '';
var span = document.getElementById('word-count-' + ed.id);
if(span) {
var wordlimit = span.innerHTML;
ed.on('keydown',function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s_/, '').replace(/\s\s_$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8) {
return tinymce.dom.Event.cancel(e);
}
});
}
}

@slimeygecko
Copy link

Strangely when using this code I get 'undefined is not a function' on the .getContent() function call.. any ideas why this is happening? I am using the 4.xx version of TinyMCE

@slimeygecko
Copy link

I figured it out if anyone wants to know. I just removed the 'ed' variable in the parameters list.

ed.on('keydown',function(ed, e)

becomes:

ed.on('keydown',function(e)

@caBBAlainB
Copy link

Could you please give an example on how to implement it and explain what means "add as a parameter to the tinyMCE.init({}); function" ?
I'm sorry to be a very javascript beginner...

@theodorocaliari
Copy link

@caBBAlainB check out the tinymce documentation http://www.tinymce.com/wiki.php/Configuration

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