Detecting Changes to the RadEditor

Thread is closed for posting
4 posts, 0 answers
  1. 5689A234-45B8-4B82-B645-6748BE6523A3
    5689A234-45B8-4B82-B645-6748BE6523A3 avatar
    1 posts
    Member since:
    Aug 2010

    Posted 13 Dec 2011 Link to this post

    Requirements

    RadControls version

    RadEditor.Net2 Ver.7.0.1.0 (a.k.a. RadEditor Classic)
    RadEditor for ASP.NET AJAX (Telerik.Web.UI)

    .NET version

     all

    Visual Studio version

     all

    programming language

     JavaScript

    browser support

    all browsers supported by RadControls


    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:

    <rade:radeditor id="RadEditor1" runat="server" causesvalidation="False" stripabsoluteanchorpaths="False"
        documentsfilters="*.doc,*.pdf,*.xls,*.txt,*.docx" uploaddocumentspaths="~/docs"
        documentspaths="~/docs" imagespaths="~/images" uploadimagespaths="~/images"
        onclientload="OnClientLoad"
        onclientcommandexecuted="OnClientCommandExecuted"
        editable="True" toolswidth="100%"
        toolsfile="~/ToolsFileDefault.xml" width="600px" radcontrolsdir="/RadControls/2006Q4/RadControls/"
        showsubmitcancelbuttons="False" focusonload="True" stripabsoluteimagespaths="False">
    </rade:radeditor>

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

     Define the JavaScript:

    <script type="text/javascript">
        function OnClientLoad(editor)
        // Detects changes in the editor contents to determine if the data has changed and needs to be saved
        {
            editor.AttachEventHandler("onmousedown", function (e) {
                document.forms[0].varUnsaved.value = 'true';
            });
     
            editor.AttachEventHandler("onkeydown", function (e) {
                document.forms[0].varUnsaved.value = 'true';
            });
        }
     
        function OnClientCommandExecuted(editor, commandName, oTool) {
            document.forms[0].varUnsaved.value = 'true';
        }
    </script>

     

     

  2. DF60784D-55A5-4263-9F10-A12FA48C9ADC
    DF60784D-55A5-4263-9F10-A12FA48C9ADC avatar
    14477 posts
    Member since:
    Apr 2022

    Posted 14 Dec 2011 Link to this post

    Hello Ben,

    Thank you for your contribution to our community. I updated a bit the article and added links to the client side API sections of RadEditor Classic and RadEditor for ASP.NET AJAX.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. EF1E2E5F-848B-40E1-85E7-2A0B1CCD9922
    EF1E2E5F-848B-40E1-85E7-2A0B1CCD9922 avatar
    8 posts
    Member since:
    Jan 2007

    Posted 22 Mar 2012 Link to this post

    Excellent post.  I do have one issue however.  If I toggle to the HTML view of the RadEditor and paste in some HTML, this does not trigger the neccessary javascript events.  Any idea?

    Thanks,

    Chris
  4. DF60784D-55A5-4263-9F10-A12FA48C9ADC
    DF60784D-55A5-4263-9F10-A12FA48C9ADC avatar
    14477 posts
    Member since:
    Apr 2022

    Posted 26 Mar 2012 Link to this post

    Hello,

    Here is an example how to attach to the keydown event of the TextArea based content area of HTML mode:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange">
    </telerik:RadEditor>
    <script type="text/javascript">
    var editorObject;
    function OnClientModeChange(editor) {
        editorObject = editor;
        if ($telerik.isIE) {
         if (editor.get_mode() == 2) {
                editor.get_textArea().attachEvent("onkeydown", trapTab);
               }
        }
           else editor.get_textArea().addEventListener("keydown", trapTab, false);
    }
    function trapTab(e) {
       if (e.keyCode == 9) {
         editorObject.pasteHtml(" ");
         $telerik.cancelRawEvent(e);
         return false;
       }
    }
    </script>


    You can use the code above as a base to proceed with your implementation.


    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.