Question

i try to save my form with CKEditor and add autosave function mean all input will autosave :

<script>
//hide preview box 
$('document').ready(function() {
    $('#preview').hide(); //Default setting
}); 

//save in db
function CKupdate(){
    for ( instance in CKEDITOR.instances )

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value

        CKEDITOR.instances[instance].on('key', function() { //auto save 
                $("#save").trigger('click');
            });

        $('#article-form').ajaxForm( { //submit form
        target: '#preview', 
            success: function() { 
                $('#preview').show('slow').delay(800).hide('slow');
            } 
        }); 
}
</script>

<form id="article-form" name="article-form" method="post" action="save.php">
    <textarea name="bodyContent" id="bodyContent"><?php echo $row['content'] ?></textarea>
    <script type="text/javascript">
    CKEDITOR.replace('bodyContent');
    </script>

    <button onClick="CKupdate()" id="save" />Save</button>
</form>

<span id="preview"></span>

My problem is :

1. This autosave CKupdate() (refer line -> comment //auto save ) only trigger after i press Save
   button.. and not function if i not press save . Im not sure how to run this before user press save.

2. After user press save , save function will trigger everytime user
   insert any string inside textarea and after few second my browser will hang. I think this on('key', not function well or maybe need to change to someting else.

what im trying to do actually is create textarea with CKEditor and save value into db and create function for autosave.

Answer 1

I am sorry to say but this looks highly unoptimized. Do you realize that after your first click every key press adds the “keypress” event again to the editor instance? Like if you press 5 keys now you have 5 clicks of the save button.

Instead of having the entire function run again why don’t you move the save code out to another function? Like so:

<script>
//hide preview box 
$('document').ready(function() {
    $('#preview').hide(); //Default setting
    for ( instance in CKEDITOR.instances ) {

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value

        CKEDITOR.instances[instance].on('key', function() { //auto save 
                $("#save").trigger('click');
            });

   }
}); 

//save in db
function CKupdate(){
    for ( instance in CKEDITOR.instances ) {

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value


        $('#article-form').ajaxForm( { //submit form
        target: '#preview', 
            success: function() { 
                $('#preview').show('slow').delay(800).hide('slow');
            } 
        }); 
    }
}
</script>

<form id="article-form" name="article-form" method="post" action="save.php">
    <textarea name="bodyContent" id="bodyContent"><?php echo $row['content'] ?></textarea>
    <script type="text/javascript">
    CKEDITOR.replace('bodyContent');
    </script>

    <button onClick="CKupdate()" id="save" />Save</button>
</form>