Adam Howitt's Blog

Nov 13
2008

TinyMCE ColdFusion Image Browser

I love tinyMCE but because I use ColdFusion I've not been able to use the built image browser.  The API provides the hooks required to roll your own so I figured someone else might have done the heavy lifting and sure enough, I found a CF based image browser plugin.

I installed Doug Jones' CF_iBrowser v1.0.4 to work with TinyMCE 3.2.1 in BlogCFC.  His instructions were excellent and you shouldn't have too many issues.  Things to look out for:
  1. At the time of writing the JavaScript function OpenFile in index.cfm doesn't trigger the onChange property for the imageURL field (at least in my browser) so I had to manually add the line
    srcWin.ImageDialog.showPreviewImage(fileUrl);
    before the
    window.close()
    line.  This manually calls the showPreviewImage function that sets the image dimensions, otherwise your image will be added with a height and width of 0px!
  2. If you are using BlogCFC v5.9.1.001, you'll need to manually comment out the image browser library since the setting for turning off the file browser didn't seem to work for me.
  3. Check to see that you don't already have a an option specified in the tinyMCE.init() code block - mine was set to the PHP based plugin that comes bundled for advimage.  Simply replace that value with the line in step 3 of Doug's instructions.
Overall, great experience with the plugin once I realized I was looking at the wrong tinyMCE.init block and kudos for Doug for a job well done!

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment] [Subscribe to Comments]
  1. Thanks for the shout out Adam!

    For those looking, I have an actual "plug-in" version up on the site now. It's still beta, and i haven't had time to write out instructions, but give it a try and let me know of any problems.

    You can get it here: http://www.cjboco.com/post.cfm/happy-new-year

    -Doug

  2. I just released version 3.0 of my CJ File Browser for ColdFusion. It’s free and I tried to make it so you can either modify or delve into the code to figure out how to make your own. Even though it was designed for ColdFusion, you could easily modify it to swap out the file handler engine (It’s uses a ColdFusion Component (CFC) to handle the file management, but the front-end interface is using AJAX calls through JavaScript). Here’s a brief list of all the features:

    * jQuery is handling all of the interface and controls. * A ColdFusion component (CFC) is handling all of the file management. (You could easily port this to something else) * An XML file is being used to handle security restrictions. * CSS is used to handle the look & feel * TinyMCE can be initiated with variables that are passed to CJ File Browser. * You can now use it in Standalone mode (you’ll need to tweak the code a bit)

    Hope you like. You can get it by visiting the project page here: http://www.cjboco.com/projects.cfm/project/cj-file-browser/

  3. Just to let you know, I released version 3.1. Major interface overhaul. More features, etc.

[Add Comment]