Question

我正在使用jQuery打开一个对话框窗口，其中textarea已转换为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');
});

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

错误：this.document.getWindow（）。$ is undefined源文件：包括/ ckeditor / ckeditor.js行：82

Answer 1

我使用带有“show：”选项的回调函数来延迟实例化CKEditor，直到“show”动画完成。我发现只需50毫秒即可。

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

希望这有帮助。

Answer 2

$('.analyse_cell').click(function(){
    $('#ad_div').dialog({
        modal: true,
        resizable: false,
        draggable: false,
        position: ['center','center'],
        width: 600,
        height: 500,
        hide: 'slide',
        show: 'slide',
        closeOnEscape: true,
        autoOpen: false,
        open: function(event,ui) {
            $('#ad_content').ckeditor();
        },
        close: function(event,ui) {
            CKEDITOR.remove($("#ad_content").ckeditorGet());
        }
    });
});

Answer 3

使用最新版本的CKEditor。为我解决了它。版本3.4.2

Answer 4

只需将此代码段添加到您的文档中，问题就解决了！

$(document).on('focusin', function(e) {
     e.stopImmediatePropagation();
});

Answer 5

尝试将适配器放在下面。该修复程序覆盖了适配器。

Answer 6

由于某些原因，我无法让它工作，但通过手工实现相同的功能，设法获得相同的效果。

Answer 7

我遇到了同样的问题，出于某种原因我发现在打开对话框之前将一些文本放入textarea可以解决问题。不是一个真正的解决方案，但对我有用。

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

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    /* Your options here. */
});

$('.analyse_cell').click(function(){
    // Add some content into textarea.
    $('#ad_content').val("Enter content here.");
    $('#ad_div').dialog('open');
});

Answer 8

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

错误：this.document.getWindow（）。$未定义源文件：includes / ckeditor / ckeditor.js
行：129

我使用的是版本3.6.2

Answer 9

我通过简单地在jQuery UI Dialog构造函数中添加zIndex = -1来解决这个问题，如此

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1});

Answer 10

通过在弹出对话框（显示选项）上禁用jQuery UI效果，解决了完全相同的问题。

让我永远想象这一点。现在编辑器的行为符合预期。

Answer 11

神秘主义，但它对我有帮助。在创建对话框之前，我强制设置空数据

CKEDITOR.instances['email_text_of_message'].setData('')

对话框中的

和ckeditor ("ckeditor", "~> 3.4")工作正常。

$("#create_email").click(function(event){

CKEDITOR.instances['email_text_of_message'].setData('')

$("#email_body").dialog({    modal: true,
                             minHeight: 720,
                             minWidth: 900,
                             buttons: [
                            {
                             id: "button_create_email",
                             text: $('#inv_notice16').text(),
                             click: function() {
                                    $("#email_body").dialog('close')
                           }
                            }]}); 
    return false;       
})

jQuery对话框中的CKEditor实例

11 个答案: