This makes use of jQuery (1.3.2.min at the time)
I needed a very straight forward letter counter and after looking around, couldn't find anything solid, so I came up with this.
## The html side of things
## Create a javascript file called 'charactercount.js' or whatever you want, just remember to change the name above
That's it. Tested in IE8 and Firefox 3.6.3
I needed a very straight forward letter counter and after looking around, couldn't find anything solid, so I came up with this.
## The html side of things
<head> <title>My stuff</title> <!-- any thing else you may need to add --> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/jquery/charactercount.js"></script> </head> <textarea name="myTextArea">Test data</textarea> <script type="text/javascript">CKEDITOR.replace('myTextArea',{ height: '300', maxlength: '400' /* this is the important part });</script> <strong>Letter count: <span id="letterCount"></span></strong>
## Create a javascript file called 'charactercount.js' or whatever you want, just remember to change the name above
/*============================================================ Some simple javascript (charactercount.js) This code works as is and I take no responsibility for any alterations that happen afterwards. If it can be improved upon, would be great to hear back. ============================================================*/ $(document).ready(function(){ var editAbstract=CKEDITOR.instances.myTextArea; editAbstract.on("key",function(e) { var maxLength=e.editor.config.maxlength; e.editor.document.on("keyup",function() {KeyUp(e.editor,maxLength,"letterCount");}); e.editor.document.on("paste",function() {KeyUp(e.editor,maxLength,"letterCount");}); e.editor.document.on("blur",function() {KeyUp(e.editor,maxLength,"letterCount");}); },editAbstract.element.$); //function to handle the count check function KeyUp(editorID,maxLimit,infoID) { //If you want it to count all html code then just remove everything from and after '.replace...' var text=editorID.getData().replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '').replace(/^\s+|\s+$/g, ''); $("#"+infoID).text(text.length); if(text.length>maxLimit) { alert("You cannot have more than "+maxLimit+" characters"); editorID.setData(text.substr(0,maxLimit)); editor.cancel(); } else if (text.length==maxLimit-1) { alert("WARNING:\nYou are one character away from your limit.\nIf you continue you could lose any formatting"); editor.cancel(); } } });
That's it. Tested in IE8 and Firefox 3.6.3