Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ File Browser 3.0

A ColdFusion Image/File Browser for TinyMCE Or Use In Standalone

Project Description

CJ File Browser is a very basic, ColdFusion based, image/file browser implemented to be used with TinyMCE or in standalone mode. 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.

How To Use With TinyMCE

Download the files and place the cjFileBrowser folder in the plug-ins folder located within tinyMCE. Unlike previous versions, this version finally does away with relying on any "settings" file. All the settings are passed to the plug-in via the tinyMCE initialization script. Once you've installed the plug-in, you are going to need to initialize some variables for cjFileBrowser. This will be included in your tinyMCE initializations script. Typically, I initialize my scripts to only apply tinyMCE on specific <textarea>'s that have a specific class, like so:

tinyMCE.init({
    mode : "specific_textareas",
    editor_selector : "htmlEditorFileBrowser",
    theme : "advanced",
    width: 600,
    plugins : "table,save,contextmenu,paste,noneditable,cjfilebrowser",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    theme_advanced_buttons1 : "bold,italic,|,undo,redo,|,link,unlink,anchor,image",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    plugin_cjfilebrowser_browseurl : "<PATH_TO_TINYMCE>plugins/cjfilebrowser/cjfilebrowser.cfm",
    plugin_cjfilebrowser_assetsUrl: "<PATH_TO_MY_UPLOAD_FOLDER>",
    plugin_cjfilebrowser_fileExts: "jpg,jpeg,gif,png",
    plugin_cjfilebrowser_maxSize: 1500,
    plugin_cjfilebrowser_maxWidth: 450,
    plugin_cjfilebrowser_maxHeight: 450,
    file_browser_callback : "CJFileBrowser_tinyMCE_Callback"
});

The bold-italic items are what's necessary to initialize the plug-in. My tinyMCE.init has a lot more in it than what's listed above, but I wanted to give you a simple example on how to add the plug-in settings. (Be sure to add cjfilebrowser to the list of tinyMCE plug-ins.)

VariableDescription
plugin_cjfilebrowser_browseurlThe relative path to the plug-in.
plugin_cjfilebrowser_assetsUrlThe relative path to your media folder.
plugin_cjfilebrowser_fileExtsA comma separated list of file extensions to allow.
plugin_cjfilebrowser_maxSizeThe maximum file size in KiloBytes that the user can upload.
plugin_cjfilebrowser_maxWidthThe maximum width in pixels that an image can be. cjFileBrowser will scale images to fit this width.
plugin_cjfilebrowser_maxHeightThe maximum height in pixels that an image can be. cjFileBrowser will scale images to fit this height.
CJFileBrowser_tinyMCE_CallbackThis is the name of the callback function for the plug-in. Do not modify this.

And that's all you need to do to get cjFileBrowser working with tinyMCE. A little easier than the previous versions.

Standalone Mode

If you choose to use the browser in standalone mode, then you will need to make a few modifications. You are either going to have to disable the select button or write some code to handle the selection. In future versions, I'll probably give you the options to turn this off altogether.

Security

To ensure that the CJ File Browser doesn't allow unauthorized file viewing, uploading and deletion, I've provided a means to allow you to restrict these operations to particular directories. In the root of the plug-in folder there's a file called "security.xml". The XML structure is fairly straightforward.

<?xml version="1.0" encoding="UTF-8"?>
<cjFileBrowser>
    <directoriesAllowed>
        <directory>/cjFileBrowser2/test-images/</directory>
    </directoriesAllowed>
</cjFileBrowser>

You can add as many <directory> nodes as needed, but as of this time the plug-in is only setup to handle one directory per tinyMCE instance. So if you decide to have more than one CJ File Browser implemented on your site, you can provide all the authorized directories here and each instance will use this file to validate your paths. Hope that makes sense. If your using CJ File Browser in standalone mode, then it will still function the same way.

Conclusion

That's about it. If you have any questions, comments or problems using it, let me know below. But just so you guys know, I'm not going to bother making this work with Internet Explorer 6 or ColdFusion prior to 8. If you need this, your on your own. Good luck!