Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ File Browser 1.0.4

A ColdFusion Image/File Browser for TinyMCE

Project Description

CJ File Browser is a very basic, ColdFusion based, image/file browser implemented to be used with TinyMCE. If you don't know what TinyMCE is, it's one of the best web based Javascript HTML WYSIWYG editor out there. It's simple to use and easy to implement, but they never had any decent documentation on how to incorporate an image browser using ColdFusion.

The files can easily be modified to fit your specific needs. And if you so desire, you could probably use this with FCKEditor as well, but you will need to figure this one out on your own.

Known Issues:

None that I'm aware of yet. (Well three, but I fixed them!)

How To Use:

Download the source and then place "cj_filebrowser" folder on your web server.

You will need to update the "_setup.cfm" file, located within the folder, with your custom directory path settings (Be sure to include the trailing "/" or "\"):

<cfset dpath = "C:\MyServer\MyRoot\TestDirectory\">
<cfset dpath_web = "http://www.MyServer.com/TestDirectory/">

Change the dpath and dpath_web variables to point to your directory on the server that you wish to allow people to upload files to.

At this point, you need to tell TinyMCE to use cf_ibrowse as your file handler. To do this, add this line of code within your tinyMCE.init() container:

file_browser_callback : "ibrowseCallback",

Finally, you need to add this javascript function after the declaration of tinyMCE.init(). This is the image handler function that tells tiny_mce to use cf_iBrowser as the custom image file handler. Be sure the url variable is a valid relevant path to the cf_ibrowser_v1.0.4 directory, this path needs to be relevant to the file using tine_mce! If you change the name of this directory, be sure to update the code to reflect your changes:

function ibrowseCallback(field_name, url, type, win) {
    url = 'cf_ibrowser_v1.0.4/index.cfm?editorType=mce&EDITOR_RESOURCE_TYPE=' + type; 
    win_ref = win; // not sure why this works for IE, but it does. 
    win_x = 700; win_y = 500; 
    // adjust these variables to fit your desired window size 
    cffmWindow = window.open( 
        url, 
        ,"width="+win_x+",height="+win_y+",left=20,top=20,bgcolor=white,resizable,scrollbars,menubar=0" 
    ); 
if ( cffmWindow != null ) { cffmWindow.focus(); } }

Release Notes

This is meant to be a starter file so you can learn how to implement the file browser. It has the bare minimum to function. This means it works, but is not meant to be a final solution by any means.

The download file also includes a CF5 friendly version as well.