Print Add to Favorites   Back
Enable File upload in FCKEditor on ColdFusion 8.0.1


Article Information
Article ID: 12
Author: Greg Hedgepath
Created: 7/6/2008
Modified: 7/8/2008
Views: 9,967
As most of us know, the file, image or swf upload is disabled in the rich text editor available as a part of the Ajax support in ColdFusion 8. The FCKeditor, the rich text editor integrated in ColdFusion 8, allows such an upload. By default, this is disabled by ColdFusion to prevent security issues that might arise. But you may still want to use this feature provided supported by FCKeditor. This post will detail how this can be done in easy steps.

<cfform>             
                 <cftextarea richtext=true name="richtext01?/>
</cfform>

This will give out the rich text editor as we know. More details about the usage of the tag can be found here.
Now to enable upload functionality.
Step 1 : Add the entries to the toolbar in fckconfig.js
ImageButton, Link, Unlink, Image, Flash
Add only the entries that are required iamong the above ones onto the fckconfig.js present under /CFIDE/scripts/ajax/FCKeditor/ directory.
Here's how to add the entires. 
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','HiddenField'],
['ImageButton','Link','Unlink','Image','Flash'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Anchor'],
['Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;

Step 2 : Set _FileBrowserLanguage and _QuickUploadLanguage in fckconfig.js
Find _FileBrowserLanguage and _QuickUploadLanguage properties and set them to cfm.
var _FileBrowserLanguage = 'cfm';
var _QuickUploadLanguage = 'cfm';

Step 3 : Copy the cfm files into the directories under FCKeditor
Download fckcfms.zip
Extract it.
Copy config.cfm and connector.cfm under connectors/cfm into /CFIDE/scripts/ajax/FCKeditor/editor/filemanager/browser/default/connectors/cfm/ directory.
Copy config.cfm and upload.cfm under upload/cfm into /CFIDE/scripts/ajax/FCKeditor/editor/filemanager/upload/cfm/ directory.

Step 4 : Set the enabled property to true in both the config.cfm files copied  
browser/default/connectors/cfm/config.cfm
config.enabled = true;
upload/cfm/config.cfm
config.enabled = true;


Step 5 : Create directories under the upload directory.
The config.cfm under the upload directory has a property called userFilesPath which points to the directory where the uploaded files will be stored.
config.userFilesPath = "/userfiles/";
Under this directory create folders Image, File and Flash to support upload of image, file and flash files respectively.
There are a whole lot of config properties in the two config.cfm files which can be used to set everything from paths to file formats supported.
 
And that's it! You can now start using the upload functionality in the ColdFusion rich text editor.

 Thanks to Terry at it-werks.com for locating this tip.


This URL: http://ahphosting.net/support/Customer/KBArticle.aspx?articleid=12