How I got FCKEditor + IMCE + Lightbox to "just work"

warning, WALL OF TEXT AHEAD.

first of, I wasn't sure where to put this but I wanted to share so I hope this is the right place, and second I take no responsibility for anything that results from things I mention in this post
backup your files before editing anything, and don't try this in a production environment

Here's my scenario, I'm setting up a small community/blogging site for friends and family members, and not all of them are technically inclined so I wanted to make it simple to use yet have powerful features.

there are mainly three things I set out to accomplish:
* I wanted rich text editing
* I wanted to support inline images in said rich text box easily
* I wanted to prevent images from overflowing the theme.

what follows is how I accomplished all that and some more.

The Module versions I have:
Drupal 6.4
fckeditor-6.x-1.x-dev (Sep 17 12:05) with FCKeditor_2.6.3
imce-6.x-1.1
lightbox2-6.x-1.8

Rich Text Editing.

This was the easy part. I tried out various modules that offer it but it in the end FCKEditor was the one to suit my needs.
Installing that and tweaking is very simple, just follow the documentation. The only tweaks I did with FCKEditor was to add 2 new toolbar presets for users and anonymous.
but that was done with editing
{basedir}/sites/all/modules/fckeditor/fckeditor.config.js

and I added these two entries

FCKConfig.ToolbarSets["customUsers"] = [
['Bold','Italic','Underline','StrikeThrough','FontSize','-','TextColor','-','OrderedList','UnorderedList','-','Link','Unlink','-','Image','Flash','RemoveFormat']
];
FCKConfig.ToolbarSets["customAnon"] = [
['Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','-','Link','Unlink','RemoveFormat']
];

and then I selected the new toolbars in the profiles for anonymous and logged in users and gave each role permission to use FCKEditor, voíla Rich Text Editing done.

Image functionality

This was the tricky part, and definitely the most time consuming.
Here's some of the things I wanted to do on the image front:

* browser can click on resized images to see the fullsize image
* users can upload images from their computer
* users can insert uploaded images into their text
* users can easily see where the picture is in their text
* users can adjust size of picture

The rest though not so simple, I think I looked at every possibility for this already out here and either they provided the function I needed but they didn't work for drupal 6.4 or FCKEditor or both, or they were just too troublesome and made things too complex.

In the end I decided to go with IMCE, it offered everything I needed although it isn't very simple to use for the less technically inclined, in addition it's hard to accomplish simple things you want to do and it's user interface is terribly cluttered, but outof all the other solutions it was the most straightforward method for the users; They just click the image icon in the Rich Text Editor, get an image dialog and then press "browse server" to get to the image browser where they can upload images and then select them and send back and then press OK.

but this combination only provided what I needed by requiring the user to make "complicated" changes, Like selecting a link url and typing in the custom class in the "Stylesheet Classes" box under "advanced". Things I didn't want the user to be required to do, so I decided to change the behavior of IMCE and FCKEditor to suit my needs.

But in order to do that I needed to pry into their source codes and take a look into their inner workings and do some modification.
I'm not an expert programmer, more like a novice one so there are probably much better ways to accomplish what I did, but at the least my changes can hopefully be of help to someone out there who is looking for similar solution to which I was looking for and if anyone can use this as a reference to make the functionality into features in respected modules, by all means do so.

There is a known problem with IMCE + FCKEditor + some version of drupal and firefox, where the IMCE browser doesnt show up and it's just a blank page. Unfortunately I don't remember exactly how i fixed it but if that problem happens to you just search the drupal site for the solution, thats how I fixed it. Just remember to clear your cache everytime you make a change to some code. I've cleared my cache so often I have ctrl-shift-delete (clear cache hotkey in firefox) in my muscle memory.

Modifying the source : Getting Lightbox to work automatically

Lets begin with the easiest one, getting images to work with Lightbox without the need to type anything in.

FCKEditor has a field where you can specify a custom class to use with an image, to use it you have to go to "advanced" tab and type the class into the "Stylesheet Classes" field. Now this isn't really helpful to the average user and FCKEditor doesn't offer any way (that I found) to have a default value in there. So we need to change that.

But first, define a custom class that triggers Lightbox, this is done in the admin page for Lightbox under the "automatic image handling" and then under "Custom Class Images", define a class to use, such as "myclass" or something. (Make sure you use plain text input box when defining it, otherwise it will be read as <p>text</p> if you use FCKEditor).

