RTE's postback issue on Firefox browser
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
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);
}
}
