How to get value of a textarea which is controlled by a javascript html editor?

I am trying to write a code which allows my website users to save drafts. I am facing a problem while doing this.

HTML

<input type="button" value="SAVE DRAFT" onClick="saveit()">
<textarea id="content" name="content" class="widgEditor nothing">initial text</textarea>

JavaScript

function sav开发者_Python百科eit() {
   var content = $('#content').val();
   alert (content);
   //some other ajax codes to save draft... 
}

When I click the Save draft button, it always shows initial text even if I change the text in the textarea (editor).

I have tired this with widgEditor and CKeditor but unfortunately I could not figure out how to fix this problem.

NOTE: When I try this without any WYSIWYG editor, it works properly but that text area needs to be an editor.

Can anyone help me with this?

This could probably help if you use CKEditor:

Using jQuery to grab the content from CKEditor's iframe

Essentially, you use this before you read the value:

for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();

Also I think you should use .text(), not .val() when working with textareas.

Don't use onClick

$(':button').click(function() { 
    var content = $("#content").val();
   alert( content );
   //some other ajax codes to save draft...  
});

works fine

http://jsfiddle.net/KEtMC/