Then we need to do some modification to the source of FCKEditor.
open the "sites/all/modules/fckeditor/fckeditor/editor/dialog/fck_image.html" file and look for

<span fcklang="DlgGenClass">Stylesheet Classes</span><br />
<input id="txtAttClasses" style="width: 100%" type="text" />

You need to add a default value in the input box, so we add "value=""" somewhere in there, like this :

<span fcklang="DlgGenClass">Stylesheet Classes</span><br />
<input id="txtAttClasses" style="width: 100%" value="<CustomClassName>" type="text" />

Now everytime you press the image button, FCKEditor will already have placed your custom lightbox triggering class in the required field.
You should try it out, add a picture which has a link to an image set, and see if lightbox doesnt kick in. If it doesn't, make sure your class is the same as defined in Lightbox, and check how the code looks like in the "simple view", or otherwise just follow Lightbox troubleshooting lines.

Easiest part done, now for the more difficult things.

FCKEditor and IMCE : How on earth do they work together??

Since I didn't come anywhere near the development of either FCKEditor or IMCE I have no idea how they work, I had to do all my work by looking at the code and working backwards through it to find what made it tick. So I'm going to briefly explain my findings to you, so you have at least some understanding of what is going on. Which is better than to just blindly follow my guide.

IMCE Browser works by checking the variables which are used to launch it, and from them it knows what to do.
This is passed in the form of "app=applicationName|fileProperty1@FieldId1|fileProperty2@FieldId2 ... etc" Where app is the name of the application which is launching IMCE.
The File Properties that work in IMCE are :
* url
* name
* size(formatted)
* width
* height
* date(formatted)
* bytes(integer size in bytes)
* time(integer date timestamp)

And FCKEditor call IMCE with this string " ?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';\n"
I'll dissect this string.
-> app=FCKEditor -> Send data to this application (I have no idea how an application is designed and I didn't have a need to find out since my modification doesn't require it)
-> url@txtUrl -> This sends the url of the image to the form field called "txtUrl"
-> width@txtWidth -> This sends the width of the image to the form field called "txtWidth"
-> height@txtHeight -> This sends the height of the image to the form field "txtHeight"

Now, just by knowing this then shouldn't it be simple to fill out the link field automatically? by passing the url file property to the form field called txtLnkUrl. I wish it was that simple. IMCE can only send each property of the file ONCE to a field, so we can't for example use "|url@txtUrl|url@txtLnkUrl|" as an easy fix.

So, this is the very basics of how IMCE interacts with FCKEditor, Now... how do we make this work?.

Modifying the source : Changes to the FCKEditor module

First of all, we need a way to pass the "url" property to both the image url (txtUrl) and the link url (txtLnkUrl) form fields. I looked at many possibilities on how to accomplish this, like call IMCE with url@txtUrl+txtLnkUrl , url@txtUrl|url@txt-Url and some other. In the end I decided to go this way url@txtUrl|url2@txtLnkUrl|width ...etc .

The only thing we need to change with FCKEditor is how it calls IMCE, this is done in the sites/all/modules/fckeditor/fckeditor.module file in the line

$js .= $js_id .".Config['ImageBrowserURL']= '". $host ."?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';\n";

we just change this to

$js .= $js_id .".Config['ImageBrowserURL']= '". $host ."?q=imce&app=FCKEditor|url@txtUrl|url2@txtLnkUrl|width@txtWidth|height@txtHeight';\n";

and that's it, This is the only change required for FCKEditor itself, the rest is all done in IMCE.

Modifying the source : Changes to the IMCE module

Some information you require for my changes to work for you.
*I have 2 thumbnail presets. a 100x100 with the Suffix "_thumb" and another 400x400 with the suffix "_preview".
*I do not want to show pictures that are larger than 500x700 pixels so they won't mess with the theme.

We only need to do changes to one file in the IMCE Module, although they are some heavy changes.

I think it will just be easier if I just paste the entire modified code here with good comments that you can run through to see what I'm doing.

