How to use FCKeditor in ASP.NET 2.0

FCKeditor is an open source WYSIWYG text editor that is often use with CMS applications. There are two versions of FCKeditor one is in Java and the other is for the .NET framework. In this tutorial I will show you how to use FCKeditor .Net in ASP.NET 2.0.

The first thing you need to is to download the control from source forge. Make sure you download the latest one.

There are two files that you need to download:

1. FCKEditor
2. FCKeditor.Net

After you have downloaded the two files now unzip the files and have it handy somewhere. You should have a folder fckeditor and a dll file FredCK.FCKeditorV2.dll. The DLL file can be found in the bin -> Release -> 2.0 folder. Obviously the 2.0 folder is for asp.net 2.0 and 1.1 is for asp.net 1.1.

Now create a new web application solution and add the FredCK.FCKeditorV2.dll to your reference folder. Copy the fckeditor folder that you have unzipped previously to your website folder.

fckeditor-folder

After you have done all that yo can begin to use the FCKeditor control. Just place this line of code in your aspx page.

    <FCKeditorV2:FCKeditor  ID="FCKeditor1" BasePath="/fckeditor/" runat="server" Height="400px">
    </FCKeditorV2:FCKeditor>

To get the value from the FCKeditor in the code behind file use FCKeditor1.Value property.

Example Code:

ASPX Page:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %>
    2 <%@ Register assembly="FredCK.FCKeditorV2" namespace="FredCK.FCKeditorV2" tagprefix="FCKeditorV2" %>
    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4 
    5 <html xmlns="http://www.w3.org/1999/xhtml" >
    6 <head runat="server">
    7     <title>Untitled Page</title>
    8 </head>
    9 <body>
   10     <form id="form1" runat="server">
   11     <div>       
   12         <asp:Label ID="Label1" runat="server" Text="Page Title"></asp:Label>       
   13     </div>
   14     <br />
   15     <FCKeditorV2:FCKeditor  ID="FCKeditor1" BasePath="/fckeditor/" runat="server" Height="400px">
   16     </FCKeditorV2:FCKeditor>
   17     <br />
   18     <asp:Button ID="btnSave" runat="server" onclick="Button1_Click" Text="Save"
   19         Width="71px" />
   20     </form>
   21 </body>
   22 </html>
 
 
Class File:

 

    4 using System.Data;
    5 using System.Linq;
    6 using System.Web;
    7 using System.Web.Security;
    8 using System.Web.UI;
    9 using System.Web.UI.HtmlControls;
   10 using System.Web.UI.WebControls;
   11 using System.Web.UI.WebControls.WebParts;
   12 using System.Xml.Linq;
   13 using System.Data.SqlClient;
   14 using System.Data.Sql;
   15 
   16 namespace Test
   17 {
   18     public partial class _Default : System.Web.UI.Page
   19     {
   20         protected void Page_Load(object sender, EventArgs e)
   21         {
   22 
   23         }
   24 
   25         protected void Button1_Click(object sender, EventArgs e)
   26         {
   27             string connStr = "Data Source=compserver;Initial Catalog=sample;User Id=sample;Password=sample";
   28             SqlConnection conn = null;
   29 
   30             try
   31             {               
   32                 string strInsert = "INSERT INTO Content(Page_Content) VALUES('{0}')";
   33 
   34                 conn = new SqlConnection(connStr);
   35                 conn.Open();
   36 
   37                 strInsert = string.Format(strInsert, FCKeditor1.Value);
   38 
   39                 SqlCommand cmd = new SqlCommand(strInsert, conn);
   40                 cmd.CommandType = CommandType.Text;
   41                 cmd.ExecuteNonQuery();               
   42             }
   43             catch (Exception ex)
   44             {
   45             }
   46             finally
   47             {
   48                 conn.Close();
   49             }
   50         }      
   51     }
   52 }

Like this Tip?

Now try to execute your code and see if it works.

Comments (12)

|203.167.72.xxx |2010-06-02 08:33:59 ian - problem getting value

Hi, I couldn't get the value, I followed what you did but somehow the Value always appears to be "", empty. I tried putting a value from a textbox to the ckeditor, it works, but when I'm trying to put the value of the ckeditor to a textbox, it doesn't work. The value is always empty. Do you know why this happens?

Thanks!
- 1
- 0
Quote

|210.8.191.xxx |2010-06-03 09:47:43 qv

In Debug mode have you check to see if FCKeditor1.Value has any value?

Does your textbox support multiple line or a single line?
- 0
- 1
Quote

|212.123.153.xxx |2010-10-06 08:26:01 RvH - same here

Same here I can put some value into the editor but after I changed it I can't get it back. I get the old value.

Some one?
- 0
- 0
Quote

|212.123.153.xxx |2010-10-06 08:27:21 RvH

I have this problem with other editors to, maybe this isn't possible and you have to buy a commercial one?
- 0
- 0
Quote

|210.8.191.xxx |2010-10-08 05:38:18 admin

I work fine for me. You just have to check your code. Attach your code so we can checkout what's wrong.
- 0
- 0
Quote

|61.9.12.xxx |2010-10-08 10:31:23 Jing Daradal

the BasePath should be "~/fckeditor/" to avoid server error in '/xxxx'
- 0
- 0
Quote

|202.53.166.xxx |2010-11-01 11:44:21 Awnik Raihan - Something wrong in .net wrapper

I get the same issue the FCKeditorBody.Value is always returning empty string and so my mail body is always empty. And more important thing is it happens in IE 7/8. FF works fine. Tested in debug mode.

public string Body
{
get
{
return FCKeditorBody.Value;
}
set
{
FCKeditorBody.Value = value;
}
}

Another thing I found out is that, if I assign some hard code value from code like this,

FCKeditorBody.Value ="Why don't you work stupid editor."

Then it keeps that value through out the life cycle. Any value change from the UI does not effect the content of FCKeditorBody.Value.

It looks like to me that something wrong with the .net wrapper of the editor, probably it is conflicting some of asp.net ajax js.

As the non .net wrapped version works well with IE.
- 0
- 0
Quote

|202.53.166.xxx |2010-11-10 08:24:47 Awnik Raihan - update panel is the culprit

Got the thing. The update panel is causing this. Without update panel it works fine.
- 0
- 0
Quote

|112.110.144.xxx |2011-03-20 06:19:51 Anonymous
- 0
- 0
Quote

|122.177.79.xxx |2011-08-06 06:49:07 mohd sharib khan - fckeditor

i am using fckeditor to upload a file.
file upload in database but i want upload a file in solution explorer.how to upload a file in solution explorer and how to display a file in asp.net 4.0.
- 0
- 0
Quote