We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

RTE's postback issue on Firefox browser

Platform: ASP.NET Web Forms |
Control: RichTextEditor |
Published Date: February 20, 2018 |
Last Revised Date: May 7, 2019

Why RTE becomes blank after postback in FireFox browser

 

Root Cause

In RTE control a contenteditable Iframe is used for editing it’s content. The FireFox browser does not work properly with dynamically rendered contenteditable iframes after postback. Since this is a browser related issue, queries have been raised in various online forums. Refer to the following links.

https://support.mozilla.org/en-US/questions/1150739

https://forum.jquery.com/topic/while-create-a-content-editable-iframe-dynamically-getting-rendering-issues-in-firefox

Workaround

This issue can be overcome by storing the Iframe’s content to the browser’s local storage during postback and then restoring them back via control’s create event after the postback completes.

Consider the following example.

<asp:updatepanel runat="server" id="Uppanel">
    <contenttemplate>
        <ej:Button ID="ButtonNormal" runat="server" ClientSideOnClick="btnClick" ShowRoundedCorner="true" Text="Postback"></ej:Button>
        <ej:RTE runat="server" id="RTE" Value="This is a test" ClientSideOnCreate="oncreate">
        </ej:RTE>
    </contenttemplate>
</asp:updatepanel>

 

In the above code, RTE is placed inside an UpdatePanel control for postback and the button control is used to perform the postback. Using its ClientSideOnClick event, the iframe’s content is stored in browser’s local storage during postback. Refer to the following code.

<script>
    function btnClick() {
        //Using the clientside click event of the postback button to add the RTE's content to local storage
        if (ej.browserInfo().name == "mozilla") {
            window.localStorage.removeItem("ejRTE_IframeContent"); // removing previous content if any
            window.localStorage.setItem("ejRTE_IframeContent", rteobj.getDocument().children[0].innerHTML); // storing the content in local storage
        }
    }
</script>

 

 Now the content is set to the local storage, so once the postback completes, the content from the local storage is set back to the control using the ClientSideOnCreate event. Refer to the following code.

<script>
    var rteobj, rteContent, rteModel, rteEle;
    function oncreate() {
        rteobj = this; //Control's instance 
        rteContent = this.getDocument(); // RTE's iframe document 
        // Checking for Browser 
        if (ej.browserInfo().name == "mozilla") {
            // using settimeout to set the iframe content back with a delay 
            setTimeout(function () {
                // Storing the model 
                rteModel = rteobj.model;
                //storing the element 
                rteEle = rteobj.element;
                //destroying the control 
                rteobj.destroy();
                // emptying the create event to avoid loop 
                rteModel.create = null;
                // Re-rendering the control and accessing the instance 
                rteobj = $(rteEle).ejRTE(rteModel).data("ejRTE");
                // setting styles in the head section 
                rteobj._rteIframe[0].contentDocument.head.innerHTML = rteContent.children[0].children[0].innerHTML;
                // checking whether the local storage is empty or not (whether it is postback or initial render) 
                if (window.localStorage.ejRTE_IframeContent === null || window.localStorage.ejRTE_IframeContent === undefined) {
                    rteobj._rteIframe[0].contentDocument.body = rteContent.body;//setting the body content 
                } else {
                    rteobj._rteIframe[0].contentDocument.body.parentElement.innerHTML = window.localStorage.ejRTE_IframeContent; //setting the html content 
                }
            }, 10);
        }
    } 
</script>

 

To prevent the content from the local storage, from being inserted into the control during initial render or full-page refresh, it must be removed. Refer to the following code.

protected void Page_Load(object sender, EventArgs e)
{
    // Clearing the local store only during initial load or page refresh
    if (!IsPostBack) {
        ScriptManager.RegisterStartupScript(this, GetType(), "ScriptKey","window.localStorage.removeItem('ejRTE_IframeContent');", true);
    }
}

 

Sample Link

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon