Dileep Lekkala
Top achievements
Rank 1
Rank 1
Dileep Lekkala
asked on 17 Jun 2010, 12:58 AM
How can i use OnClick and OnChange events in RadEditor?
Thanks,
Dileep
Thanks,
Dileep
4 Answers, 1 is accepted
0
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:
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.
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.
0
Anbu
Top achievements
Rank 1
Rank 1
answered on 30 Jan 2014, 11:23 AM
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.
0
Con Raducanu
Top achievements
Rank 1
Rank 1
answered on 19 Jun 2014, 06:24 AM
hi,
how can we use this on the latest version of Editor
how can we use this on the latest version of Editor
0
CRAIG
Top achievements
Rank 1
Rank 1
answered on 05 May 2016, 02:00 PM
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.