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/