[Solved] How to determine if the editor's content has changed

[Alan Gerling]

How do you tell if the HTML content of the editor has changed?

is there some sort of hasChanged flag?

i need access to this information via Client Side scripting.

[Rumen]

Hi Alan,

You can try to detect the editor's content change by handling the onkeydown event of RadEditor:

    <script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        editor.attachEventHandler ("onkeydown", function (e){
            alert("sel changed")
        }
        );
    }
    </script>
    <telerik:radeditor runat="server" OnClientLoad="OnClientLoad"  ID="RadEditor1"></telerik:radeditor>

You can also use the OnClientSelectionChange event of RadEditor.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[woaksie]

This technique misses changes made by the mouse (paste or bold for example). Also just because there has been a key down event doesn't mean the content has changed (arrow keys).

OnClientSelectionChange does not test for changes in the editor content.

I have been trying to compare the editor content with what I know I set the content to.

   var editorContent = editor.get_html(true);

   if (editorContent == initialEditorContent)
      alert('no change');
   else
      alert('content changed');

but the the editor changes the content moving tag attributes around so it looks like it has changed even if it hasn't.

I need the answer to this as well.

[Rumen]

Hi,

RadEditor is not  a simple textarea that works with plain text only. Please, note that there is not a reliable way to check whether the content is modified on the client because the content is validated and modified by the browser and the RadEditor's built-in content filters. For example if you load non well formed content in the editor then the editor and the browser will change it even without user interaction and when you save it the content will be different from the initial one.

You can attach to the paste event of RadEditor using the code below:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var element = document.all ? editor.get_document().body : editor.get_document();
   $telerik.addExternalHandler(element, "paste", function(e)
   {
       alert('You just pasted in the editor');
   });
}
</script>
<telerik:radeditor
   runat="server"
   OnClientLoad="OnClientLoad"
   ID="RadEditor1">
</telerik:radeditor>

You can check for the executed command in the OnClientCommandExecuted event.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[woaksie]

Thanks for the reply. I am beginning to understand the extent of what is happening here.

I think that using the OnClientSelectionChange event and the keydown event I can catch all user interaction with the editor content (even if the user does not actually change anything) and for my situation I can work with that.

John.