jquery - jQuery 对话框中的 CKEditor 实例

Question

我正在使用 jQuery 打开一个对话框窗口，其中的文本区域转换为 CKEditor 的实例。我正在使用 CKEditor 团队提供的 jQuery 适配器，但是当对话框窗口打开时，我无法与编辑器交互(它已创建，但在内容空间中写入“null”，我无法单击任何内容或修改内容)。

This bug report似乎是说通过使用补丁可以解决问题，但它似乎对我不起作用......

这是我的代码(也许我在编程上做错了什么):

HTML:

<div id="ad_div" title="Analyse documentaire">
<textarea id="ad_content" name="ad_content"></textarea>
</div>

我的包含(所有内容都正确包含，但可能是包含顺序问题？):

<script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script>
<script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script>

Javascript:

$('#ad_content').ckeditor();

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    resizable: false,
    draggable: false,
    position: ['center','center'],
    width: 600,
    height: 500,
    hide: 'slide',
    show: 'slide',
    closeOnEscape: true,
    autoOpen: false
});

$('.analyse_cell').click(function(){
    $('#ad_div').dialog('open');
});

编辑:经过一些进一步的测试，我注意到按工具栏按钮给了我这个错误:

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js Line: 82

Answer 1

我使用带有“show:”选项的回调函数来延迟实例化 CKEditor，直到“show”动画完成之后。我发现只要 50 毫秒就可以达到目的。

modal: true,
show: {
    effect: "drop",
    complete: function() {
        setTimeout(function(){
            $( "#selector" ).ckeditor();
        },50);
    }
},
hide: "drop",

希望这有帮助。