Custom Upload Paths in FCKEditor with ColdFusion

For some of my more recent projects I've needed to integrate FCKEditor into the system, and while FCKEditor is great, it lacks the ability to easily specify a custom upload path, other then through the configuration files. I didn't find a way around that, but I did find a way to to get FCKEditor to support multiple, dynamic file locations. Click More read on.

For this example, I'm using FCKEditor 2.6.4 with ColdFusion 8.01 on a Windows environment.

My situation is this: in the project users can use FCKEditor to upload files to the /uploads/ folder of their site, for example www.example.com's upload path is www.example.com/uploads/. FCK Editor is designed to handle this, and it can be setup by going to fckeditor/editor/filemanager/connectors/cfm/config.cfm and setting your Config.ServerPathvalue:

...
// Use this to force the server path if FCKeditor is not running directly off
// the root of the application or the FCKeditor directory in the URL is a virtual directory
// or a symbolic link / junction
Config.ServerPath= "";
...

Very simple. The wrinkle is that in my application, the editor runs in one location, while the files can be stored in multiple locations. For example, if the editor is located at editor.example.com, the actual uploads might be at www.example.com/uploads, www.example2.com/uploads, and www.example.com/subsite/uploads/. This is a situation that FCKEditor doesn't handle so well.

The key to solving this problem is that FCKEditor's configuration is loaded each time you create an instance of that information. That means if you make the configuration rely on a dynamic value that is set on each page load, and FCKEditor will get that new information each time. So if we go back to our config.cfm file, we can set the following:

...
Config.ServerPath = "#session.sitepath#\uploads\";
...

And as long as we update the session.sitepath value before creating the FCKEditor instance, the system will remain up to date. We have to use the session scope for this value because FCKEditor spawns the actual file browser in a separate window, and so variables and request scope just won't cut it. We could have used a cookie, but then we'd have server path info running around in use cookies, and that just wont do.

Now, we have our config.cfm ready to accept dynamic values, lets show how to use it:


<!--- Set this value dynamically --->
<cfset session.sitepath = "\\server\websites\www.example.com\" />

<cfmodule
    template="/fckeditor/fckeditor.cfm"
    basePath="/fckeditor/"
    instanceName="myEditor"
    value='<p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>'
    width="100%"
    height="200"
>

Just set session.sitepath equal to the value for the site you are working with, and you'll find that your editor browsers there quite nicely. Still one problem though: FCKEditor builds all links to be relative to the Config.UserFilesPath value from your config.cfm file. This means that even if you are looking at www.example2.com/test/site/uploads/, all the links will be made to "/uploads/", which will resolve to www.example2.com/uploads. To make this dynamic, we are going to have to apply the same technique as before. Update your config.cfm file to look like this:

...
// Path to uploaded files relative to the document root.
Config.UserFilesPath = "#session.urlpath#/uploads/" ;

// Use this to force the server path if FCKeditor is not running directly off
// the root of the application or the FCKeditor directory in the URL is a virtual directory
// or a symbolic link / junction
Config.ServerPath= "#session.sitepath#\uploads\";
...

And then update our FCKEditor declaration:


<!--- Set these values dynamically --->
<cfset session.sitepath = "\\server\websites\www.example.com\test\site\" />
<cfset session. urlpath = "/test/site" />

<cfmodule
    template="/fckeditor/fckeditor.cfm"
    basePath="/fckeditor/"
    instanceName="myEditor"
    value='<p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>'
    width="100%"
    height="200"
>

After this, it should generate links relative to your actual site.

My setup is slightly different due to a final, site specific complication. If this doesn't work exactly, let me know and I'll try to figure out whats going on.

 

Comments

Jeff Gould's Gravatar Hi Jon,

Great article. The problem I'm having is that the fckEditor is in a directory that I map to virtually in IIS. Therefore, the config.cfm file can't use the Session variable I set.

Any ideas?

Thanks.

Jeff
Jon Hartmann's Gravatar I this case could you use a cookie? You'll have to have something that will persist in different requests, so session, cookie, and client are maybe your only options.
souresh banerjee's Gravatar The article is quite helpful. But I am facing a bigger problem. When I am trying to upload a file, on opening the wizard i get the following error

XML request error: Internal server Error(500)

In the ROOT CAUSE it is writing:-
java.util.MissingResourceException : Can't find the resource key "CfmServlet.accessDenied" in base name coldfuion/resource.properties

Can you please suggest me a way to get out of this mess
Jon Hartmann's Gravatar @Souresh, I've not personally encountered that problem, but I did some googling and found the following link:

http://www.petefreitag.com/item/718.cfm

It sounds like perhaps you've updated your installation with a hotfix (if this problem just showed up), or perhaps the security on your server was changed. I hope that helps.
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.