Question

我有一个jQuery UI对话框，上面有一个CKEditor实例。我可以打开对话框并与编辑器进行良好的交互。但是，如果我从原始对话框中打开另一个jQuery UI对话框，则在第二个对话框打开时编辑器中的文本将消失，并且在重新加载整个页面之前无法使用编辑器。

如果CKEditor实例不在对话框中，这可以正常工作。我可以打开子对话框，使用它，关闭它，然后仍然与编辑器交互。

任何想法是什么以及如何使其发挥作用？

以下示例程序或http://jsfiddle.net/3EyM4/1/

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/adapters/jquery.js"></script>

</head>

<body>
<script>

  $(document).ready(
    function()
    {   
      $('textarea').ckeditor( { toolbar: [] } );

      $( "#childDialog" ).dialog(
         { 
            autoOpen: false
         } );

    $( "#parentDialog" ).dialog(
       { 
         autoOpen: false
       } );

   });

</script>

<div>
     Main page
     <button onclick="$('#parentDialog').dialog( 'open' );">Open Parent</button>
</div>

<div id="parentDialog" title="Parent Dialog">
    <button onclick="$('#childDialog').dialog( 'open' );">Open Child</button>
    <textarea name="editorTextArea"></textarea>
</div>

<div id="childDialog" title="Child Dialog">
    Child
</div>

</body>
</html>

Answer 1

这样可以正常使用

检查CKEditor的事件，而不是在关闭对话框时将其销毁。享受您的代码

function DestryoCKEditorInstances(textarea_name)
{
    if (CKEDITOR.instances[textarea_name])
    {
        CKEDITOR.instances[textarea_name].destroy();
    }
}

$( "#add-task" ).dialog({
        modal: true,
        minHeight: 600,
        minWidth: 600,
        position: [0,28],
        create: function (event) { $(event.target).parent().css('position', 'fixed');},
        open: CKEDITOR.replace('textarea_name',{language: 'tr',height: 150,width: 550, allowedContent: true}),
        close: function (){ 
            DestryoCKEditorInstances('textarea_name');
            form[ 0 ].reset(); 
        },
        buttons: {
          "Add Task": function() {
            Add();
            form[ 0 ].reset();
            $( this ).dialog( "close" );
          },  
          "Keep Going To Add Task": function() {
            Add();
            form[ 0 ].reset();
          }, 
          Cancel: function() {
            form[ 0 ].reset();
            $( this ).dialog( "close" );
          }
        }
    });

Answer 2

我至少找到了解决方法。如果在打开对话框之前保存编辑器的内容并销毁实例，然后在打开对话框后重新创建编辑器实例，则一切正常。

var editor = $('textarea').ckeditorGet();
editor.updateElement();
editor.destroy();

$('#childDialog').dialog( 'open' );

$('textarea').ckeditor( { toolbar: [] } );

Answer 3

在jquery ui对话框中将文本加载到ckeditor时，我遇到了类似的问题。我有2个ckeditor实例和一个ajax帖子来获取数据所以我的解决方法是：

(...)
success: function(data, textStatus, jqXHR) {    

for (name in CKEDITOR.instances) {
       CKEDITOR.instances[name].destroy()
}
$('#newForm').dialog('open');
$("#dialog").focus();
$('#txtDescription').ckeditor({ toolbar: 'Basic' });
$('#txtDescriptionFr').ckeditor({ toolbar: 'Basic' });  
CKEDITOR.instances['txtDescription'].setData(data.Description.NameEn);
CKEDITOR.instances['txtDescriptionFr'].setData(data.Description.NameFr);

}

Answer 4

您需要在对话框的打开事件中实例化CKEDITOR

open: CKEDITOR.replace('editor1', {
            height: 145,
            width: 500,
            allowedContent: true,
        }),

然后是允许文字。与CKEDITOR使用的iframe有关的事情

Answer 5

要解决在Jquery ui对话框中使用 CKEDITOR 时出现的问题，我执行了以下操作：

问题1： 在ckeditor中看不到字体大小等下拉列表。

解决方案： config.baseFloatZIndex = 9999999;

问题2： 在CKEDITOR对话框中输入字段“活动”。

解决方案：当ckeditor对话框打开时，关闭ui对话，反之亦然

问题3： 当ckeditor切换到全屏模式时，ckeditor对话框输入字段不会“激活”

解决方案： ckeditor进入全屏模式时关闭jQuery ui-dialog，离开全屏模式时重新打开

我的CKEDITOR jquery适配器现在看起来像这样，对我来说运行正常：

