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 }

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

Comments (2)

|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!
- 0
- 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