jquery ui对话框中的ckeditor问题答案

【问题标题】：ckeditor issue in jquery ui dialogjquery ui对话框中的ckeditor问题
【发布时间】：2013-11-11 15:52:07
【问题描述】：

我在 MVC3 中使用 ckeditor 进行 Richtextbox 编辑。在普通视图中，ckeditor 运行良好，但是当我尝试将它与 jQuery ui Dialog 一起使用时，我遇到了一些问题。

我的对话：

$(document).ready(function() {
    jQuery.noConflict();
    jQuery("#contentOpen").live("click", function(e) {
      e.preventDefault();
        jQuery('<div />', {
            class: 'customPopUp',
            id: "popUpDialog",
        }).appendTo("body")

            .load(this.href, function() {
              jQuery(this).dialog({
                    close: function() {
                        if (CKEDITOR.instances['NewsCulture_Content']) {
                            CKEDITOR.instances['NewsCulture_Content'].destroy();
                        }
                        jQuery(this).remove();
                    },

                    open: jQuery(function() {
                      jQuery('#NewsCulture_Content').ckeditor();

                    }),
                    width: 'auto',
                    height: 'auto',
                });
            });
    });
});

查看：

@{
  Layout = null;
 }     

<script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript">/script> 
<script src="@Url.Content("~/Scripts/ckeditor/adapters/jQuery.js")" type="text/javascript"></script>

@model CyberSystems.ViewModel.ViewModels.System.VmSysNewsCreatre

   @using (Ajax.BeginForm("News_Room_AddNew", "Administration", null,
        new AjaxOptions {HttpMethod = "POST", OnComplete = "addBarNewsCompelte"}, new {id = "addRoomNewsForm"}))
{

      @Html.TextAreaFor(c=>c.NewsCulture.Content)
}

第一次一切都很好，看起来像picture1；两次单击相同的插件（样式）后出现问题，@ 987654322@。我不知道是什么问题，任何想法将不胜感激......

【问题讨论】：

如果您在这里没有得到很好的回应，我之前在 ck 论坛中找到了帮助...ckeditor.com/forums
不，我没有在 ck 论坛上找到回复....
您需要修复帖子中的图片，使其正确显示。现在两个图像是相同的，你无法分辨出哪里出了问题。

标签： jquery asp.net-mvc user-interface dialog ckeditor

【解决方案1】：

您没有针对上述问题发布 2 张单独的图片。相反，两者都是同一张图片，所以我们只能猜测出了什么问题。

话虽如此，几个月前我也遇到了同样的问题，第二次点击一个主要的 ckeditor 下拉菜单（样式/字体/等）将是空的。

问题与 jQuery-UI 现在处理其 z-indexing 和弹出窗口的方式有关。他们在 1.10 中进行了相当大的更改，因此您可能会发现您的下拉菜单在升级时停止正常工作。

坦率地说，我不确定是否有“正确”的方法来解决这个问题。我尝试了许多解决方法，唯一发现真正有效的方法是将以下扩展名附加到 jquery-ui 文件的底部。这样做会重新实现 jquery-ui 的某些部分，以便 ckeditor 可以再次在对话框中工作。

我已经广泛测试了以下 sn-p。它似乎适用于 IE 8/9/10/11、Firefox、Safari 和 Chrome。

$.widget( "ui.dialog", $.ui.dialog, {
 /*! jQuery UI - v1.10.2 - 2013-12-12
  *  http://bugs.jqueryui.com/ticket/9087#comment:27 - bugfix
  *  http://bugs.jqueryui.com/ticket/4727#comment:23 - bugfix
  *  allowInteraction fix to accommodate windowed editors
  */
  _allowInteraction: function( event ) {
    if ( this._super( event ) ) {
      return true;
    }

    // address interaction issues with general iframes with the dialog
    if ( event.target.ownerDocument != this.document[ 0 ] ) {
      return true;
    }

    // address interaction issues with dialog window
    if ( $( event.target ).closest( ".cke_dialog" ).length ) {
      return true;
    }

    // address interaction issues with iframe based drop downs in IE
    if ( $( event.target ).closest( ".cke" ).length ) {
      return true;
    }
  },
 /*! jQuery UI - v1.10.2 - 2013-10-28
  *  http://dev.ckeditor.com/ticket/10269 - bugfix
  *  moveToTop fix to accommodate windowed editors
  */
  _moveToTop: function ( event, silent ) {
    if ( !event || !this.options.modal ) {
      this._super( event, silent );
    }
  }
});

作为最后一点，我猜你要么禁用了 ckeditor 的许多功能，要么没有进行非常彻底的测试。您还应该注意到您的对话框菜单不允许您正确输入数据。我也有一些解决方法，但我还没有找到在任何地方都能正常工作的东西。

编辑：显然有人对此表示反对，尽管有非常多的人在寻找这个特定问题的解决方案。我不介意投反对票，但是如果您添加了有关问题所在的评论，那就太好了。如前所述，上述修复已经过广泛测试。您可以检查上述修复中的 url，以查看有关代码执行此操作的原因的参考。

【讨论】：

对我来说很好，在 IE/FF/Chrome 中测试过。 ckeditor 4.0.1，jquery 2.0.3，jqueryui 1.10.3。感谢您的努力！

【解决方案2】：

我看到了类似的问题。我不确定这段代码是否适用于 ckeditor5，但我看到 cke5 在 jquery ui 对话框中运行良好，除了 url 子表单不允许输入。

我早在 2013 年就将这个子句添加到 _allowInteraction 函数（@kamelkev 的原始代码）中，以解决我的问题。我怀疑他的代码正在寻找的类已经过时，但保留它们并没有什么坏处。

// address interaction issues with ck input
if ( $( event.target ).closest( ".ck-input" ).length ) {
  return true;
}

【讨论】：