Skip to content

minor style fixes for editor and Back button #206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 9, 2016
Merged

minor style fixes for editor and Back button #206

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e732c2
minor style fixes
Sep 8, 2016
a6e89e9
Control ID fixes
Iankodj Sep 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions controls/editor/how-to/preserve-content-on-back-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,34 @@ position: 11

# Preserve the Content in RadEditor when Using Back Button

**RadEditor UI for ASP.NET AJAX** looses its content when user navigates out of the page and comes back by using the **Back** button of the browser. Browsers automatically preserve the content in such scenario only for form elements like `<textarea>`, `<input/>` and so on. **RadEditor**, however, is an editable DOM element that the browser does not consider as a form element field so to preserve its contents automatically.
**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.

Possible solutions:
Browsers automatically preserve the content in such scenario only for form elements like `<textarea>`, `<input/>` and so on. **RadEditor**, however, is an editable DOM element that the browser does not consider as a form element field and does not preserve its contents automatically.

**Possible solutions**:

* For **Chrome** and **Firefox**: You can use the `window.onbeforeunload` event in order to detect that user navigates out of the page and save the content of **RadEditor** in its own hidden `<textarea>`.

>caption Example 1: Solution with `window.onbeforeunload` event.


<telerik:RadEditor runat="server" ID="RadEditor" RenderMode="Lightweight"></telerik:RadEditor>
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight"></telerik:RadEditor>

<a href="http://www.telerik.com/">Navigate to www.telerik.com</a>

<script>
window.onbeforeunload = function (ev) {
$find("<%= RadEditor.ClientID %>").saveContent();
$find("<%= RadEditor1.ClientID %>").saveContent();
};
</script>


* For all browsers: IE cannot preserve the content during `window.onbeforeunload` and you can either save the content in the `<textarea>` while text is being typed in, or by using a `setTimeout` to not affect the performance of your page.
* For all browsers: IE cannot preserve the content during `window.onbeforeunload` and you can either save the content in the `<textarea>` while text is being typed in, or by using a `setInterval` to not affect the performance of your page.

>caption Example 2: Solution with `onkeyup` event.


<telerik:RadEditor runat="server" ID="RadEditor" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor>

<a href="http://www.telerik.com/">Navigate to www.telerik.com</a>

Expand All @@ -51,7 +53,7 @@ Possible solutions:
>caption Example 3: Solution with `setInterval` approach.


<telerik:RadEditor runat="server" ID="RadEditor" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight" OnClientLoad="OnClientLoad"></telerik:RadEditor>

<a href="http://www.telerik.com/">Navigate to www.telerik.com</a>

Expand Down