【问题标题】:CKEditor not working after opening jQuery UI Dialog打开 jQuery UI 对话框后 CKEditor 不工作
【发布时间】:2014-03-11 22:34:04
【问题描述】:

我有一个 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>

【问题讨论】:

    标签: jquery-ui dialog ckeditor


    【解决方案1】:

    你需要在对话框的打开事件上实例化CKEDITOR

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

    然后是允许文本。与 CKEDITOR 使用的 iframe 相关

    【讨论】:

      【解决方案2】:

      这样就可以了

      在对话框关闭时检查 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" );
                }
              }
          });
      

      【讨论】:

        【解决方案3】:

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

        var editor = $('textarea').ckeditorGet();
        editor.updateElement();
        editor.destroy();
        
        $('#childDialog').dialog( 'open' );
        
        $('textarea').ckeditor( { toolbar: [] } );
        

        【讨论】:

          【解决方案4】:

          我在将文本加载到 ckeditor 时遇到了类似的问题,而它位于 jquery ui 对话框中。我有 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);
          

          }

          【讨论】:

            【解决方案5】:

            为了解决在 Jquery ui-dialog 中有 CKEDITOR 时遇到的问题,我执行了以下操作:

            问题 1: 在 ckeditor 中不可见字体大小等下拉菜单。

            解决方案: config.baseFloatZIndex=9999999;

            问题 2: CKEDITOR 对话框中的输入文件不是“活动的”。

            解决方案: 当 ckeditor 对话框打开时关闭 ui-dialog,反之亦然

            问题 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

            【讨论】:

              猜你喜欢
              • 2010-09-26
              • 2012-12-04
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多