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