But here is an overview of what I'm doing:
* IMCE doesn't include a definition for url2 so it doesn't really know what to do with it and thus it is useless by itself. Fortunately IMCE parses all variables passed to it, so we just need to make url2 a copy of url, but send the data to the different form field.
* But I dont just want a simple link to the same image, if we are inserting a thumbnail or a preview I want the link to point to the full size image, So we are doing changes to the fileproperty for url2 to remove the _thumb and _preview suffixes.
* If a user selects the full size image, and it is bigger than 500x700 pixels I wan't to automatically resize it down to fit the 500x700 maximum dimension (while keeping aspect ratio)
My resize method is just really simple and I know it's not nearly perfect, but it does the job for me. It is not generating a new image. So if you have a picture that is 2000x2000 then it's size parameters are just changed to 500x500ish. I am told that imagecache will dynamically generate new pictures so that might be a better option to use, but there are some problems with imagecache and views so I can't use them and I dont have time to wait for fix and dont have the skills to fix it myself.

But on to my code, I am only commenting on changes that I made, I'm not adding comments to the original code.

The only file that needs editing is "sites/all/modules/imce/js/imce_set_app.js"

// $Id:imce_set_app.js,v 1.3.2.3 2008/07/13 11:23:51 ufku Exp $
//When imce url contains &app=appName|fileProperty1@correspondingFieldId1|fileProperty2@correspondingFieldId2|...
//the specified fields are filled with the specified properties of the selected file.

var appFields = {};
var strUrl;

// Lets define the maximum dimension an image can have
var strMaxHeight = 700;
var strMaxWidth = 500;
// to store the difference between actual size and maximum
var strHeightDifference;
var strWidthDifference;
// variables to check if an image is higher or wider than allowed
var isHigher;
var isWider;
// To know wether we should resize the image based on Height or Width
var isHeightBigger;
// How much should we shrink the image
var strResizeFactor;
// Should we do a resize
var doResize = 0;

//execute when imce loads.

imce.hooks.load.push(function(win) {
  var data = decodeURIComponent(location.href.substr(location.href.lastIndexOf('app=')+4)).split('|');
  var appname = data.shift();
  for (var i in data) {
    var arr = data[i].split('@');
    appFields[arr[0]] = arr[1];
  }
  //set send to
  imce.setSendTo(Drupal.t('Send to @app', {'@app': appname}), appFinish);
  //highlight file
  if (appFields['url']) {
    var filename = $('#'+ appFields['url'], (top.appiFrm||win).opener.document).val();
    imce.highlight(filename.substr(filename.lastIndexOf('/')+1));
  }
});

