Easy way to get FCKEditor to work inside an ASP.Net AJAX UpdatePanel

The Problem

I had a MultiLine TextBox inside an UpdatePanel and I wanted that TextBox to have rich editing capabilities so I chose FCKEditor. But, now when I do a partial PostBack, the TextBox doesnt retain it value.

An Initial Solution

So, I searched for a solution to this problem and found this post, but it seemed like more of a hack than I prefer.

A More Elegant Solution

As it turns out, there is a much simpler way hinted at in the FCKEditor wiki:

private void Page_Load(object sender, EventArgs args)
{
    Page.ClientScript.RegisterOnSubmitStatement(
        editor.GetType(),
        "editor",
        "FCKeditorAPI.GetInstance('" + editor.ClientID + "').UpdateLinkedField();");
}

If you have multiple FCKEditors, you need to apply this solution to each one:

private void Page_Load(object sender, EventArgs args)
{
    Page.ClientScript.RegisterOnSubmitStatement(
        editor1.GetType(),
        "editor1",
        "FCKeditorAPI.GetInstance('" + editor1.ClientID + "').UpdateLinkedField();");

    Page.ClientScript.RegisterOnSubmitStatement(
        editor2.GetType(),
        "editor2",
        "FCKeditorAPI.GetInstance('" + editor2.ClientID + "').UpdateLinkedField();");
}

One Small Problem

There is one small issue with this solution, however—there will be JavaScript errors if you hide the TextBox during a partial PostBack.

For example, if you have a three step form: edit, review, and then publish. On the edit step the TextBox is shown and you enter and style your rich text, then you click the review button and this causes a partial PostBack which removed the TextBox and shows a preview of the text you enterred. When you click the publish button there will be a JavaScript error because the Textbox is no longer visible.

The Final Solution

To solve this problem and come to an elegant, working solution I just needed to add in some basic error checking. Since the JavaScript was getting a little more complex, I decided to move the main work into a .js file:

function FCKUpdateLinkedField(id)
{
    try
    {
        if(typeof(FCKeditorAPI) == "object")
        {
            FCKeditorAPI.GetInstance(id).UpdateLinkedField();
        }
    }
    catch(err)
    {
    }
}

And the page code now looks like:

private void Page_Load(object sender, EventArgs args)
{
    Page.ClientScript.RegisterOnSubmitStatement(
        editor.GetType(),
        "editor",
        "FCKUpdateLinkedField('" + editor.ClientID + "');");
}
You can leave a response, or trackback from your own site.

9 Responses to “Easy way to get FCKEditor to work inside an ASP.Net AJAX UpdatePanel”

  1. Nameer says:

    Still get FCK is not defined if you postback for the second time (in firfox not ie)

  2. duncan says:

    thanks for posting this. elegant and effective. saved me time, no doubt!

  3. Naveen says:

    Hi Boss,
    Thnq very much, i was tried to fix this issue from morning onwards finaly i got your blog.

    Thanks very much
    NAveen M

  4. sara says:

    hi:

    it works fine, but its refreshed the whole page within the updatepanel.
    Anyone give a solution for this, very grateful to them.

    thanks and regards
    sara

  5. supernont says:

    superb! thanks a lot :D

  6. Javier says:

    The given code is not correct. As Naveen says the whole page will be refreshed.

    You have to use “ScriptManager” instead “Page.ClientScript”:

    ScriptManager.RegisterOnSubmitStatement(editor, editor.GetType(), “editor”, “FCKUpdateLinkedField(‘” + editor.ClientID + “‘);”);

    Notice that this method receives 4 parameters. The method of the example has 3 parameters.

    Even if you apply this change an error will appear. For example: if you change the visibility of the editor several times.

  7. skrowl says:

    Put this in Page_Load (NOT just if Page.IsPostback = false) and it will work no matter how many FCKeditors you have:

    ScriptManager.RegisterOnSubmitStatement(Me, Me.GetType(), “AjaxHack”, “for ( var i = 0; i < parent.frames.length; ++i ) if ( parent.frames[i].FCK ) parent.frames[i].FCK.UpdateLinkedField();")

  8. Matt says:

    This is noted for my experience with visualstudio 2008 asp.net 3.x, i don’t know if this problem exists for other versions of vs or asp.net.

    If you are using the fckeditor html/text editor tool in your webpages and have these lines of code it appears that whenever a postback occurs the fckeditor control will disappear from your UI. It also appears you can use the fckeditor without these lines of code and it will work fine(i.e. not disappear on postback).

    //string fullURL = Request.Url.AbsoluteUri;
    //int index = fullURL.IndexOf(“/ServiceEditor/”);
    //string path = fullURL.Substring(0, index);
    //fckFullDescr.BasePath = path + fckFullDescr.BasePath

Leave a Reply

Subscribe to RSS Feed Follow me on Twitter!