Initiating CKEditor with JQuery and Using JQuery UI Dialog

Firstly I have to say how good CKEditor is! You may remember FCKEditor, which CKEditor has evolved from. What a fantastic bit of kit. I would be lost without it. I heavily use JQuery UI with their dialogs and tabs for my web application interfaces. And this is a little gem with a nifty little adapter for JQuery integration. An all for free. I doth my cap to you kind fellows at CKEditor.

I am going to show you how I initiate this within a JQuery UI dialog, so I will assume that you know how to setup and sort a dialog box using JQuery. If not check out the JQuery UI dialog page.

OK, firstly visit the CKEditor page and download the latest version of CKEditor and upload it to your site and hook it in with a JavaScript include. The download also includes the necessary JQuery file as an adpator, but not JQuery itself.

Before you do anything you will need to know that for IE6 and IE7 there is a conflict with the z-index of the dialog box and the editor, so you need to add the following JavaScript file to your site after your JQuery and JQuery UI inclusions:

$.extend($.ui.dialog.overlay, { create: function(dialog){
  if (this.instances.length === 0) {
    setTimeout(function() {
      if ($.ui.dialog.overlay.instances.length) {
        $(document).bind($.ui.dialog.overlay.events, function(event) {
          var parentDialog = $(event.target).parents('.ui-dialog');
          if (parentDialog.length > 0) {
            var parentDialogZIndex = parentDialog.css('zIndex') || 0;
            return parentDialogZIndex > $.ui.dialog.overlay.maxZ;
          }
          var aboveOverlay = false;
          $(event.target).parents().each(function() {
            var currentZ = $(this).css('zIndex') || 0;
            if (currentZ > $.ui.dialog.overlay.maxZ) {
              aboveOverlay = true;
              return;
            }
          });
          return aboveOverlay;
        });
      }
    }, 1);
    $(document).bind('keydown.dialog-overlay', function(event) {
      (dialog.options.closeOnEscape && event.keyCode && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
    });
    $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
  }
  var $el = $('


').appendTo(document.body).addClass('ui-widget-overlay').css({
    width: this.width(),
    height: this.height()
  });
  (dialog.options.stackfix && $.fn.stackfix && $el.stackfix());
  this.instances.push($el);
  return $el;
}});

Now we need to initiate the configuration we are going to use for CKEditor.

Most of it is self-explanatory, but it is worth pointing out a few things while I am here. The remove plugins is a very useful feature to turn off plugins you don’t want. For example, CKEditor loads a spelling plugin that is good, but it pops up an advert until you buy it. It also messes up any styles you may add into HTML you may use the editor for. To find the name of a plugin to turn off, simply go into the plugins folder and the name of the plugin is the respective folder name. They are all pretty obvious with the exception of the said spelling plugin, which I found out was the scayt plugin.

Another useful config setting I use is:

startupMode: 'source'

The default value is ‘wysiwyg’, but using ‘source’ will start the editor in source mode, so you can edit the HTML code directly. I find this useful for developers.

The code for my dialog pop-up box is:

Edit HTML

  HTML code goes here!

The JQuery for it is:

// Initialise the dialog box
$("#edit_html").dialog({
  bgiframe: true,
  autoOpen: false,
  width: 990,
  height: 620,
  modal: true,
  draggable: false,
  resizable: false,
  open: function() {
    $(this).find("textarea").ckeditor(editor_config);
  },
  close: function() {
    $(this).find("textarea").ckeditorGet().destroy();
  },
  buttons: {
    'Close': function() {
      $(this).dialog('close');
    }
});
// Opens the dialog box when the edit html link is clicked
$("#edit_html_link").click(function()
{
  $("#edit_html").dialog("open");
});

As mentioned above I won’t talk about the setup of the dialog box and the options used. What I will concentrate on is the open and close functions used in the dialog box. The open function basically tells the site that when the dialog box finishes open look for all textareas within the dialog box and turn them into a CKEditor instance.

The close function simply destroys the instances once the dialog box closes. This is very important as if you don’t do this you will get a number of JavaScript errors saying something along the lines of “another instance exists”.

Another problem I had with the “another instance exists” error was that by default if you give your textarea a class of “ckeditor” then CKEditor recognises this and creates an instance. You then create another instance and bang pain in the arse error that takes at least half a day to fathom!

And BOOM! You should hopefully have CKEditor installed. You don’t have to use this for JQuery UI dialogs, but hopefully this will arm you with enough information to set up your CKEditor instances using JQuery.

One final note is that I have also got this working with a combination of JQuery UI dialog boxes and tabs in across all browser including the dreaded Internet Explorer 6!