/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
(function(a) {
    if ("undefined" == typeof a) throw Error("jQuery should be loaded before CKEditor jQuery adapter.");
    if ("undefined" == typeof CKEDITOR) throw Error("CKEditor should be loaded before CKEditor jQuery adapter.");
    console.error("CKEDITOR jQuery Team-pro adapter v0.4a");
    CKEDITOR.config.jqueryOverrideVal = "undefined" == typeof CKEDITOR.config.jqueryOverrideVal ? !0 : CKEDITOR.config.jqueryOverrideVal;
    a.extend(a.fn, {
        ckeditorGet: function() {
            var a = this.eq(0).data("ckeditorInstance");
            if (!a) throw "CKEditor is not initialized yet, use ckeditor() with a callback.";
            return a
        },
        ckeditor: function(g, d) {
            if (!CKEDITOR.env.isCompatible) throw Error("The environment is incompatible.");
            if (!a.isFunction(g)) {
                var m = d;
                d = g;
                g = m
            }
            var k = [];
            d = d || {};
            this.each(function() {
                var b = a(this),
                    c = b.data("ckeditorInstance"),
                    f = b.data("_ckeditorInstanceLock"),
                    h = this,
                    l = new a.Deferred;
                k.push(l.promise());
                if (c && !f) g && g.apply(c, [this]), l.resolve();
                else if (f) c.once("instanceReady", function() {
                        setTimeout(function() {
                            c.element ? (c.element.$ == h && g && g.apply(c, [h]), l.resolve()) : setTimeout(arguments.callee, 100)
                        }, 0)
                    },
                    null, null, 9999);
                else {
                    if (d.autoUpdateElement || "undefined" == typeof d.autoUpdateElement && CKEDITOR.config.autoUpdateElement) d.autoUpdateElementJquery = !0;
                    d.autoUpdateElement = !1;
                    b.data("_ckeditorInstanceLock", !0);
                    c = a(this).is("textarea") ? CKEDITOR.replace(h, d) : CKEDITOR.inline(h, d);
                    b.data("ckeditorInstance", c);
                    c.on("instanceReady", function(d) {
                        var e = d.editor;
                        e.config.baseFloatZIndex=9999999;
                        setTimeout(function() {
                            if (e.element) {
                                d.removeListener();
                                e.on("dataReady", function() {
                                    b.trigger("dataReady.ckeditor", [e])
                                });
                                e.on("setData", function(a) {
                                    b.trigger("setData.ckeditor", [e, a.data])
                                });
                                e.on("getData", function(a) {
                                    b.trigger("getData.ckeditor", [e, a.data])
                                }, 999);
                                e.on("destroy", function() {
                                    b.trigger("destroy.ckeditor", [e])
                                });
                                e.on("save", function() {
                                    a(h.form).submit();
                                    return !1
                                }, null, null, 20);
                                if (e.config.autoUpdateElementJquery && b.is("textarea") && a(h.form).length) {
                                    var c = function() {
                                        b.ckeditor(function() {
                                            e.updateElement()
                                        })
                                    };
                                    a(h.form).submit(c);
                                    a(h.form).bind("form-pre-serialize", c);
                                    b.bind("destroy.ckeditor", function() {
                                        a(h.form).unbind("submit", c);
                                        a(h.form).unbind("form-pre-serialize",
                                            c)
                                    })
                                }
                                e.on("destroy", function() {
                                    b.removeData("ckeditorInstance")
                                });
                                /*
                                e.on("maximize", function (e) {
                                   // console.log('---------------------------- MAXIMIZE ----------------------------');
                                   // console.debug(e.data);
                                    switch(parseInt(e.data)){
                                        case(1)://Gehe in Fullscreen, SCHLIESSE Jquery ui Dialoge
                                            console.log('CKEDITOR [maximize:true] jQuery adapter: schliesse ui-dialog');
                                            $('.ui-dialog-content').dialog('close');
                                        break;
                                        case(2)://Gehe in Fullscreen, OFFNE Jquery ui Dialoge
                                            console.log('CKEDITOR [maximize:false] jQuery adapter: öffne ui-dialog');
                                            $('.ui-dialog-content').dialog('open');
                                        break;
                                    }
                                });
                                */
                                b.removeData("_ckeditorInstanceLock");
                                b.trigger("instanceReady.ckeditor", [e]);
                                g && g.apply(e, [h]);
                                l.resolve()
                            } else setTimeout(arguments.callee, 100)
                        }, 0)
                    }, null, null, 9999)
                }
            });
            var f = new a.Deferred;
            this.promise = f.promise();
            a.when.apply(this, k).then(function() {
                f.resolve();
                CKEDITOR.on("dialogDefinition", function (e) {
                    var dialogName = e.data.name;
                    var dialog = e.data.definition.dialog;
                    dialog.on('show', function () {
                        console.log('CKEDITOR [dialogdefinition:true] jQuery adapter: schliesse ui-dialog');
                        $('.ui-dialog-content').dialog('close');
                    });
                    dialog.on('hide', function () {
                        console.log('CKEDITOR [dialogdefinition:false] jQuery adapter: öffne ui-dialog');
                        $('.ui-dialog-content').dialog('open');
                    });
                });
            });
            this.editor = this.eq(0).data("ckeditorInstance");
            return this
        }
    });
    CKEDITOR.config.jqueryOverrideVal && (a.fn.val = CKEDITOR.tools.override(a.fn.val, function(g) {
        return function(d) {
            if (arguments.length) {
                var m =
                    this,
                    k = [],
                    f = this.each(function() {
                        var b = a(this),
                            c = b.data("ckeditorInstance");
                        if (b.is("textarea") && c) {
                            var f = new a.Deferred;
                            c.setData(d, function() {
                                f.resolve()
                            });
                            k.push(f.promise());
                            return !0
                        }
                        return g.call(b, d)
                    });
                if (k.length) {
                    var b = new a.Deferred;
                    a.when.apply(this, k).done(function() {
                        b.resolveWith(m)
                    });
                    return b.promise()
                }
                return f
            }
            var f = a(this).eq(0),
                c = f.data("ckeditorInstance");
            return f.is("textarea") && c ? c.getData() : g.call(f)
        }
    }))
})(window.jQuery);

也找到了这个解决方案： https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

打开jQuery UI对话框后CKEditor无法正常工作

5 个答案: