Log in or register to post comments
Last post
phyndman's picture
Joined: 29/07/2008
Posts: 3
CKeditor and asp.net
Hi all,

I'm developing a new asp.net site for a client and I'm keen to integrate the new CKeditor within it to allow the client to customise areas of the site.

I've previously used FCKeditor and while this has been good I've always had problems integrating it into my style of admin pages (I extensively use popup panels to display record contents etc..).

I'm hoping that the new CKeditor will work better in this regard - however, I can't find any information on how to integrate it into an asp.net page (I realise it's still beta and that documentation will be coming...)

I was hoping that someone had already succesfully done this and might be willing to post information on how they did it (there's a good chance that I'm being dense and it is in fact obvious - if so please tell me, I've got broad shoulders :lol:

Thanks in advance.
phyndman's picture
Joined: 29/07/2008
Posts: 3
Re: CKeditor and asp.net
I've played around with this and got some partial success ... since it appears that no-one else has done this (or at least documented it anywhere!) I thought I'd put down what I've achieved.

Hopefully, people can use it/refine it/comment on it and with a bit of luck tell me where I'm going wrong to resolve the couple of issues that I still have.

I have a page which displays a list of articles in a list view, clicking on an article displays an Ajax Toolkit popup extender panel with the details of the article - including the content, which needs to be HTML (hence the CKeditor). The details 'form' is made up of a formview with edit and insert modes.

This makes it more difficult as the CKeditor has to be created, populated and read depending on the state of the formview.

In the main aspx page

<div class="formItemData">
                 <textarea cols="10" rows="10" name="editor1">
                         <asp:Literal ID="lt_Content" runat="server" Text='<%# Eval("Art_Content") %>' /> 
                  </textarea>
                 <asp:TextBox ID="lb_Content" runat="server" style="display: none;" />
          </div>



Here I've added an asp:literal within a textarea - the literal is bound to data from my Linq query and the textarea will be used to create the CKeditor.

The textbox (lb_Content) is there to 'get' the updated CKeditor content when the update is submitted (it may be that I could use the literal for this purpose but the textbox works so I'm happy with that).

codebehind page

In the onselectedindexchanged function for the listview I've added the following code:

Article art = Article.Select((Int32)((ListView)sender).SelectedValue);

        if (art != null)
        {
            //replace datasource params
            srcArt.SelectParameters.Remove(srcArt.SelectParameters["Art_ID"]);
            srcArt.SelectParameters.Add("Art_ID", art.Art_ID.ToString());

            fv_Article.DataBind();

            //add javascript to create CKeditor
            String script = @"CKEDITOR.replace( 'editor1' );";
            ToolkitScriptManager.RegisterStartupScript(this, this.GetType(), "CKeditorAdd", script, true);

            //now show form
            pe_ArticleDetail.Show();

            //now add script to populate TextBox with contents of CKeditor on form submit
            TextBox contents = (TextBox)fv_Article.FindControl("lb_Content");

            if (contents != null)
            {
                String script2 = "$get(\"" + contents.ClientID + "\").value = CKEDITOR.instances.editor1.getData();";

                LinkButton btn = (LinkButton)fv_Article.FindControl("btn_UpdateArt");

                if (btn != null)
                    btn.Attributes.Add("onclick", script2);
            }

}



Here I bind the formview to the selected article (there are probably neater ways of doing this - but this works and I have listviews embedded in other listviews which makes it complicated!)

At this point I inject the javascript to create the CKeditor (the default mode of the formview is 'edit' so I know the textarea exists)

Finally I get the 'submit' button and attach an attribute consisting of the javascript required to extract the data from the editor so that I can access it through the hidden textbox. (Initially I had this script registered as a toolscriptmanager onsubmit - but this was causing problem when the page was submitted from other controls - so the attribute on the button works best).

Existing Issues

I still have two problems which I can't seem to resolve:

1) On first load the CKeditor doesn't display the content - if I click on source I see the content in source view - if I click on submit the content is passed back to the server, so it's there just not being displayed. If I close the form and select another (or same) article the content of the newly selected article appears OK.

2) The formatting buttons (style, font, color etc..) don't have any text in them and when I select any of them nothing happens - all the other buttons work OK. I'm guessing this is something to do with the update panel that's surrounding the form.

If anyone has any ideas on how I can resolve these issues any thoughts are welcome.

I've only spent half a day looking at this to try and get the CKeditor to work - if anyone has any neater solutions or ideas how this can be improved, please add to this post. Since I can't find any other documentation on how to integrate into asp.net this could be helpful to anyone else trying to do something similar.
fredck's picture
Joined: 19/01/2007
Posts: 1086
Re: CKeditor and asp.net
We'll be coming with the server side integrations after the first 3.0 release, which will contain the JavaScript integration only.

Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn

brillox's picture
Joined: 13/09/2007
Posts: 32
Re: CKeditor and asp.net
so it will be possible to have some asp.net integration or we have to use javascript ?
brillox's picture
Joined: 13/09/2007
Posts: 32
Re: CKeditor and asp.net
no asnwer... so I believe that FCK said BYE BYE to DOT NET for a more "modern" (as they call it) JAVA API !!!

Bah ....
lammet's picture
Joined: 24/03/2009
Posts: 2
Re: CKeditor and asp.net
I'm also interested in knowing whats going on with the asp.net API. Please give us some answers
brillox's picture
Joined: 13/09/2007
Posts: 32
Re: CKeditor and asp.net
normally they do not answer when the answer will be... NO ; hope I am wrong, but if I am right... personally I will choose another editor such as FREETEXT. It is a shame beacsue FCK was GREAT...
alfonsoml's picture
Joined: 31/12/2006
Posts: 3743
Re: CKeditor and asp.net
If you are unable to understand the difference between Java and Javascript, and you can't understand the meaning of "We'll be coming with the server side integrations after the first 3.0 release", what kind of reply do you expect?
brillox's picture
Joined: 13/09/2007
Posts: 32
Re: CKeditor and asp.net
I am definetely NOT expecting your reply hasshole
alfonsoml's picture
Joined: 31/12/2006
Posts: 3743
Re: CKeditor and asp.net
brillox wrote:I am definetely NOT expecting your reply hasshole

Such nice words from you.
Is this the way that you behave everywhere?
brillox's picture
Joined: 13/09/2007
Posts: 32
Re: CKeditor and asp.net
no only with people that believe to be intelligent by posting sarcastic comments....
hopefully this satisfy your curiosity about my behaviour
fruitbatinshades's picture
Joined: 25/06/2008
Posts: 40
Re: CKeditor and asp.net
Just did a simple wrapper control and it works fine for me. Working on a proper control atm.

ckEditor.ascx.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 CKEditor_Aspx_ckEditor : System.Web.UI.UserControl
{
    public String Value {
        get {
            EnsureChildControls();
            return TextBox1.Text;
        }
        set
        {
            EnsureChildControls();
            TextBox1.Text = value;
        }
 
    }
    protected override void OnInit(EventArgs e)
    {
        //see if ckeditor has already been included in the client script
        if (!Page.ClientScript.IsClientScriptIncludeRegistered("ckeditor.js"))
        {
            Page.ClientScript.RegisterClientScriptInclude("ckeditor.js", "/CKEditor/ckeditor.js");
        }
        base.OnInit(e);
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}


ckEditor.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ckEditor.ascx.cs" Inherits="CKEditor_Aspx_ckEditor" %>
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<script type="text/javascript">
    CKEDITOR.replace( '<%= TextBox1.ClientID %>');
</script>
nazojan's picture
Joined: 02/09/2009
Posts: 1
Re: CKeditor and asp.net
Hi,
I am not sure if you fixed the issue or not but I found it, there is really easy trik you can do just give a runat="server" to the <textarea> then you can get or set the innerHTML property of the <textarea> from C# code but make sure to add the ValidateRequest="false" in the top of the page in <%@ Page attributes.

best,
naz
swidom's picture
Joined: 19/06/2010
Posts: 1
Re: CKeditor and asp.net
Actually I found a fairly simple solution to accessing CKEditor content from code behind. Apparently the name of the textarea is the id attribute substituting underscores with dollars. In my code behind I simply reverse this process and with one line of code I have the content I want:

string ckEditorContent = Request[editor.ClientID.Replace("_","$");

In my case I use a User Control to house the CKEditor inside an AJAX Accordian, but that doesn't seem to matter at all. So if you have something like this:

<textarea runat="server" id="editor" name="editor">
</textarea>

and do the usual CKEditor javascript replacing (see other posts), then the code above will work. One line of code. Doesn't get much simpler than that.

Hope this helps.
perilbrain's picture
Joined: 26/06/2010
Posts: 2
Re: CKeditor and asp.net
hi, guys if any one is really interested in ckeditor with asp.net then
1. download my whole project from http://npcs2k7.110mb.com/CK_editor_.zip
2. or else view this webpage => http://www.codeproject.com/KB/edit/CK_EDITOR.aspx