This is a migrated thread and some comments may be shown as answers.

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

4 Answers 716 Views

Editor

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 17 Jun 2010, 08:49 AM

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.