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.

 
avatar
while i run the peoject it gives me the error
The resource cannot be found
Requested URL: /fckeditor/editor/fckeditor.html
after that please tell me sir how i write the mathematics equation in it
VOTES:-1
avatar
It looks like some recent update to IE has caused the paste from work functionality to break, giving it the runtime erroe: Invalid calling object.

The functionality still works in Chrome and Firefox. Any ideas?
VOTES:0
avatar
I followed your direction but for some reason whenever I click the Image button or the Add link button I get this error message.

Microsoft JScript runtime error: Invalid calling object
VOTES:0
avatar
Thanx.!!
i have solved my problem ..But still i cant retrive fckeditor value coz my fckeditor is hide..when click on button it will come..

thanx in advance.!!!
VOTES:0
avatar
Page.ClientScript.RegisterOnSubmitStatement(
txttestimonial.GetType(),
\"editor2\",
\"FCKeditorAPI.GetInstance(\'\" + txttestimonial.ClientID + \"\').UpdateLinkedField();\");

use this in page load fck will work
VOTES:-1
avatar
Can Anybody tellhow to use FCK Editor if You can then Reply its Urgent
VOTES:1
avatar
;)) :x :pirate: :?: ;) :sleep: :) ;)) :no-comments:
VOTES:1
avatar
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.
VOTES:0
avatar
:love:
VOTES:0
avatar
Got the thing. The update panel is causing this. Without update panel it works fine.
VOTES:0
* iOS Development * OS X * Product Review