CODEWITHSUNDEEP
jqueryasp.net-mvcuser-interfacedialogckeditor
user1361986
user1361986

Reputation:

ckeditor issue in jquery ui dialog

I use ckeditor for richtextbox editing in MVC3 . In normal View, ckeditor is working good ,but when I try to use it with jQuery ui Dialog I have some problems with it.

My 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',
                });
            });
    });
});

View:

@{
  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)
}

First time everything is fine and it looks like in the picture1 ; After two click on same plugin (Styles) something is going wrong , picture2. I have no idea what is the problem , any ideas will be appreciated...

Upvotes: 0

Views: 1080

Answers (2)

Lou K
Lou K

Reputation: 1138

I was seeing a similar problem. I'm not sure if this code works in general for ckeditor5, but I saw that cke5 was working fine with jquery ui dialog, with exception of url subform didn't allow input.

I added this clause to the _allowInteraction function (original code by @kamelkev) back in 2013 to fix my problem. I suspect the classes his code is looking for are obsolete, but that it doesn't hurt to keep them.

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

Upvotes: 0

kamelkev
kamelkev

Reputation: 1156

You did not post 2 separate pictures for your problem above. Instead it's both the same picture, so we are left to guess what is going wrong.

That being said, I had the same exact issue a few months ago whereby a second click on one of the primary ckeditor drop downs (style/font/etc) would be empty.

The problem is related to the way that jQuery-UI is now handling their z-indexing and popups. They made a pretty substantial change 1.10, and as a result you probably found that your drop downs stopped working correctly when you upgraded.

Frankly I am not sure if there is a "correct" way to solve this problem. I tried a number of workarounds, and the only one that I found that really worked is by appending the following extension to the bottom of your jquery-ui file. Doing so reimplements some parts of jquery-ui such that ckeditor can once again work in a dialog.

I have extensively tested the following snippet. It appears to work in IE 8/9/10/11, Firefox, Safari and 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 );
    }
  }
});

As a final note I am guessing you either have disabled a lot of the functionality of ckeditor, or you haven't tested very thoroughly. You should also notice that your dialog menus do not allow you to enter data correctly. I have some workarounds for that too, but I have yet to find something that works well everywhere yet.

EDIT: so apparently someone downvoted this, despite a very very large number of people looking for solutions to this specific problem. I don't mind a downvote, but it'd be nice if you had added a comment as to what the problem was. As noted the above fix has been extensively tested. You can check the urls within the fix above to see references for why the code does what it does.

Upvotes: 3

Related Questions