CODEWITHSUNDEEP
asp.netupdatepanelckeditor
manu5987
manu5987

Reputation: 69

CKEditor not working properly inside update panel

I am having a problem with CKEditor inside an update panel in asp.net. I have tab control on page with multiple CKEditor's i.e one ckeditor in each tab. 

  string scriptAdd = @"var editor = CKEDITOR.instances['ctl00_ContentPlaceHolder1_faqeditor']; if (editor) { editor.destroy(true); } CKEDITOR.replace('ctl00_ContentPlaceHolder1_faqeditor');";
  ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "", scriptAdd, true);

The above code snippet helps in rendering the editor in update panel. But when a postback is done it still shows the earlier value and not the changed one i.e the editor does not reflect the changes made after the tab is changed in the update panel.

The same thing works perfectly fine without update panel.

Is there any solution for this problem?

Upvotes: 4

Views: 5330

Answers (3)

Grady Werner
Grady Werner

Reputation: 459

Sorry for the late response on this, but the answer may be helpful to others as well. You also need to do the following in code behind:

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "updatescript", "CKEDITOR.instances['ctl00_ContentPlaceHolder1_faqeditor'].updateElement();");

Hope this helps.

Upvotes: 2

Darshil Prajapati
Darshil Prajapati

Reputation: 97

<form id="form1" runat="server">
    <asp:ScriptManager ID="scrpM" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnshow" runat="server" Text="Show Hidden Editor" />
            <div id="divEditor" runat="server" visible="false">
                <asp:PlaceHolder ID="plCKEditor" runat="server"></asp:PlaceHolder>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>


----------


Add editor inside a div with visible="false"
and on the button click you set visible="True"
it's works fine for me

Upvotes: 0

Chtioui Malek
Chtioui Malek

Reputation: 11515

just force ckeditor to update the textarea on change :

var ckEditor = CKEDITOR.replace('ctl00_ContentPlaceHolder1_faqeditor');

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

Upvotes: 8

Related Questions