Progressive Overload

If you ever find yourself developing some app that takes user input for content (blog, forum, cms, etc) you will (more than likely) end up shopping for some kind of text editor for your UI. Most people who have encountered this will have come across FCKeditor and TinyMCE.

These two editors work great and are very simple to implement in their default configurations, but start adding in image upload/browsing support and it (while still not being difficult) can be a hurdle for some.

- FCKeditor comes packaged with everything you could possibly need to enable file/image/etc upload and browsing BUT FCKeditor comes pacakged with everything....etc. It seems to be a much 'heavier' editor, in my opinion. Slower to load, and it also has a heavier 'look' right out of the box (it can be skinned).

- TinyMCE is a great editor, and one we use most of the time. One thing you will find if you decide to go with TinyMCE, it does not come pre-packaged with any file manager solution. Enter CFFM. An open source ColdFusion File Manager.

CFFM is very easy to integrate, as well as quite straightforward to customize to your own implementation. The bulk of what it takes to integrate CFFM into your TinyMCE install can be found here and really just boils down to a few extra lines of javascript. (examples from the opensourcecf example site)

//add the function to call CFFM

function cffmCallback(field_name, url, type, win){
// Do custom browser logic
url = '/cffm/cffm.cfm?editorType=mce&EDITOR_RESOURCE_TYPE=' + type;
x = 700;
y = 500;
win2 = win;
cffmWindow = window.open(url,"","width="+x+",height="+y+",left=20,
top=20,bgcolor=white,resizable,scrollbars,menubar=0");
if ( cffmWindow != null )
{
cffmWindow.focus();
}
}

//add that function to your tinymce script

//A BUNCH OF STUFF WAS DELETED FROM THE EXAMPLE JUST TO KEEP IT READABLE SEE HERE AND VIEW SOURCE TO SEE FULL EXAMPLE

tinyMCE.init({
mode : "textareas", theme : "advanced",
file_browser_callback : "cffmCallback"
});