Good Evening,
I've put together a character counting plugin and thought I'd post it here. The plugin counts all characters, including html code, using an interval of 1000ms while the editor is in focus. You can modify it to use a 'key' event listener, but the interval works better for me since the 'key' event doesn't recognize when an insertion from the toolbar occurs. In any case, you can set a limit, and while it isn't enforced, the interface does change color when the limit is reached:
The plugin code as follows must go in the 'plugins/charcount/plugin.js' folder/file:
Styled with this css:
Enjoy!
Michael
I've put together a character counting plugin and thought I'd post it here. The plugin counts all characters, including html code, using an interval of 1000ms while the editor is in focus. You can modify it to use a 'key' event listener, but the interval works better for me since the 'key' event doesn't recognize when an insertion from the toolbar occurs. In any case, you can set a limit, and while it isn't enforced, the interface does change color when the limit is reached:
The plugin code as follows must go in the 'plugins/charcount/plugin.js' folder/file:
CKEDITOR.plugins.add( 'charcount', { init : function( editor ) { var defaultLimit = 'unlimited'; var defaultFormat = '<span class="cke_charcount_count">%count%</span> of <span class="cke_charcount_limit">%limit%</span> characters'; var limit = defaultLimit; var format = defaultFormat; var intervalId; var lastCount = 0; var limitReachedNotified = false; var limitRestoredNotified = false; if ( true ) { function counterId( editor ) { return 'cke_charcount_' + editor.name; } function counterElement( editor ) { return document.getElementById( counterId(editor) ); } function updateCounter( editor ) { var count = editor.getData().length; if( count == lastCount ){ return true; } else { lastCount = count; } if( !limitReachedNotified && count > limit ){ limitReached( editor ); } else if( !limitRestoredNotified && count < limit ){ limitRestored( editor ); } var html = format.replace('%count%', count).replace('%limit%', limit); counterElement(editor).innerHTML = html; } function limitReached( editor ) { limitReachedNotified = true; limitRestoredNotified = false; editor.setUiColor( '#FFC4C4' ); } function limitRestored( editor ) { limitRestoredNotified = true; limitReachedNotified = false; editor.setUiColor( '#C4C4C4' ); } editor.on( 'themeSpace', function( event ) { if ( event.data.space == 'bottom' ) { event.data.html += '<div id="'+counterId(event.editor)+'" class="cke_charcount"' + ' title="' + CKEDITOR.tools.htmlEncode( 'Character Counter' ) + '"' + '> </div>'; } }, editor, null, 100 ); editor.on( 'instanceReady', function( event ) { if( editor.config.charcount_limit != undefined ) { limit = editor.config.charcount_limit; } if( editor.config.charcount_format != undefined ) { format = editor.config.charcount_format; } }, editor, null, 100 ); editor.on( 'dataReady', function( event ) { var count = event.editor.getData().length; if( count > limit ){ limitReached( editor ); } updateCounter(event.editor); }, editor, null, 100 ); editor.on( 'key', function( event ) { //updateCounter(event.editor); }, editor, null, 100 ); editor.on( 'focus', function( event ) { editorHasFocus = true; intervalId = window.setInterval(function (editor) { updateCounter(editor) }, 1000, event.editor); }, editor, null, 100 ); editor.on( 'blur', function( event ) { editorHasFocus = false; if( intervalId ) clearInterval(intervalId); }, editor, null, 100 ); } } });
Styled with this css:
.cke_skin_kama .cke_charcount { display:block; float:right; margin-top:5px; margin-right:3px; color:#60676A; } .cke_charcount span.cke_charcount_count, .cke_charcount span.cke_charcount_limit { font-style: italic; }
Enjoy!
Michael
Re: Character Count Plugin
I also develop a plugin charcount. It arises in the toolbar.
The plugin code as follows must go in the 'plugins/charcount/plugin.js' folder/file:
The plugin is multi lang, you can initialise your own custom alert message in lang/[your_lang].js
For exemple ihave add it in my lang file.
Re: Character Count Plugin
Your plugin is very useful, thank you!!
Although, I think there is a little bug in it somewhere because when I try to use it in explorer it shows this error message:
But it works fine in firefox... I've done some googling and it seems that this is usually caused by an extra comma somewhere. So I've tried to locate it, but no luck... Do you have any idea what could cause this? Any help would be appreciated...
Attachments:
Re: Character Count Plugin
In explorer, editor was undefined within the function inside setInterval. So I've modified it:
Now it seems to be working fine.
Re: Character Count Plugin
Michael
Re: Character Count Plugin
@yfrommelt:
your screenshot looks exactly like the plugin which I want to have!
Maybe I'm too stupid but with your explaination and your code no counter appears in my toolbar. I did everything you wrote 3 times but no luck.
Can you please check your instructions?
greets,
Matt
Re: Character Count Plugin
config.js
Re: Character Count Plugin
just remove the parameter editor. then it works fine:
- jeehm
Re: Character Count Plugin
Your plugin looks great. However, it always says "of unlimited characters"...what configs need to be defined to set the character limit?
Re: Character Count Plugin
Thanks, you're right it's much easier that way!
Re: Character Count Plugin
I used the samples for my application.
So, I have samples.css e samples.js, and my html is:
<textarea class="ckeditor" id="comentario" name="comentario" style="width:100%; height:200"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace('comentario', {
extraPlugins : 'charcount',
toolbar : [ [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList' ],[ 'TextColor' ],[ 'Smiley' ] ]
});
//]]>
</script>
I cant to set the limit of characteres.
Can help??
Re: Character Count Plugin
EDIT : Maybe you use the Michael's plugin. Sorry.
Re: Character Count Plugin
plugin.js
Warning: code ckeditor.js must no longer be changed. Take the default file without my changes.
Re: Character Count Plugin
Where should the CSS code be placed actually?
Re: Character Count Plugin
All thing are working fine. But i am facing 2 issues.
When i reached at the limit at that time i dont want the CKEditor to accept the characters.
Other thing, when i press enter it taking 15 characters. Can i remove it? Basically i dont want to count <p> tag.
Can you please help me ASAP as I want to complete the functionality.
Thanks,
Vrinda
Re: Character Count Plugin
I also see that it is counting the HTML and it should not.
Re: Character Count Plugin
Re: Character Count Plugin
To pass in a limit value (so as to customize it at load), just add this code beneath your CKE call in your own code (at least, this works on my end):
Re: Character Count Plugin
Hi, could you tell me how to configure config.js to call this plugin. could be a full tutorial? Thank you.
Re: Character Count Plugin
Add
config.extraPlugins = 'charcount';
to your config.js file in your ckeditor root.
*just saw the post above yours that has the same info in it.
Re: Character Count Plugin
Please help.
Re: Character Count Plugin
Put a custom ID on the label of the new button. change ckeditor.js
Loking for :
And replace it by :
in CKE 3.5.2 does not exist this code.
Re: Character Count Plugin
Michael code is working very well.
Here some improvement I made, if it can help someone else.
If you use custom UIcolor, this plugin override your configuration, so do those little change :
After :
Add :
------
Replace :
By :
------
After :
Add :
------
So now, it save your UIColorand restore it. You can set the limit reached UIColor in your config file like this :
------
Something else, if you want the counter to appear the first time the page load with 0 character, modify the lastCount initialization to -1, to force the update :
------
It's working like a charm with CKEditor 3.5.2
Thanks a lot.
Decco
Re: Character Count Plugin
I try to use the plugin from Michael, which is almost what I want.
But I would like on behalf of char without formatting. I do not need to count the html code.
Is that possible?
Thank you in advance!
(sorry for my crapy english)
Re: Character Count Plugin
On the step, where i must replace i cant find it - i have only not with O
I dont know is this the only problem with this for me.
If someone can attach all the modified files here, ill be very thankful.
I use latest CKEditor version
Thanks in advance!
Re: Character Count Plugin
Thanks!
Re: Character Count Plugin
Instead of counting all the characters including HTML characters, carriage returns, etc I have it stripping that out, then counting only the characters the user typed, including spaces but not & n b s p ; Just look for the count variables (its in 2 places)
I also set it up to reset the editor with a valid limit of characters if the user entered too much text. For the most part this worked, but in some cases under weird circumstances I would end up in an infinite loop where the editor kept resetting itself (maybe someone wants to fix that?). So, I commented that stuff out, and have other JS validation (outside of the plugin) checking the length before allowing the form to submit. I'll provide my code:
PLUGIN FILE
VALIDATION CODE
Hope this helps you - let me know what you think.
Re: Character Count Plugin
I know its been a while, actually a really long while since the last post, but its never late to say thanks. This edited version is superb and its exactly what i wanted. Thanks a lot..
Re: Character Count Plugin
Example: When i enter just the character "b" and make it bold, it counts 18 characters. <b>b</b> are just 8 characters. Any idea how to fix this?
Thanks in advance.
Re: Character Count Plugin
Re: Character Count Plugin
Hi Michael,
I used this plugin..itz working fine..nice work.But I m facing 1 issue
for eg: if i enter characters 1 by 1 by line[Means any formatting].while reach its maximum limit, the text formatting goes wrong..its produces a normal text with taking substring as its maxlength..
Can any on help me..
Thanks in advance