开发者

ckeditor + jquery + fancybox

开发者 https://www.devze.com 2023-03-22 03:15 出处:网络
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.

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

精彩评论

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

关注公众号