Validate CKEditor content length

January 29, 2010

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>

2 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

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.