Often in a web application, I’ve found the need to let a non-technical user enter rich HTML style text into a form or control. I’ve been working on a medium scale application in ASP.NET MVC for the last few weeks and found myself needing the ability to do just this. In the past I’ve used the FCKEditor to do just this. I like this editor over many of its competitors because it includes the ability to upload files and images directly instead of having a third party program to do this. Note that in the newest version (renamed CKEditor 3.0) the file browser component has been split into a separate pay component.
I spent some time online and found a few articles on doing this. One I found on CodeProject was a bit outdated, but had some good information and a blog entry by Stefan Kamphuis had a good and working implementation, but didn’t cover all the features of the editor. It took me a couple of days of off and on work to get everything working so I’m going to document the process for my own reference and to help anyone else trying to do this.
As I mentioned above, the file browser component is now a pay component in the newest version so we’ll be using the latest in the 2.x line, FCKeditor 2.6.4.1. You’ll also need the FCKeditor.Net 2.6.3 package both of which can be downloaded from the CKEditor web site. Unzip both into a directory.
First we’ll create a blank ASP.NET MVC application in Visual Studio 2008 and get the editor control working . Copy the fckeditor folder that you unzipped from the FCKeditor_2.6.4.1.zip package into your application. I like to create a folder under Content called js and then place the fckeditor folder in there. You can delete everything out of this directory except the editor subfolder and two files: fckconfig.js and fckeditor.js files.
Next open up the Index.aspx file under our Views / Home folder. We’ll start by adding a textbox to this view that will become our rich text box. Add this line to the page.
<%= Html.TextArea("fckeditor", "", new { @name="fckeditor" })%>
Note that we are setting the name of the control to match the ID which is important.
Next we need to add a reference to the JavaScript files that we added to our project that actually implements the rich editor. This is done by adding the following line somewhere on the page.
[js]<script src="<%= Url.Content("~/Content/Js/fckeditor/fckeditor.js") %>" type="text/javascript" ></script>[/js]
And now we add the script to replace our standard text editor with the rich editor. Add this to the page below the script call above.
[js]
<script type="text/javascript"> window.onload = function() { var sBasePath = ‘<%= Url.Content("~/Content/Js/Fck/") >’;
var oFCKeditor = new FCKeditor( ‘FckEditor1’ ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ReplaceTextarea() ;
} </script>
[/js]
By default the framework will throw an error if you submit the form as it is now. The error “A potentially dangerous Request.Form value was detected from the client” is telling you that one of the items on the form contains HTML characters. To stop this, we need to turn off this checking. The easiest way to do this is by adding the following attribute to the action on the controller:
[csharp][ValidateInput(false)][/csharp]
At this point we have a rich control that can post text back. Next let’s get the file browser and upload component working. First we add a reference to the asp.net library that we also downloaded. There are several files in the zip file, but the file we need to reference is the FredCK.FCKeditorV2.dll located in binRelease2.0. This file implements the server logic.
Next we need to create a folder that will hold the content that users will be allowed to upload. I’m going to create this folder under the Content folder and call it usercontent. This folder must be granted the appropriate permission if you’re going to allow users to upload. Under most newer web servers giving the Network Service read/write/modify permission to the folder will do this.
Now back in our fckeditor folder we need to modify the fckconfig.js file to tell it that we’re going to use the ASP.NET server side component that we just referenced. Look for the two lines:
[js]
var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php | py
[/js]
and change them to
[js]
var _FileBrowserLanguage = ‘aspx’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘aspx’ ; // asp | aspx | cfm | lasso | perl | php | py
[/js]
Now we need to configure the server component to set up some security and to let it know where we want the content to be located. The file that we need to find is located under the fckeditor folder in fckeditor/editor/filemanager/connectors/aspx named config.ascx.
First we need to modify the CheckAuthentication() function to control who we want to use this component. You can simply change the function to always return true, but as the comments note, this is a really bad idea and will basically let anyone upload content to your site. That’s just begging to be hacked. More likely you will only want certain users or certain roles to be able to do this. You could also check a user’s role or do any checks that you want and return true or false as needed. For example if you want to allow any authenticated user then we can change the line to:
[csharp]return HttpContext.Current.Request.IsAuthenticated;[/csharp]
This will return true for any users who are logged in and false for anonymous users.
Lastly we need to set where our content will be located (the folder that we created a little earlier) The two lines that we need to change are:
[csharp]UserFilesPath = VirtualPathUtility.ToAbsolute("~/Content/usercontent/");[/csharp]
and
[csharp]UserFilesAbsolutePath = HttpContext.Current.Server.MapPath("~/Content/usercontent/");[/csharp]
There are some other settings here that you can change to control where and what users can upload, but this should get the basics of the editor working.