fckeditor

Using FCKeditor with Asp.Net

FCKeditor (now known as CKEditor) is a javascript-based lightweight WYSIWYG (What You See Is What You Get) rich-text editor that can be used in web pages. It is an open-source project created by Frederico Caldeira Knabben way back in 2003. It is designed to make the text being edited to look more-or-less the same with how it will look like when published. A good example of a WYSIWYG text editor is what you get when you compose a new email message in GMail or when you try to create a new blog post in WordPressBlogEngine. 😀

It enables the web user to experience common text editing features (that were found only on desktops once upon a time) such as changing the font colors and highlights, find and replace, spell check, set text/paragraph justification, basic styling like bold, italics and underline. 😉

Before we get started, we need to download the necessary files:

  1. Main code – actual codes for the FCKeditor
  2. Assembly for .Net – Asp.Net control for easier integration

The FCKeditor is hosted at Sourceforge.

Click on the link and download the latest version of the FCKeditor main code (fig. 1) and FCKeditor.Net control (fig. 2.). Each has their own sub folder so you may have to browse through them to get to the actual .zip file. For this example, the versions that we got are 2.6.6 for the main code and 2.6.3 for the ASP.NET control.

fig. 1. FCKeditor main code

fig. 2. FCKeditor Control for .NET

Extract/uncompress these .zip files and remember where the uncompressed files are located. For this example, let’s put them in c:FCK so that the main code will be at c:FCKFCKeditor_2.6.6 and the FCKeditor Control for .NET will be at c:FCKFCKeditor.Net_2.6.3

Integrating it with a new project

  • Create a new web site project in Visual Studio 2008. We’ll call the sample project FCKeditorSample. (Creative names as always  :)) )
  • Right-click on the web site project and add the ASP.NET folder “Bin” (fig. 3.).

fig. 3. Adding the Bin folder

  • Right-click on the Bin folder and click “Add Existing Item” then browse to where you extracted the FCKeditor Control for .NET (c:FCKFCKeditor.Net_2.6.3binRelease2.0). Select the FredCK.FCKeditorV2.dll assembly file and click the Add button (fig. 4).

fig. 4. FredCK.FCKeditorV2.dll assembly file added to Bin folder

  • Go to where you extracted the FCKeditor main code (c:FCKFCKeditor_2.6.6) then right-click and copy the “fckeditor” folder. Go back to Visual Studio and right-click on the web site project and click paste (your Solution Explorer should look something like in fig. 5.).

fig. 5. Files of the main code added (click to enlarge)

  • Before we can use the FCKeditor control, we must register it in our application. We have two options to do this: a.) per page via register directive (see listing 1) or b.) per application via Web.Config file (see listing 2). 
<%@ Register TagPrefix="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" tagPrefix="FCKeditorV2" %>

listing 1. Register directive per page

 

If we are to use the per page method of registering the control, we must do so for every page the will use the FCKeditor in our application. While this works fine, maintenance becomes a problem especially if we have a lot of custom user controls. x_x

<pages>
 <controls>
  <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add namespace="FredCK.FCKeditorV2" assembly="FredCK.FCKeditorV2" tagPrefix="FCKeditorV2"/>
 </controls>
</pages>

listing 2. Registering the  control in the Web.Config file

 

If we use the second option, open the Web.Config file and locate the “controls” node under configuration <system.web> pages then create the “add” node similar to line 5 in listing 2. I prefer to use this method because you only need to do it once and every page in our application can use the FCKeditor. 🙂 or any other control for that matter.

  • After registering, we can now use the FCKeditor control like any other ASP.NET control. Open Default.aspx and modify it such that the form tag looks like this:
<form id="form1" runat="server">
 

  
  

</form>

listing 3. Using the FCKeditor control

 

We also need to specify the BasePath so that we know where the main code of the FCKeditor is located. The ~ (tilde) means that we resolve the path starting from the web application’s root path. It is a much easier way of handling paths instead of “..” all over our web application. 😉

  • Hit Run and after the web browser has launched, you’ll be greeted with the default FCKeditor tool set (fig. 6). 😀

fig. 6.Using the FCKeditor in ASP.NET

8. You can access the user’s input text with formatting by using the Value property of the control (listing 4).

lbDisplayLabel.Text = FCKeditor1.Value;

listing 4. Accessing the user’s formatted input

 

I hope this helps!