Wednesday, September 3, 2008

Integrating FCKEditor with COLDFUSION MX on LINUX server

A few days back I got an project which required integration of FCKEditor. They are using Coldfusion MX, First I thought that the integration would be pretty straight forward, but I landed in a few issues, like sharing variables, custom upload directories etc. Below are things that I came across

Server Details - Linux OS, ColdfusionMX on JBOSS, FCKEditor v 2.6.3.

FCKEditor integration is simple, download FCKEditor form extract the zip file to your webroot directory, say under fckeditor and that's all. If you don't extract it to webroot, then you can map it in coldfusion administrator, In my installation I have placed it under webroot, by the name of 'fckeditor'.

Then within your form where you want the editor, you just have to put the code

<cfmodule template="/fckeditor/fckeditor.cfm" height="400" width="750" basepath="/fckeditor/" instancename="FckTest">

Great, I was so happy to see the new editor and working on all the browsers, including safari :-), Now comes the tough part.. which was IMAGE uploading. The problem with the server was that they were uploading images to different folders. Fck is not configured to do this, it can only by default upload all images to a single folder. Then they were getting the folder details dynamically through a configuration file. Fck will NOT get any variables that are defined in your application, it is a separate stand alone application.

So my first task was to make the variables available to Fck and then work on changing the image upload.

To get the variables of your application available to Fck, just create an Application.cfm file in your fckeditor directory and just have in it include your application config file and make session management true, so that the session variables are also available for it, below is the example of Application.cfm file(NOTE the capital 'A' as the server is LINUX).

<cfinclude template="/conf/systemconf.cfm">
<cfapplication sessionmanagement="true" name="webcentral">
<cfset dsn=" session.dsn">

That's ALL so now you have the session variables and the config variables available to FCKEditor, great. Now you need to make some changes for configuring the FCKEditor so that it can upload images to different directories.

1. Change the following in fckconfig.js file

var _FileBrowserLanguage = 'cfm' ;

var _QuickUploadLanguage = 'cfm' ;

2. Open /fckeditor/editor/filemanager/connectors/cfm/config.cfm, add the following in the config file, just below

Config.UserFilePath = 'http://path to the images folder'

Config.UserFilesAbsolutePath = 'Relative path to the directory where the images are to be uploaded'...... THIS is NOT there in the file by default and you have to add it

Then Change the following

Config.FileTypesPath["Image"] = Config.UserFilesPath';
Config.FileTypesAbsolutePath["Image"] = Config.UserFilesAbsolutePath ;

Now you are done !!!!!!!!! Reload the page, it is very important to clear the cache of the browser otherwise you will not see the changes.

In Linux you will also have to change the SPELL CHECK, as it is configured for windows, I will post the steps for that in my next blog.