//sendTo function
var appFinish = function(file, win) {
  var win = top.appiFrm||win, doc = $(win.opener.document);

// Lets find out if the image is higher than allowed
	if(file['height'] > strMaxHeight)
	{
// Image is higher than allowed
	isHigher = 1;
// Calculate difference
	strHeightDifference = file['height'] - strMaxHeight;
// We need to resize image
	doResize = 1;
// Debug alert ignore
// alert("height - strMaxHeight : "+strHeightDifference);
	}
	else
	{
// Image is not higher
	isHigher = 0;
	}

// Let's find out if image is wider than allowed
	if(file['width'] > strMaxWidth)
	{
// Image is wider
	isWider = 1;
// Calculate the difference
	strWidthDifference = file['width'] - strMaxWidth;
// We need to resize image
	doResize = 1;
// Debug alert ignore this
// alert("width - strMaxWidth: "+strWidthDifference);
	}
	else
	{
// Image is not wider
	isWider = 0;
	}

// Debug alert ignore
// alert(" isHigher="+isHigher+" og isWider="+isWider);

// We need to calculate the resize factor
	if(isHigher == 1 && isWider == 1)
	{
// Both height and width are bigger than maximum allowed

// If image is both higher and wider than allowed we need to check
// Which difference is bigger so we can calculate the resize factor
// so that the aspect ratio is correct

// Debug alert ignore
// alert("Both are bigger");

// Let's check if Height difference is bigger than width difference
		if(strHeightDifference > strWidthDifference)
		{
// Height difference is bigger, so we need to calculate the resize
// Factor in relation to height
		isHeightBigger = 1;
		strResizeFactor = strMaxHeight / file['height'];
// Round the resizefactor to 1 decimal
		strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is bigger than width, resizefactor :"+strResizeFactor);
		}
		else
		{
// Height difference is not bigger, so we need to calculate the resize
// Factor in relation to width
		isHeightBigger = 0;
		strResizeFactor = strMaxWidth / file['width'];
		strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is smaller than width , resize factor  :"+strResizeFactor);
		}
	}
	else if(isHigher == 1 && isWider == 0) 
	{
// If image is only higher than allowed we need to calculate
// the resize factor in relation to the height
		strResizeFactor = strMaxHeight / file['height'];
		strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is only an issue ; /r/n resize factor :"+strResizeFactor);
	}
	else if(isHigher == 0 && isWider ==1)
	{
// If image is only wider than allowed we need to calculate
// the resize factor in relation to the width
		strResizeFactor = strMaxWidth / file['width'];
		strResizeFactor = Math.round(strResizeFactor*10)/10;
// Debug alert ignore
// alert("Width is only an issue ; \r\n resize factor :"+strResizeFactor);
	}


  for (var i in appFields) {

// if we are parsing the 'url' property field, we need to make a duplicate of the
// url in the strUrl variable so we can use it with the url2 property field
	if(i == 'url')
	{
	strUrl = file[i];
	}

// If we are working with the 'url2' property field, we need to remove the
// _thumb and _preview suffixes to point the link to the original image
	if(i == 'url2')
	{

// Lets check to see if there is "_thumb" in the url
		if(strUrl.indexOf("_thumb") > 0)
		{
		// Yup, this is a thumbnail so we need to remove "_thumb" from the url
		strUrl = strUrl.replace("_thumb", "");
		file[i] = strUrl;
// Debug alert ignore
// alert("image is thumbnail | new url:"+strUrl);
		}
// let's check to see if there is a "_preview" in the url
		else if(strUrl.indexOf("_preview") > 0)
		{
		// Yup, this is a preview, so we need to remove the _preview from the url
		strUrl = strUrl.replace("_preview", "");
		file[i] = strUrl;
// Debug alert ignore
// alert("image is preview | new url:"+strUrl);
		}
		else
		{
		// this is neither a thumbnail nor a preview, so we dont need to edit the url
		file[i] = strUrl;
		}
	}

// Let's check to see if there is a need to change the size
	if(i == 'width' && doResize == 1)
	{
// we are working with the 'width' file property, and we need to change it
	var newWidth = file[i] * strResizeFactor;
// Let's round it down so we don't end up with i.e. 120.23 and instead just get 120
	newWidth = Math.round(newWidth);
// Debug alert ignore
//  alert("old width="+file[i]+" | New width="+newWidth);
//
// Let's pass the new width to the form field instead of the old one
	doc.find('#'+ appFields[i]).val(newWidth);
	}
	else if(i == 'height' && doResize ==1)
	{
// we are working with the 'height' file property and we need to change it
	var newHeight = file[i] * strResizeFactor;
// Let's round it down so we don't end up with i.e. 120.23 and instead just get 120
	newHeight = Math.round(newHeight);
// Debug alert ignore
// alert("old height="+file[i]+" | new height="+newHeight);
//
// Let's pass the new width to the form field instead of the old one
	doc.find('#'+ appFields[i]).val(newHeight);
	}
	else
	{
// We are working with some other file property so we don't need to do anything
// Debug alert ignore
// alert("I'm doing this "+appFields[i]+" => "+file[i]);
	doc.find('#'+ appFields[i]).val(file[i]);
	}
// Originally the doc.find statement was outside the if statement, just leaving it commented out
// for future reference
//	doc.find('#'+ appFields[i]).val(file[i]);
	
  }
  if (appFields['url']) {
    try{doc.find('#'+ appFields['url']).blur().change().focus()}catch(e){};
    try{doc.find('#'+ appFields['url']).trigger('onblur').trigger('onchange').trigger('onfocus')}catch(e){};//inline events
  }
// I'm not sure exactly why this is needed,  but this triggers some javascript events on the 'url2' form field,
// which in our case is the txtLnkUrl field,  this is just a direct copy from the 'url' one except 'url'->'url2'
  if (appFields['url2']) {
    try{doc.find('#'+ appFields['url2']).blur().change().focus()}catch(e){};
    try{doc.find('#'+ appFields['url2']).trigger('onblur').trigger('onchange').trigger('onfocus')}catch(e){};//inline events
  }
  win.opener.focus();
  win.close();
};

There you have it.

Now the only thing users need to do to insert images is click the image button -> Browse server -> find or upload an image -> send it to FCKEditor and then press ok. Everything else is done automatically for them. Simple and efficient.

I just hope I didn't leave anything out in my guide, I've been doing this over a timespan of few days so it would be typical if I forgot something that makes this entire thing not work.