0

我在 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)
}

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

4

2 回答 2

3

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

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

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

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

我已经广泛测试了以下代码段。它似乎适用于 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，以查看有关代码为何执行此操作的参考。

于 2013-12-12T22:33:45.423 回答
0

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

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

// address interaction issues with ck input
if ( $( event.target ).closest( ".ck-input" ).length ) {
  return true;
}
于 2020-10-19T19:40:49.367 回答