Validate CKEditor content length

I was adding CKEditor to a site and wanted to be able to validate that the user had entered some copy into the editor when the form was submitted. I've done this in the past with FCKEditor but the API has changed. So with a bit of help from FireBug and console.log, I figured it out. I'm also stripping out the HTML tags, so that I just get the text.

Javascript:

$(function(){
  // use jQuery to add a listener for form submits
  $('#myform').submit(function(){
    var editorcontent = CKEDITOR.instances['somecopy'].getData().replace(/<[^>]*>/gi, '');
    if (editorcontent.length){
      return true;
    }
    else{
      // alert (you'll want to use jQuery to make this nice!)
      alert('What no copy?');
      return false;
    }
  });
});

HTML:

<form id="myform">
  <!-- note: any textareas with a class of "ckeditor" will become editors -->
  <textarea id="somecopy" class="ckeditor"></textarea>
  <input type="submit" id="mysubmit" value="save" />
</form>

Obviously you'll need to add the JavaScript files for CKEditor on your site and add a reference to it in your HTML. Something like this:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

• Posted in:
• jQuery

5 comments

1. Hi John,
   
   Is this new CKEditor for free like the FCKEditor?
   
   And do you like it as much as the FCKEditor?
   
   Comment by Sebastiaan – February 01, 2010
2. Hi Sebastiaan, CKEditor is free and replaces FCKEditor. They have removed the filebrowser features but you can always use cffm or ASF File Explorer instead. So far it seems pretty good :)
   
   Comment by John Whish – February 01, 2010
3. Hey John,
   Thanks alot for the code,this is exactly what i was looking for .
   Thanks
   
   Comment by Ann – February 15, 2011
4. Thanks alot for the code,this is exactly what i want
   
   Comment by vartika – September 21, 2011
5. Can I have FCKEditor content length limit script please
   
   Comment by Mallik – September 29, 2011