If you are creating a web-application which needs to send email created by the user using admin area of the application or needs to save dynamic template data in the database, then you would have to use some editor which must be user-friendly and takes all kind of input, for this you can use various plugins available on internet, one of which is ckEditor.

CKEditor is an open source, a ready-to-use rich text editor that can be easily integrated into most web applications.

Step 1: Download the ckEditor from its official website https://ckeditor.com/ckeditor-4/download/

download-ckeditor-for-asp-net-min.png

Extract the zip file which you have downloaded.

Step 2: Create a new ASP.NET web-project in your Visual Studio (File->New->Project-> ASP.NET Empty Web Application)

Name the Project as you like, I named it "CkEditorForASPNET", now add the extracted CKEditor folder in your web-application as shown below

ckedtior-for-asp-net-min.png

Step 3: Create a new .aspx page(TestingCKEditor.aspx) and add the necessary javascript file of CKEditor and jquery plugin to use it, as shown in below code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestingCKEditor.aspx.cs" Inherits="CkEditorForASPNET.TestingCKEditor" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CKEditor Test</title>

    <script src="ckeditor/adapters/jquery.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <asp:TextBox ID="txtCKEditor" runat="server" TextMode="MultiLine" Columns="60" Rows="10" class="ckeditor"></asp:TextBox>
        </div>
    </form>
</body>
</html>

Now, to add the ckEditor HTML editor for the above textbox use the jQuery code as below

 <script>
        $(document).ready(function () {
              //txtCKEditor is id of the textbox
            CKEDITOR.replace('txtCKEditor');
        })
    </script>

So the complete .aspx page code will be as below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestingCKEditor.aspx.cs" Inherits="CkEditorForASPNET.TestingCKEditor" ValidateRequest = "false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CKEditor Test</title>

    <script src="ckeditor/adapters/jquery.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div> CkEdtior Demo</div>
        <div>
             <asp:TextBox ID="txtCKEditor" runat="server" TextMode="MultiLine" Columns="60" Rows="10" class="ckeditor"></asp:TextBox>
        </div>
        <br/>
        <asp:Button ID="Button1" runat="server" Text="Button"  OnClick="Button1_Click"  />

        <asp:Label ID="Label1" runat="server" >

        </asp:Label>
        
    </form>
    <script>
        $(document).ready(function () {

            CKEDITOR.replace('txtCKEditor');
        })
    </script>
</body>
</html>

and code behind to test it will be as below

 public partial class TestingCKEditor : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        
        protected void Button1_Click(object sender, EventArgs e)
        {
            string str = txtCKEditor.Text;
            string str1 = Server.HtmlEncode(str);
            Label1.Text = str1;

        }
    }

that's it we are done.

Note: I have added ValidateRequest = "false" in the .aspx page to eradicate error like "A potentially dangerous Request.Form value was detected from the client" when submitting form from client side to C#.

Now, build your project and execute it in your browser, the output would be as below

ckeditor-for-asp-net-min.png

Gif output after building the project locally and testing it

testing-ckeditor-for-asp-net-min.gif

Another method for adding CKEditor in ASP.NET 

Well this method requires you to have dll of CKedtior to create your custom control, but you will still require to add .js file in the page where you need it, here are the steps

  • Download and decompress the .Net package from CKEdit site (3.6)
  • Download the latest version of the javascript files
  • Check that the samples provided with the .Net package work fine
  • Rename the ckeditor folder in the solution and copy the new one downloaded from the site
  • Clean the solution and rebuild the project, and check if it works fine
  • Replace the occurrences of the "kama" skin to the newer "moono" as the former one is replaced by the other in the 4.x version

The above method is used to integrate old .NET package with a new version of CKEditor(like 4.5.7).