Hi all,

I've spent weeks (slight exaggeration) trying to get FCKeditor to work in an UpdatePanel. Even with the latest FCK code (2.3.1), the changes to the content of the editor are lost on partial postback. (I think this may only be a problem in Firefox).

Anyway, today I found the solution and I thought I'd share it with everyone:

http://wiki.fckeditor.net/Troubleshooting#head-c83215c3393542ddc261fb2b7a64b60a41253d76

Wish I'd looked at the Wiki earlier!

So you included this?

 <form ... onSubmit="MyObject.UpdateEditorFormValue(); return true;">

 

Here's how I got it working with FCKEditor 2.3.2 (FCKEditor .NET 2.2)

In my web control page_load code, I register the client script and add an onsubmit to my link button (called lbSave here).
 

If Not Page.IsPostBack Then
    If Not Page.ClientScript.IsClientScriptBlockRegistered("FCKAjaxHack") Then
        Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "FCKAjaxHack", String.Format("<script type=""text/javascript"" src='{0}'></script>", ResolveUrl("~/js/FCKHack.js")))
    End If
    lbSave.Attributes.Add("onclick", "if (eval('(typeof(MyFCKObject) != \'undefined\');')){MyFCKObject.UpdateEditorFormValue(); return true;}else{return true;}")
End If

 ...and my javascript include file (FCKHack.js) contains the following:

// Some Class
function MyFCKClass()
{
        this.UpdateEditorFormValue = function()
        {
                for ( i = 0; i < parent.frames.length; ++i )
                        if ( parent.frames[i].FCK )
                                parent.frames[i].FCK.UpdateLinkedField();
        }
}
// instantiate the class
var MyFCKObject = new MyFCKClass();

 

... I changed the name of the javascript object and function from what was listed here ( http://wiki.fckeditor.net/Troubleshooting#head-c83215c3393542ddc261fb2b7a64b60a41253d76 ), since those names are a bit generic.

 

Great work...

I'm having problems with using FCKEditor inside a DataList <edititemtemplate> using the AJAX UpdatePanel with your setup/code. I know this will be a nice one for ya. Let me know of you need code. Have fun...

 

<ajax:updatepanel id="UpdatePanel1" runat="server">
    <contenttemplate>
        <asp:datalist id="DataList1" runat="Server" cellpadding="4" datakeyfield="id" datasourceid="SqlDataSource1" ondeletecommand="DataList1_DeleteCommand"
            oneditcommand="DataList1_EditCommand" onitemcreated="DataList1_ItemCreated" width="98%" oncancelcommand="DataList1_CancelCommand"
            onupdatecommand="DataList1_UpdateCommand">
            <edititemtemplate>
                <fckeditorv2:fckeditor id="txtBody1" runat="server" value='<%# Eval("body") %>' toolbarset="Basic" debug="true">
                </fckeditorv2:fckeditor>
            <edititemtemplate>
        </asp:datalist>
    </contenttemplate>
</ajax:updatepanel>

 

I'm also using masterpages in which just "UpdatePanel1" is actually located. the rest is in the content page or default.aspx. The same concept should still apply here...

 

 

dear frankosaurus

how do that its not work for please can u explain more for me

because i did everthing u said but not work for me

Firstly, frankosaurus, thanks for your sample code.

Only i want to clarify one little bug in your code, to help amersafi.

on this line of code:

lbSave.Attributes.Add("onclick", "if (eval('(typeof(MyFCKObject) != \'undefined\');')){MyFCKObject.UpdateEditorFormValue(); return true;}else{return true;}")

You put a semicolon ( ";" ) after eval function, and this generates a javascript error.

amersafi, remove thats semicolon and be happy

I would like to write about this on my Spanish Blog. http://www.computerapia.com

Thanks again!

Thanks a lot for this.

It works perfect, except I keep getting a "FCK is not defined" in fckeditorcode_gecko.js line 35.

Any workaround for this? This is using the latest version (2.3.2).
 

 

 

TchamiDK,

I'm having the same problem. Have you found a solution?

I have found the following to be a simpler solution to the same problem...

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

You can also do it for multiple editors...

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();");
}

Josh,

Elegant, perfect!  Works for me, thanks for the quickie solution.

 

-Jason

Note that after some additional testing I found a problem if the editor is ever hidden during a partial postback, there could be some javascript errors on a following postback. For example, if the editor is on one step of a multistep process in a multiview, tabcontainer, etc.

I've posted the details and a solution at http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

joshcoady:

Note that after some additional testing I found a problem if the editor is ever hidden during a partial postback, there could be some javascript errors on a following postback. For example, if the editor is on one step of a multistep process in a multiview, tabcontainer, etc.

I've posted the details and a solution at http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

Thank you for the better solution. I think the .js route, per your blog post, is a very smart choice and also minimizes multi-file-updates. Hopefully FCK will include this solution into his editor for a future release (possibly a "FCKEditor.NET" version). I will be testing this in a real-world production server on Glacsy.com and see if it performs well. If there's any bugs found or performance costs arise, I'll let you know...

Good stuff joshcoady!, very much cleaner solution.

Any workarround about 'FCK is not defined' on FireFox?, to reproduce this, make a Submit more than twice on Firefox...

I recommend to use FireBug addon for FF to see this error.

Cheers!

 

jpgarcia:

Good stuff joshcoady!, very much cleaner solution.

Any workarround about 'FCK is not defined' on FireFox?, to reproduce this, make a Submit more than twice on Firefox...

I recommend to use FireBug addon for FF to see this error.

Cheers

I have this exact same problem too. I have tracked it down to the following line in fck.js:

ctafield:

I wonder if its a side effect of the fixes for Ajax? (I know I'm calling UpdateLinkedField in the version I've modified...)

Hate to answer my own question here, but yes, I can safely say that the gecko error is as a consquence of an Ajax "fix" I've implemented. I found this out by using Firebug (I was already using it before! its great isnt it! ) and putting a breakpoint on line 237 above. The call stack pointed straight at my function.

(I'm using the one off the FCKEditor WIKI. i.e. call an function on submit that does lots of calls to parent.frames[i].FCK.UpdateLinkedField())

Back to the drawing board perhaps?