Detecting Changes to the RadEditor

 
Detecting changes to the Telerik rad editor can be a pain without some guidance.  The purpose of this article is to explain what methods are best and provide a code sample of one way to do it.  On my trail of discovery I am using version RadEditor.Net2 Ver.7.0.1.0 (a.k.a. RadEditor Classic), but the same techniques apply to the Ajax version just the event names differ.

Web searches yield two basic ways to handle the issue:

1. Create a hidden copy of the editor, set both the visible and hidden controls on load of the data, and then compare to see if the data has changed.
2. Use JavaScript events to set a variable used within the code behind.

A Hidden Copy – a method gone bad!

There is a major flaw to this method not to mention the overhead of loading two copies of a larger control.  To avoid a long dissertation I will boil it down to the important issue at hand; the editor uses the native browser engine to render the HTML presented in the control. 

This is an issue because when you load data into the control from the DB the HTML tags are changed to suit the browser engine, then when it saves the data back to the DB the HTML is optimized.  This makes a comparison between the control and the DB always comes up different, no matter if you have changed the data or not because the HTML tags are different.

The browser engine issue also affects comparing two copies of the control, but in a more subtle way.  There are two RadEditor's properties you can use to compare two copies of a control, .Text and .Html (.Content in RadEditor for ASP.NET AJAX).  The .Text property is out because it does not detect changes in text attributes such as bold and underline. The .HTML (.Content) property will work most of the time.

The catch is that the .Html (.Content) command works for almost everything but links.  If there is a link or an image included in the editor, a comparison of the .Html (.Content) property will show the attributes of the link will have a different order which yields a false positive for change.  If you don’t happen to test with a link then it will appear this method works. 

Using Events to Detect Changes

Interestingly enough, a web search will generally turn up you should use the RADEVENT_SEL_CHANGED event.  What it fails to mention is that just about anything you do on the page fires the event!  And that my friend renders the thing useless because we are only interested to changes to the text, not whether the save button was clicked, so toss that one out.

The next event commonly mentioned is the onkeydown event.  This event is quite useful and detects when the user actually interacts with the text within the editor itself.  The catch is that we can’t forget the editor tool bar commands.  Say the user uses the mouse to highlight some text and clicks the BOLD command.  Yup, you guessed it; the onkeydown event is not fired.  This also happens to be true if the user never interacts with the editor window and just clicks an item in the tool bar.  This leads us to the onmousedown event.

The onmousedown event detects when the user clicks in the editor window so when the user selects some text to work with or simply clicks in the editor window to give it focus. But wait! We are still aren’t covered because this event doesn’t fire if, as mentioned earlier, the user just clicks on a tool bar command.  Why would they do that?  Say I type some text in the editor and hit save.  Oh yea, I wanted to center justify the text so I hit the appropriate tool bar item, text looks good and I ready to move on but the change flag is not set so I am not prompted to save before moving on.

The final event to handle is the OnClientCommandExecuted event. This event fires when the user interacts with the toolbar on the editor which handles those admittedly singular, once in a great while toolbar interactions.  I will point out that if you have added some custom items to the toolbar, these are covered as well.

In the end you need three events:  OnClientCommandExecuted, onmousedown and onkeydown.

Now the How to…

Remember Java script is case sensitive so here is the difference if you are working with the Ajax version of the controls: the method names starts with lowercase letter. AttachEventHandler = attachEventHandler, etc…

The Client side API of RadEditor Classic is available here and this one of RadEditor for ASP.NET AJAX is here.

Define the control:

Define the variable to use (Yea, I know, it is an input):
<input id="varUnsaved" type="hidden" name="varUnsaved" runat="server" />

 Define the JavaScript: