Installing FCKEditor to allow file or image upload (alt: APSB08-21)

[JonC]

For those sites that need to make use of the upload functions of FCKEditor, a separate installation of FCKEditor will be required for shared ColdFusion Hosting customers. We have outlined the steps needed to work with most scenarios below. First here are a few TIPS to make your hosted ColdFusion application more secure:

NOTE: On the download site, be sure to download FCKEditor, not CKEditor

- Keep your FCKEditor installation patched. Keep an eye on this page for new releases: http://ckeditor.com/download

- Name the FCKEditor folder something different, such as "wysiwyg" wich is what is used in the example to follow.

- And most important, do not allow uploads via FCKEditor without authentication. Taking this a step further don't make simple registration process to allow uploads, confirm the user is valid.

- Uploads should be kept out of reach, at the same level as your publicly accessible folder.

-------- ~~~~| Self install of FCKEditor |~~~~ --------

I will cover installation, configuration and a simple POST script to capture data from an FCKEditor enabled form.

1. Download & Install FCKEditor (http://ckeditor.com/download/)
-Unzip and upload to the root of your site, for Windows ColdFusion Hosting customers this is the "wwwroot" folder.
*IMPORTANT* -Rename the "FCKEditor" folder to "wysiwyg".
-Delete the "_samples" folder from within the "wysiwyg" folder & cleanup any other un-needed files from the FCKEditor install (optional).

2. Protect the "wysiwyg" installation with authentication.
-Links to authentication methods provided at the bottom of this article, please feel free to post your own methods (not revealing too much).

3. Configure FCKEditor to allow uploads.
-Create folder for "uploads", I chose "d:\home\yourdomain.com\wwwroot\my_uploads\"
-Edit file "\wysiwyg\editor\filemanager\connectors\cfm\config .cfm"
-Set Config.Enabled from false to true.

// SECURITY: You must explicitly enable this "connector". (Set enabled to "true")
Config.Enabled = true ;

-Set Config.ServerPath "d:\home\yourdomain.com\wwwroot\my_uploads\", save file.

// Use this to force the server path if FCKeditor is not running directly off
// the root of the application or the FCKeditor directory in the URL is a virtual directory
// or a symbolic link / junction
// Example: C:\inetpub\wwwroot\myDocs\
Config.ServerPath = "d:\home\yourdomain.com\wwwroot\my_uploads\" ;

-Set denied file extensions (Example below) for security measures, save file.

config.deniedExtensions["File"] ="html,htm,php,php2,php3,php4,php5,phtml,pwml,inc,asp,aspx,ascx,jsp,cfm,cfml,cfc,pl,bat,exe,com,dll,vbs,js,reg,cgi,htaccess,asis,sh,shtml,shtm,phtm";

-Edit file "\wysiwyg\fckconfig.js"
-Set the following variables to from 'php' ro 'cfm', save file.

// The following value defines which File Browser connector and Quick Upload
// "uploader" to use. It is valid for the default implementation and it is here
// just to make this configuration file cleaner.
// It is not possible to change this value using an external file or even
// inline when creating the editor instance. In that cases you must set the
// values of LinkBrowserURL, ImageBrowserURL and so on.
// Custom implementations should just ignore it.
var _FileBrowserLanguage	= 'cfm' ;	// asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage	= 'cfm' ;	// asp | aspx | cfm | lasso | perl | php | py

4. Add the editor to the page replacing <cftextarea richtext=true name="richtext">

<form method="POST" action="sampleposteddata.cfm">
</cfoutput>

<!--- Calculate basepath for FCKeditor. --->
<cfset basePath = "/wysiwyg/">
	<cfmodule
	template="/wysiwyg/fckeditor.cfm"
	basePath="#basePath#"
	toolbarSet=""
	instanceName="myEditor"
	value='<p>This is some <strong>sample text</strong>. You are using a href="http://www.fckeditor.net/">FCKeditor</a>.</p>'
	width="100%"
	height="200"
>

<cfoutput>
<br />
<input type="submit" value="Submit">
<hr />
</form>

5. Accepting POST data, input from the editor with be passed in variable "FORM.myEditor".

Authentication methods:
http://www.communitymx.com/abstract.cfm?cid=F3AAD
Remember me login (by Ben Nadel)

Code examples can be found in the _samples folder in the FCKEditor download and have been used for this tutorial.

This is a work around for shared ColdFusion 8 Hosting, which has the FCKEditor built in. Per the Adobe ColdFusion Security Advisory, FCKEditor uploads are disabled on all shared ColdFusion 8 servers: APSB08-21

[daniszwarc]

Hello Jon, I couldn't understand step number 4.
The subject says to replace the <textarea> tags by the <cfmodule...>, but it keeps giving me an error that the toolbar doesn't exist.

I'm using a default toolbar I've created but I have also tried with the default ones and even empty. Nothing happens, no toolbar is displayed.

What I'm doing wrong?


Thanks

[daniszwarc]

Hello again. Following the example Jon posted, I don't get any toolbar.
When I see the source code, It shows just a simple textarea, not a rich one.

Here is the link:

http://www.thiez.com/test.cfm

and this is my code:

<cfset basePath = "/wysiwyg/">
<cfmodule template="/wysiwyg/fckeditor.cfm"
basePath="#basePath#"
toolbarSet="MyToolBar"
instanceName="myEditor"
value=''
width="90%"
height="200"
> which is basically from his example.

Am I missing something?


Update from Hostek.com Staff, per customer's ticket reply:
"I'm noticing then that the problem is with Firefox for Mac, since I just tested in Chrome and you are right, it shows. Weird thing, because it doesn't display when I try the Coldfusion sample, but if I check the samples outside coldfusion, it shows properly in FF and Mac."

[jim]

The toolbar wouldn't show for me using xp and firefox 3.5.8 but worked fine on same machine using ie.

I found the answer/fix at: http://cksource.com/forums/viewtopic.php?f=5&t=17344

I was having trouble today with my install of FCK 2.6.4, after updating Firefox to 3.6.

I found a site (in German, had to run through babelfish) that had the fix, at least for the CF implementation. Likely if you are running FCK on a different platform, you can adapt the fix.

In the fckutils.cfm file, in that first function "FCKeditor_IsCompatibleBrowser", look for the line

stResult = reFind( "gecko/(200[3-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

and change it to

stResult = reFind( "gecko/(20[0-9][0-9][0-1][0-9][0-3][0-9])", sAgent, 1, true );

The original wouldn't match on a version date that was after 2009.

Now granted, the former would only match on 2003-2009, and the fix loses that "after 2003" bit, but it's a handy fix for the short term.

--- Snip ---

It can be simplified to:

stResult = reFind( "gecko/([0-9]{8})", sAgent, 1, true );

(we'll be ready for year 2100 too )

Works great now.

[Arturis]

Out of curiosity, I was wondering why it specifically states to use FCKEditor instead of CKEditor? Is there an incompatibility issue between the newer CKEditor and Hostek's setup?

-Arthur E. "Arturis" Orneck

[jakeh]

Arthur,

You can use CKEditor, but this post was created as a workaround for those already using the FCKEditor built-in to ColdFusion. To go with CKEditor you would need to follow the configuration instructions here: CKFinder 2.x ColdFusion Configuration

[jackpoe]

Thanks for the easiest and CORRECT set of steps to configure FCKeditor.
There are loads of incomplete and incorrect "instructions" out there.

One additional step that might help. In Config.cfm there is an option named Config.UserFilesPath that is set to /userfiles/ by default
I set this to the full URL of the site directly to the upload folder....best way is to use an application variable for this. Without this your editor will not show the uploaded images in the editor properly.