0

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...

Improve this question
3
  • I've found help in ck forums before if you don't get a good response here... ckeditor.com/forums Commented Oct 31, 2013 at 20:06
  • No I didn't find response on ck forums.... Commented Nov 1, 2013 at 9:05
  • You need to fix the images in your post so that it displays correctly. Right now both images are the same, and you cannot tell what is wrong. Commented Dec 18, 2013 at 20:32

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Works fine for me, tested in IE/FF/Chrome. ckeditor 4.0.1, jquery 2.0.3, jqueryui 1.10.3. Thanks for your efforts!
0

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.