Posted By

vagrantradio on 02/16/10

Tagged

javascript

Versions (?)

Last Edited at 02/16/10 04:02pm

Statistics

Viewed 1608 times

Favorited by 0 user(s)

Related snippets

ADD MAXIMUM LENGTH AND COUNTER TO CKEDITOR (FCKEDITOR)

/ Published in: JavaScript

Adds a functioning counter and maxlength to fckeditor textareas

Highlighted TextExpand

//jQuery load function
$(window).load(function() {
	CKEDITOR.replace( 'doc_desc',
		{ 
		toolbar :[['Source'],['Cut','Copy','Paste','PasteText','SpellChecker'],['Undo','Redo','-','SelectAll','RemoveFormat'],[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], ['SpecialChar','PageBreak']]
	});
function textCounter2(field, countfield, maxlimit)
{
	if (field.value.length > maxlimit) // if too long...trim it!
		field.value=field.value.substring(0, maxlimit);
	else  // otherwise, update counter
		countfield.value=field.value.length;
}
var editor = CKEDITOR.instances.doc_desc;
editor.on( 'key', function( evt ){
   // Update the counter with text length of editor HTML output.
   textCounter2( { value : evt.editor.getData() },this.form.grLenght2, 500 );
}, editor.element.$ );
// Whether content has exceeded the maximum characters.
var locked;
editor.on( 'key', function( evt ){
 
   var currentLength = editor.getData().length,
      maximumLength = 500;
   if( currentLength >= maximumLength )
   {
      if ( !locked )
      {
         // Record the last legal content.
         editor.fire( 'saveSnapshot' ), locked = 1;
                        // Cancel the keystroke.
         evt.cancel();
      }
      else
         // Check after this key has effected.
         setTimeout( function()
         {
            // Rollback the illegal one.  
            if( editor.getData().length > maximumLength )
               editor.execCommand( 'undo' );
            else
               locked = 0;
         }, 0 );
   }
	});
});
 
//textarea input
<textarea name="doc_desc" cols="55" rows="3" class="indexTextNormal" id="doc_desc" onkeydown="textCounter2(this.form.doc_desc,this.form.grLenght2,500);" onkeyup="textCounter2(this.form.doc_desc,this.form.grLenght2,500);"></textarea>
            <p>Length: <input readonly="readonly"  type="text" name="grLenght2" size="3" maxlength="3" value="0" /> (maximum <b>500</b> characters)</p>

URL: http://romza.com/counter.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.