Integrating CKEditor into ASP.NET

Question

I am currently working on implementing a CMS for a website. I have very minimal experience using Javascript, jQuery, C#, etc. I mostly deal with Java, SQL, and C++. My question is I have the CKEditor instance loaded on the page. I am able to load the HTML that I have stored in my database into the CKEditor window, but I cannot get the values that I have changed back out of CKEditor.

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

<asp:Content ID="Head1" runat="server" ContentPlaceHolderID="head" >
<%--Javascript funciton for Display Contents button--%>
<script type="text/javascript">
    function GetContents() {
        // Display the value of CKEditor into an alert
        alert(CKEDITOR.instances.CKEditor1.getData());
        //Have also tried alert(CKEDITOR.instances[CKEditor1].getData());
    }
</script>
</asp:Content>
<asp:Content ID="form1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<CKEditor:CKEditorControl ID="CKEditor1" runat="server">
</CKEditor:CKEditorControl>
<%--Button that executes the command to store updated data into database--%>
<asp:Button ID="SaveButton" runat="server" Text="Save Changes" 
    onclick="SaveButton_Click" />
<button type="button" onclick="GetContents()">Display Contents</button>
  
</asp:Content>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //Retrieve HTML
        HomePageHTML hp = HomePageHTMLAccess.GetHomPageHTML();
        //Does HTML exist?
        if (hp.HTML != null)
        {
            PopulateControls(hp);
        }
     }

    //Method to load html from database into webpage
    private void PopulateControls(HomePageHTML hp)
    {
        //Display html
        CKEditor1.Text = hp.HTML;
        
    }
    //Method to save the updated html into the database
    protected void SaveButton_Click(object sender, EventArgs e)
    {
        string text1 = CKEditor1.Text;
        HomePageHTMLAccess.UpdateHomePageHTML(text1);
    }
}

I have tested and know that I am writing to the database from the SaveButton_Click method. One thing that I have noticed is that I can display a static alert message, such as alert("message"); but no alert window pops up at all with either of the lines in my code.

Any help at all in getting this set up so that I can either write to my database using the class structure, or just in getting GetContents() to work would be greatly appreciated.

score 1 · Accepted Answer · answered Mar 15 '12 at 06:12

1

In Page_Load you should check if (!Page.IsPostBack) before writing the Text property of the CKEditor control, otherwise, on every post back (ie. button click), the control will have the same value from database. –

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //Retrieve HTML
            HomePageHTML hp = HomePageHTMLAccess.GetHomPageHTML();
           //Does HTML exist?
           if (hp.HTML != null)
           {
              PopulateControls(hp);
           }
        }
     }

answered Mar 15 '12 at 06:12

Adrian Iftode

15,465
4
48
73

Thank you very much Adrian, it worked like a charm. In case anyone else has this problem for the SaveButton_Click method add an if (Page.IsPostBack), without the exclamation mark, and close all of the code in it and it will work. – tuckerjt07 Mar 15 '12 at 17:26
@tuckerjt07, on SaveButton_Click, Page.IsPostBack will always be true (the page is posted back by the button click, makes sense?). Also, please, accept the answer. – Adrian Iftode Mar 15 '12 at 17:59
That's what I was thinking, but for some reason it wouldn't work until I put that if statement in there. – tuckerjt07 Mar 16 '12 at 05:48
`!Page.IsPostBack` This means you entered the page first time and loading for the controls if written in page load handler should be done first time only. – Pankaj Mar 17 '12 at 19:08

Integrating CKEditor into ASP.NET

1 Answers1