In RadEditor How can i use javascript onclick and onchange events?

5 posts, 0 answers
  1. Dileep Lekkala
    Dileep Lekkala  avatar
    1 posts
    Member since:
    Apr 2010

    Posted 16 Jun 2010 Link to this post

    How can i use OnClick and OnChange events in RadEditor?

    Thanks,
    Dileep
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 17 Jun 2010 Link to this post

    Hello Dileep,

    You can see how to attach to the onclick event in this article: attachEventHandler.

    IFRAMEs (such as the editor's content area) do not havea onchange event as textareas and inputs do. This is one major problem when determining whether content actually changed. 2) HTML is not text. Text can be easily compared - HTML cannot. Factors such as element attribute sequence, CSS settings, whitespace - can afect the editor "decision making process" and have it raise the "text changed" event even if the content was not actually changed. And the most important reason #3) is that browsers, most importantly IE make a great deal of changes to the content automatically when it is loaded in the browser. For example, IE would covnert all tags to upper case (which is not XHTML compliant). Many browser commands also produce non-XHTML compliant content - which the editor then needs to fix. It is not by chance that the editor features 20+ content filters that get executed automatically by default to correct for browser deficiencies and produce well-formed, valid XHTML. For more information please examine the following demo:
    http://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx

    You can see the following forum thread on the subject which could be helpful for your scenario: Detect editor content change.

    The following code could be useful too - it was taken from a customer project and we do not support it:

    <body onbeforeunload="javascript:checkSave();">
     <form name="ThisForm" id="ThisForm" runat="server">
     <asp:ImageButton ID="btnSave" runat="server" OnClientClick="javascript:doSave();" />
        <telerik:RadEditor ID="RadEditorValue" runat="server" OnClientCommandExecuting="OnClientCommandExecuting"
            OnClientLoad="OnClientLoad">
        </telerik:RadEditor>      
     <script type="text/javascript"
     
      var bypass = false;
            var valueDirty = false;
            var idSave = '<%= btnSave.ClientID %>';
            var radEditorId = '<%= RadEditorValue.ClientID %>';
            
            function OnClientLoad(editor)
            {
     
                var htmlArea = editor.get_textArea();
                var contentArea = editor.get_contentArea();
               
                if(htmlArea)
                {
                    htmlArea.attachEvent('onkeydown', function(){detectChanges(); });
                    htmlArea.attachEvent('onchange', function(){detectChanges(); });
                    htmlArea.attachEvent('onpaste', function(){detectChanges(); });
                }
     
                if(contentArea)
                {
                    contentArea.attachEvent('onkeydown', function(){detectChanges(); });
                    contentArea.attachEvent('onchange', function(){detectChanges(); });
                    contentArea.attachEvent('onpaste', function(){detectChanges(); });
                }         
            }
            
            function detectChanges()
            {
                valueDirty = true;
            }
     
            function doSave(){
                bypass = true;
            }
        
            function checkSave() {     
                var sSave;
     
                if ((valueDirty == true) && (bypass == false)) {
                    sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
     
                    if (sSave == true) {
                        
                        document.getElementById('__EVENTTARGET').value = 'btnSave';
                     var radEditor = $find(radEditorId);
                     radEditor.saveContent();
                     document.forms[0].submit();
                        return true;
                    } else {
                         return false;
                    }
                }
     
                return true;
                
            }
     </script>
     </form>
    </body>



    All the best,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anbu
    Anbu avatar
    10 posts
    Member since:
    Nov 2013

    Posted 30 Jan 2014 in reply to Rumen Link to this post

    Thanks for post!. Really I searched so many hours I got lot of any to achieve this result. Finally I achieved for this method only.
     
  5. Con Raducanu
    Con Raducanu avatar
    3 posts
    Member since:
    Mar 2009

    Posted 19 Jun 2014 Link to this post

    hi,

    how can we use this on the latest version of Editor
  6. CRAIG
    CRAIG avatar
    4 posts
    Member since:
    Jan 2011

    Posted 05 May Link to this post

    In case anyone else is interested, using jquery I was able to get this to work:

     

                function OnClientLoad(editor, args)
                {
                    $(editor.get_textArea()).on("input propertychange paste change", detectChanges);
                    $(editor.get_contentArea()).on("input propertychange paste change", detectChanges);
                }

     

    Still using the "detectChanges" changes, etc., from above.

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017