CKEditor in ASP.NET Without AJAX

Manjeet_Singh

Rate me:

4.67/5 (3 votes)

24 Sep 2012CPOL

19.3K

961

Using CKEditor in ASP.NET without using AJAX assembly files.

Download HTML_EDITOR.zip - 421.5 KB

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:

C++

<%@ 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 :

C++

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Manjeet_Singh

Web Developer

India

Pursuing M.sc(IT) and have my own web development firm. I work on Asp.Net technology and have developed many large dynamic web applications in Asp.Net. One of them is Mobile Hunk .

I have to do something new in web development. For any discussion about web development join me Manjeet Singh

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.