Click here to Skip to main content
Click here to Skip to main content

CKEditor in ASP.NET Without AJAX

, 24 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manjeet_Singh
Web Developer
India 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

Comments and Discussions

 
QuestionCKEditor in ASP.NET Without AJAX PinmemberMegha Pandey10-Dec-14 18:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 24 Sep 2012
Article Copyright 2012 by Manjeet_Singh
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid