Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

CKEditor in ASP.NET Without AJAX

0.00/5 (No votes)
24 Sep 2012 1  
Using CKEditor in ASP.NET without using AJAX assembly files.

Introduction  

This article is about how to use CKEditor non ASP.NET version in ASP.NET web page. So now you can use an HTML editor in ASP.NET without using the AJAX control tool or AJAX assembly file.

Code

Here is the code for the web page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Editor" validateRequest="false" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>HTML Editor</title>
	<script type="text/javascript" src="ckeditor.js"></script>
	<script src="~/js/sample.js" type="text/javascript"></script>
	<link href="~/js/sample.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function GetContents() {
            var oEditor = CKEDITOR.instances.editor1;
            document.getElementById('<%=Hidden1.ClientID%>').value = oEditor.getData();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="Hidden1" runat="server" />
    <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
		    <script type="text/javascript">
		        var editor = CKEDITOR.replace('editor1');
		    </script><br />
            <asp:Button ID="Button1" runat="server" Text="Show" BackColor="#999999" 
            Font-Bold="True" ForeColor="White" Height="30px" Width="100px" 
            onclick="Button1_Click" OnClientClick="GetContents()" />
            <div id="cnt" runat="server"></div>
    </form>
</body>
</html> 

When you will click on Show button the contents of Editor will be saved in Hidden Field control using the GetContents() function. After that use the value of Hidden Field in code behind file as given below.

 Code behind c# file :  

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class Editor : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
 
        cnt.InnerHtml = Hidden1.Value;
    }
}  

I am using Hidden Field value in a <div> to show HTML editor contents. You can use this value to store in database also.

Points to remember 

Set the validateRequest="false" in web page . Set <httpRuntime requestValidationMode="2.0" /> in web config file.

Demo  

Here is the demo about this article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here