开发者

ckeditor + jquery + fancybox

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" n开发者_运维问答ame="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?


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);
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