Preserve the Editor content on browser back button

Environment

Product

RadEditor for Telerik UI for ASP.NET AJAX

Description

RadEditor of Telerik UI for ASP.NET AJAX does not preserve its contents when navigating back to the page using the browser's back button.

Solution

While browsers by default preserve the contents of input and textarea elements when navigating back to the page using the browser's back button, RadEditor for ASP.NET AJAX uses other elements, however, it can be configured additionally.

Wire up the OnClientLoad event to the Editor which will be used to Save and Restore the contents automatically.

Can also be used with multiple Editors on the page.

Example

ASP.NET

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<telerik:RadEditor ID="RadEditor3" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>

<script>
	function OnClientLoad(editor, args) {
		// Attaching the beforeunload event to save the contents upon leaving the page
		addEventListener("beforeunload", (event) => {
			saveEditorContent(editor);
		});

		// Restore previous content if avaiable
		restoreEditorContent(editor);
	}

	/* Helper Functions */
	function saveEditorContent(editor) {
		editor.saveContent();
	}

	function restoreEditorContent(editor) {
		/* 
		* setTimeout with minimal amount of delay is required as the browsers will take a 
		* little longer to populated the input and textarea elements, and the Load event
		* triggers before that.
		*/
		setTimeout(function () {
			var storedContent = editor.get_contentHiddenTextareaValue();

			if (storedContent) {
				editor._initContentAreaHtml(storedContent, true);
				editor.set_initialContent(storedContent);
			}
		}, 10);
	}
</script>

Alternative options to save the contents

Option 1: Saving the contents while typing.

Use the keyup event to save the contents while typing. While there are other key events that can be used, the keyup event is the recommended one.

ASP.NET

<script>
	function OnClientLoad(editor, args) {
		editor.attachEventHandler("onkeyup", function (e) {
			saveEditorContent(editor);
		});
	}
</script>

Option 2: Saving the contents at specific time intervals.

Another option to save the contents automatically is by using the setInterval method.

ASP.NET

<script>
	function OnClientLoad(editor, args) {
		setInterval(function () {
			saveEditorContent(editor);
		}, 5000);
	}
</script>