ckeditor 4 breaking after async postback in IE only

Question

I have solved the issue. I moved the CKEditor outside of the UpdatePanel. The button being inside the UpdatePanel allowed me to trigger an async postback, which still let me access the data in the RepeaterItem that I needed to save it in the database.

With the CKEditor outside of the UpdatePanel, it no longer locks up after the async postback. I still do not know what exactly causes CKEditor to break after the postback, but at least I learned how to prevent it from happening. Hopefully this answer can help someone else some time.

---

I have an ASP.NET Repeater placing multiple UpdatePanels into my page with CKEditor textboxes in them for users to answer questions. I have provided a "Save Answer" button that allows an async postback to save the current answer.

In Internet Explorer, after the async postback (which does correctly save the answer) the page is locking up and not allowing the users to select the textbox again, or any text on the page for that matter. The user can still click the "Continue" button and any links to navigate away from the page, and clicking on one of the CKEditor icons (e.g. the bold button, or font size drop down) restores the ability to click in the textboxes and select text on the page again.

Every other major browser works perfectly fine. This happens in IE 8+ (no support prior to 8 or it would likely happen there too).

Here is relevant code:

Javascript

    function pageLoad() {
        $(".editor").each(function () {
            $(this).ckeditor().editor.on("change", function (event) {
                // Updates the asp control on change
                event.editor.updateElement();
            });
        });
    }

Markup (In a repeater ItemTemplate, repeating for each question in the applicable data)

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        ... Question stuff here...
        <asp:TextBox ID="txtAnswer" runat="server" TextMode="MultiLine" CssClass="editor"></asp:TextBox>
        <div>
        <asp:Button ID="btnSave" runat="server" Text="Save Answer" Enabled="false" OnClick="SaveAnswer" />
        </div>                    
    </ContentTemplate>
</asp:UpdatePanel>

There are no exceptions occurring in the C#, and the SaveAnswer() method runs successfully, saving the answer, but that little glitch seems fairly strange to me... Especially the fact that is prevents you from selecting any text on the page, not just within the CKEditor instances.

Any suggestions are greatly appreciated -- and thanks for taking the time to check out my question.

Answer 1

I have solved the issue. I moved the CKEditor outside of the UpdatePanel. The button being inside the UpdatePanel allowed me to trigger an async postback, which still let me access the data in the RepeaterItem that I needed to save it in the database.

With the CKEditor outside of the UpdatePanel, it no longer locks up after the async postback. I still do not know what exactly causes CKEditor to break after the postback, but at least I learned how to prevent it from happening. Hopefully this answer can help someone else some time.

Answer 2

just let ckeditor update the textarea on change :

var ckEditor = CKEDITOR.replace(textAreaId);

ckEditor.on("change", function (event) {
    event.editor.updateElement();
});