FCKEditor

Posted on Feb 17, 2005

For a recent project at my new employer I have been evaluating options for wysiwyg editors to replace KTML. I have alot of experience using editors (I have probably tested or used 10-15 of them usually with some level of disappointment). My initial recommendation was SPAW which is open-source and available through SourceForge. However, SPAW is IE only and we needed Mozilla/Firefox support, therefore I decided to finally test the FCKEditor which is also open-source and available through Sourceforge but does support Mozilla/Firefox.ut of the box, the FCKEditor was easier to set up than SPAW as there are very few settings that need to be changed. The only thing that you will need to do is to change the connector for the image/file uploading feature. It defaults to the asp connector, so you need to change the following code in fckconfig.js

// Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/cfm/connector.cfm" ;
// FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/asp/connector.asp" ; //FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/asp/connector.asp&ServerPath=/CustomFiles/" ; //FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/aspx/connector.aspx" ; //FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ; FCKConfig.LinkBrowserWindowWidth   = screen.width * 0.7 ;   // 70% FCKConfig.LinkBrowserWindowHeight   = screen.height * 0.7 ;   // 70%
// Link Upload FCKConfig.LinkUpload = false ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + "filemanager/upload/aspx/upload.aspx" ;
FCKConfig.LinkUploadWindowWidth      = 300 ;
FCKConfig.LinkUploadWindowHeight   = 150 ;
FCKConfig.LinkUploadAllowedExtensions   = "*" ;      // * or empty for all FCKConfig.LinkUploadDeniedExtensions   = ".exe .asp .php .aspx .js .cfm .dll" ;   // empty for none
// Image Browsing FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/cfm/connector.cfm" ;
// FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/asp/connector.asp" ; //FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx" ; //FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ; FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ;   // 70% ; FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ;   // 70% ;
Obviously, if you choose, you can remove the commented out alternative connector strings.

One issue I ran into is that the project I was working on needed to be able to assign different image/file upload locations to different instances of the FCKEditor. This presented a problem since the image manager was designed to use the application or server scope to assign the location (and it didn't make sense and was bad practice to keep reassigning them within the same application). Since the filemanager is not built in ColdFusion itself, there was no simple way to pass the location using the instance of the FCKEditor component. So I hacked together a solution (one I hope to fix as I don't like the solution) which was just to stick the location in the session scope and reassign it on each page calling the editor. To do this you need to modify connector.cfm (under filemanager/browser/default/connectors/cfm) as follows (lines 42-48):

<!--- modified by Brian Rinaldi
    the intent here is to allow you to specify different paths for different instances of the editor
    session scope will override all other scopes ---->
<cfif isDefined('SESSION.userFilesPath')>
   <cfset sUserFilesURL = SESSION.userFilesPath>
<cfelseif isDefined('APPLICATION.userFilesPath')>
   <cflock scope="Application" type="readonly" timeout="3">
      <cfset sUserFilesURL = APPLICATION.userFilesPath>
   </cflock>
<cfelseif isDefined('SERVER.userFilesPath')>
   <cflock scope="SERVER" type="readonly" timeout="3">
      <cfset sUserFilesURL = SERVER.userFilesPath>
   </cflock>
<cfelse>
   <!--- :: then use default :: --->
   <cfset sUserFilesURL = "/UserFiles/">
</cfif>

If I get the time to fix this hack, I will post my improved solution. If anyone knows a better solution, please recommend it.

Comments

Antonio Maxxanti I have a different solution for uploading files in a different root. Nice if your fkceditor resides in a different root (f.i.: cms in www.xxxxxx.xx/cms and actual site in www.yyyy.yy)

- in your application.cfm create a variable called application.myroot and set it with full path (f.i.:e:\inetpub\wwwroot\www.yyyy.yy\&quot;)

- in connector.cfm replace line 69 with
sRootDir = replace( application.myroot, &quot;\&quot;, &quot;/&quot;, &quot;ALL&quot;);

That's it.

Antonio.

Posted By Antonio Maxxanti / Posted on 07/12/2005 at 3:32 AM


Write your comment



(it will not be displayed)





About

My name is Brian Rinaldi and I am the Web Community Manager for Flash Platform at Adobe. I am a regular blogger, speaker and author. I also founded RIA Unleashed conference in Boston. The views expressed on this site are my own & not those of my employer.