couldn't skate by with a marginally functional FCKeditor

The project I keep blogging about was a self-built CMS. It allowed administrators to edit the content of the web site within the FCKeditor which is a wysiwyg HTML editing tool that dresses up what is otherwise a textarea type input to look like so:

At http://ckeditor.com/download one may download the tool which is apparently a depreciated version of CKeditor. I picked FCKeditor over its baby brother as I've seen it work firsthand before (although I had not done the implementation myself). For the most part it does what it does by way of JavaScript and just, as mentioned, dresses up a textarea to allow persons who don't know HTML to write HTML wysiwyg-style. From the initial download I placed at /Scripts/wysiwyg/ the core files of fckconfig.js, fckeditor.js, fckpackager.xml, fckstyles.xml, and fcktemplates.xml and a folder titled "editor" full of numerous other supporting files for the tool. I did a Google search for how to wire up the tool in an ASP.NET MVC application and, based on my findings, I got it mostly working without too much effort.

When defining the specs for the project, Launch Marketing and I demoed an older project from 2007 which used the now-antiquated BlueShoes editor and set the expectation with the end client that one would be able to create basic HTML and input an image into the HTML based upon images manually placed upon the end client's server. (I planned to implement BlueShoes before I realized it was outdated and I didn't recall a way to upload images within BlueShoes.) The plan was not to build out the uploading of files or the browsing for files at the server by an automated means.

Administrators still needed to be able to add images via the FCKeditor. How does one do so? Well, the leftmost icon on the fourth row of the editor above opens this window:

Ah, hah! An administrator can just type in the URL of the manually placed image and the agreed to specifications will be met!

Did you notice the button which says "Browse Server" like I did? It would be neat if that just worked but unfortunately it threw errors like this one:

Well, it doesn't really have to work, right? The project scope states...

Maybe you see where this is going: The end client noticed the "Browse Server" button too and argued that it should work.

I had hoped I could skate by with things as they stood. My instincts now told me I shouldn't try to skate anymore.

Getting the FCKeditor working completely with upload and browse capabilities was really painful as I could not find any good blog posts to explain what I was missing. I hope this serves as the blog post I couldn't find.

1. Biggest thing: Most of the FCKeditor does what it does with JavaScript, but you will have to implement something server-side language specific to empower uploading and browsing. Don't waste time searching through the JavaScript for what is wrong. You can start there, but you won't find all of the answers there and you will waste time assuming all of the answers are there. (There is an old joke about the word assume.)
    


2. Following the path I took, I assumed too much and first started digging through the existing code. In fckconfig.js I found a place to specify the base URL for the site. This is something that does need to be configured.
    


3. In fckconfig.js I also found a place to specify the scripting language. (Why would that be important???) I set the page extensions to .aspx. This too is something that does need to be configured.
    


4. /Scripts/wysiwyg/editor/filemanager/connectors/aspx/config.ascx was found in the folder titled "editor" and inside were variables for defining the file paths where FCKeditor will try to upload files to. I modified the paths into something sane.
    


5. In config.ascx there is also a CheckAuthentication() method which returns false by default. As long as it returns false then config.ascx (the facilitator for uploading and browsing) is worthless. That said, I've read numerous blog postings which caution against simply returning true here suggesting strongly that developers write some sanity checking to see if a user has permissions to make edits before returning true.
    


6. The file features still didn't work after the five steps above. What was I missing? It turns out that there is a second separate download at http://ckeditor.com/download for enabling the FCKeditor in ASP.NET. One should download the download. The contents of the .zip file look like so:
   
   
    


7. I dumped everything into the root of my UI save for the "bin" folder. I tried to build. AssemblyInfo.cs caused exceptions. I just deleted the file. In the end, I didn't need it.
    


8. I found in the "FileBrowser" folder Config.cs which had a lot of variables to set which looked comparable to those in config.ascx. It seems config.ascx's stuff overrides that of Config.cs by default however, and I didn’t need to tweak Config.cs whatsoever.
    


9. Integration with .NET requires three <appSettings> keys in Web.config which look like this:
   
   <add key="FCKeditor:BasePath" value="~/Scripts/wysiwyg/editor/"/>
   
   <add key="FCKeditor:UserFilesPath" value="~/Images/"/>
   
   <add key="FCKeditor:AutoCompleteAbsoluteURL" value="1"/>
    


10. The keys need to be set properly.
     

On the other side of the ten steps above everything worked!

Skate or Live!