ckeditor + jquery + fancybox [英] ckeditor + jquery + fancybox

问题描述

目的是在我的管理页面上有一个小图标。
单击此图标将激活带有ckeditor textarea实例的模态窗口。
用户编辑文本，保存文本并关闭模态。
我的问题是，如果我再次点击图标，新的编辑器实例为空。
下面您可以看到相关代码

HTML零件：

p $ p> < a id =editShortTexttitle =简短说明href =＃saveShortTextFrm>< img src =clickme.gif>

< div style =display：none>
< form action =method =postid =saveShortTextFrmname =saveShortTextFrmclass =frm>
< textarea class =jquery_texteditorname =short_text_englishid =short_text_englishstyle =width：700px; height：400px;>< ;? echo $ value_from_db;？>< / textarea>
< div align =centerstyle =margin：20px;>< input name =submit1type =submitvalue =Save/>< / div&
< / form>
< / div>


JS脚本：

  $（＃editShortText）。fancybox（{
'scrolling'：'no'，
'titleShow'：false，
 'onStart'：function（）{
 $（'。jquery_texteditor'）。ckeditor（config）; 
}，
'onComplete'：function（）{
 $ 。cquery_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 = /button_accept.gifborder =0>'）; 
 
 
 if（CKEDITOR.instances [jquery_texteditor]）
 {
 delete CKEDITOR。实例[jquery_texteditor]; 
 $（'。jquery_texteditor'）。ckeditor（config）; 
 $（＃short_text_english）val（data）; 
 
 CKEDITOR .instances.short_text_english.setData（data）; 
} 
 
 
} 
 else 
 {
 $（＃shortTtextImageHolder）。 html（'< span class =error> SOS< / span>'）; 
} 
 
 $ .fancybox.close（）; 
} 
}）; 
 
 return false; 
}）; 
  

当我第一次点击我的链接/图片时，
如果我再次点击（保存模态数据或只关闭模态窗口）后，新的模式被激活，但文本区域是空的数据。

如何解决这个问题？

解决方案

当你关闭模态尝试使用

  CKEDITOR.instances.short_text_english.destroy（true）; 
  

或

 c $ c> if（CKEDITOR.instances.short_text_chinese）{
 CKEDITOR.instances.short_text_english.setData（）; 
 CKEDITOR.instances.short_text_english.destroy（true）; 
} 
  

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?

解决方案

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

这篇关于ckeditor + jquery + fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！