ckeditor + jquery + fancybox

0
votes

Purpose is to have a small icon on my admin page. Clicking this icon will fire a modal window with an instance of ckeditor textarea. The user edit the text, saves it and modal closes. My problem is that if i click again on the icon, the new editor instance is empty. Below you can see the relevant codes

HTML Part:

<a id="editShortText" title="Short Description" href="#saveShortTextFrm"><img src="clickme.gif">

<div style="display:none">
<form action="" method="post" id="saveShortTextFrm" name="saveShortTextFrm" class="frm">
<textarea class="jquery_texteditor" name="short_text_english" id="short_text_english" style="width:700px; height:400px;"><? echo $value_from_db;?></textarea>
<div align="center" style="margin:20px;"><input name="submit1" type="submit" value="Save" /></div>
</form>
</div>

JS Script:

$("#editShortText").fancybox({
        'scrolling': 'no',
        'titleShow': false,
        'onStart': function() {
            $('.jquery_texteditor').ckeditor(config);   
        },
        'onComplete': function() {
            $('.jquery_texteditor').ckeditor(config);   
        },
        'onClosed': function() {
           $('.jquery_texteditor').ckeditor(config);    
        }
    });

    $("#saveShortTextFrm").live("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type    : "POST",
            cache   : false,
            url     : "_save_text.php",
            data    : $(this).serializeArray(),
            success: function(data) {
                if (data!='')
                {
                    $("#shortTtextImageHolder").html('<img src="images/button_accept.gif" border="0">');


                    if(CKEDITOR.instances["jquery_texteditor"]) 
                    {
                        delete CKEDITOR.instances["jquery_texteditor"];
                        $('.jquery_texteditor').ckeditor(config);   
                        $("#short_text_english").val(data);

                        CKEDITOR.instances.short_text_english.setData(data);
                    }


                }
                else
                {
                    $("#shortTtextImageHolder").html('<span class="error">S.O.S.</span>');
                }

                $.fancybox.close();
            }
        });

        return false;
    });

All work well for the first click - when I click my link/image for the first time. If i click again (after saving modal data or just closing modal window), the new modal fires up but text area is empty of data.

Any ideas on how to fix this?

1
phpjqueryckeditorfancybox

1 Answers

1
votes

When you close the modal try to use 

CKEDITOR.instances.short_text_english.destroy(true);

or

if (CKEDITOR.instances.short_text_english) {
     CKEDITOR.instances.short_text_english.setData("");
     CKEDITOR.instances.short_text_english.destroy(true);
}