Using window.location in a JQuery/JavaScript Function on Internet Explorer 6 (IE6)

Now then, what can I say about my favourite browser that is in my view Microsoft’s best invention! Crap!

Simple as that for now. I will reserve a separate blog for discussing IE6 another time – or should I say rant. As a web developer I probably spend approximately a third of any development time fixing IE6 bugs. 2014 cannot come soon enough when Microsoft stop supporting the nightmare. Until then…

Had an interesting issue today: it turns out that if you use window.location in a function you need to make sure you return false otherwise the navigation will not work. No error, just nothing. Puh!

For example, I was doing a very simple click function using JQuery as below:

$("#test_link").click(function()
{
  window.location = 'http://www.google.co.uk/';
});

To make it work in IE6 I had to use:

$("#test_link").click(function()
{
  window.location = 'http://www.google.co.uk/';
  return false;
});

To be fair to Microsoft they are correct though. We should in fact return something in a function. It is after all good programming, but if is not semantically correct, which is clearly why IE6 does not do anything then why doesn’t it trigger an error? For me it is lazy coding, which is what the web is all about and it is a shame that we have to spend hours trying to work back to our roots to find out why a perfectly well-coded site does not work in an archaic browser. Rant over

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!

Creating Your Own File Browser for CKEditor in PHP

I am going to talk to anyone out there about how you can create your own file browser for CKEditor. Before you say it CKEditor to provide a file browser and uploader called CKFinder that you can purchase for $59. This article is not about how to develop a file browser to replace this because you don’t want to pay for CKFinder as frankly CKEditor on it’s own is worth paying that for. No, this article is about writing your own file browser because you need something different (although there is no reason why you couldn’t build your own). My only gripe with the boys at CKEditor is although there support guide are detailed they aren’t quite there yet, but as they are probably spending most of their time developing a great product who am I to complain. Instead I am happy to try and help them out with this post.

Firstly it is useful if you get a feel for how CKEditor recommend you to develop your own file browser and uploader. If you go to their support article on it here and have a quick read.

I am also only showing you an example for the image upload area, but you can change this for the flash or general browser. It will work the same. I have tested it.

I use the JQuery adapter to initiate CKEditor, so I will start their with my initiation code (for more information on this visit Initiating CKEditor with JQuery and Using JQuery UI Dialog):

The filebrowserImageBrowseUrl is the URL that you would use. The content displayed for this page is displayed in the pop-up that appears when you click the browse button. Adding this config variable will add the browse button to the image dialog. The other URLs you can also develop are:

• filebrowserBrowseUrl
• filebrowserImageBrowseUrl
• filebrowserFlashBrowseUrl
• filebrowserUploadUrl
• filebrowserImageUploadUrl
• filebrowserFlashUploadUrl

I am going to keep things simple and give you the basics, so you can take this further and will simply add a couple of links to the pop-up that will load into the image dialog.

My image PHP file looks like this:

  Google Logo

  WordPress Logo

So let’s go through it!

There are two links that when clicked call the loadFile function passing an image URL. The first line of the function is where I cam so stuck with the documentation from CKEditor. In their documentation it says:

window.opener.CKEDITOR.tools.callFunction(
  funcNum, fileUrl [, data] );

The issue here is window.opener! Very messy for cross-browser compatibility. I have added a check to the DOM that then selects the right object.

The second line contains the ‘CKEditorFuncNum’ variable that is pushed to your dialog box from clicking the browse button in the image dialog box through the query string. This variable basically tells CKEditor what object you are working on and where to send the URL back to. On this line you can see the CKEditor function that passes back the object instance function through CKEditorFuncNum variable as the first parameter. The second parameter is the URL to the image file and the third parameter can be a message. I kept things simple, but you can take this further and provide a message in here if things go wrong. The message is ignored if the URL parameter is not blank, but if the URL parameter is blank the message is displayed in an alert box. This could be useful if you develop your own upload tool. It is this line that sends the URL back to the image dialog box.

The third line simply closes our dialog box.

That should be that in a nutshell. Hopefully it will give you enough to overcome the issues I had to start with. Let me know if you need any further help.