Preserve the Content in RadEditor when Using Back Button
RadEditor for ASP.NET AJAX loses its content when the user navigates out of the page and comes back by using the Back button of the browser.
Browsers automatically preserve the content in such scenarios only for form elements like <textarea>
, <input/>
and so on. Because RadEditor is an editable DOM element that the browser does not consider a form element field, the browswer does not preserve its contents automatically.
Possible solutions:
-
For Chrome and Firefox: You can use the
window.onbeforeunload
event in order to detect that the user is trying to navigate out of the page and save the content of RadEditor in its own hidden<textarea>
.Example 1: Solution with
window.onbeforeunload
event.<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight"></telerik:RadEditor> <a href="https://www.telerik.com/">Navigate to www.telerik.com</a> <script> window.onbeforeunload = function (ev) { $find("<%= RadEditor1.ClientID %>").saveContent(); }; </script>
-
For all browsers: IE cannot preserve the content during
window.onbeforeunload
. So you can either save the content in the<textarea>
while text is being typed in or you can usesetInterval
to not affect the performance of your page.Example 2: Solution with
onkeyup
event.<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor> <a href="https://www.telerik.com/">Navigate to www.telerik.com</a> <script> function OnClientLoad(editor, args) { editor.attachEventHandler("onkeyup", function (e) { editor.saveContent(); }); } </script>
Example 3: Solution with
setInterval
approach.<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor> <a href="https://www.telerik.com/">Navigate to www.telerik.com</a> <script> function OnClientLoad(editor, args) { setInterval(function () { editor.saveContent(); }, 5000); } </script>