Support forums - How can i detect changed text in CE on the clientside?

Support forums » Products » Cute Editor for .NET » Re: How can i detect changed text in CE on the clientside?

How can i detect changed text in CE on the clientside?

Last post 11-14-2008, 4:20 AM by Luminousc. 11 replies.


	Sort Posts: Previous Next

12-24-2004, 7:17 AM 3146

clrnbeek
Joined on 08-13-2004
The Netherlands
Posts 5

How can i detect changed text in CE on the clientside?

Reply Quote

How can i detect changed text in CE on the clientside?

I know how to get the CE text on the client but not how to register clientside events like onchange when text has changed.

Ik want to see an alert message when the text in the CE has been edited (changed). Is that possible?

12-28-2004, 4:53 PM 3176 in reply to 3146

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: How can i detect changed text in CE on the clientside?

Reply Quote

clrnbeek,

It's very easy to attach the event to the editor on the client side. This is an example:

Client side event examle:

var editdoc = editor1.GetDocument();
editdoc.onclick=helloworld;

}

function helloworld() {
alert("hello world");
}
</script>
<body onload="test()">

Below is the Iframe event list (copying from MSDN). You can choose the appropriate event for your situation:

Event	Description
onactivate	Fires when the object is set as the active element.
onafterupdate	Fires on a databound object after successfully updating the associated data in the data source object.
onbeforedeactivate	Fires immediately before the activeElement is changed from the current object to another object in the parent document.
onbeforeupdate	Fires on a databound object before updating the associated data in the data source object.
onblur	Fires when the object loses the input focus.
oncontrolselect	Fires when the user is about to make a control selection of the object.
ondeactivate	Fires when the activeElement is changed from the current object to another object in the parent document.
onerrorupdate	Fires on a databound object when an error occurs while updating the associated data in the data source object.
onfocus	Fires when the object receives focus.
onload	Fires immediately after the browser loads the object.
onmove	Fires when the object moves.
onmoveend	Fires when the object stops moving.
onmovestart	Fires when the object starts to move.
onreadystatechange	Fires when the state of the object has changed.
onresizeend	Fires when the user finishes changing the dimensions of the object in a control selection.
onresizestart	Fires when the user begins to change the dimensions of the object in a control selection.
ontimeerror	Fires whenever a time-specific error occurs, usually as a result of setting a property to an invalid value.

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

02-22-2005, 5:59 AM 4207 in reply to 3176

LOGIKonline
Joined on 01-12-2005
Posts 52

Re: How can i detect changed text in CE on the clientside?

Reply Quote

Adam - I can't seem to capture the key value in the event. I have included a code snipet below. Can you tell me where I am going wrong? I tried window.event too - but no go.

function quickEnter(evt) {
  var key = (evt) ? evt.which : event.keyCode;
alert(key);
}
function body_onLoad() {
  var myMessage = document.getElementById('CE_MyMessage_ID');
  if (!myMessage) return;
  var editdoc=myMessage.GetDocument();
  editdoc.onkeydown=quickEnter;
}

regards,

Dave

11-13-2008, 10:56 AM 45690 in reply to 3176

Luminousc
Joined on 11-13-2008
Posts 11

Re: How can i detect changed text in CE on the clientside?

Reply Quote

Hi I'm building a CMS, currently with the demo version of your editor as the core of the app.

I'm having trouble with the above example, I can detect a click on the toolbar but not within the document.

I can add the click event to the editor itself but editor1.GetDocument() doesn't return an object for me and so I can't add the event to it.

I'm building using Asp.Net 2/3.5 targeting and testing in IE7 only.

Please help, if I can just get over this issue I think we'll be going live with the CuteEditor instead of the bloated alternatives from Telerik and Infragistics.

Thanks,

Craig

11-13-2008, 11:04 AM 45692 in reply to 45690

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: How can i detect changed text in CE on the clientside?

Reply Quote

Craig,

What's the ID of your Editor? If your editor ID is Editor1, the client ID will be: Editor1.ClientID

var editdoc = editor1.GetDocument();
editdoc.onclick=helloworld;

}

function helloworld() {
alert("hello world");
}
</script>

Can you post some code showing the problem?

11-13-2008, 11:20 AM 45696 in reply to 45692

Luminousc
Joined on 11-13-2008
Posts 11

Re: How can i detect changed text in CE on the clientside?

Reply Quote

My editor does have an ID of Editor1 so Editor1.ClientID returns

'CE_ctl00_ContentPlaceHolder1_Editor1_Editor1_ID'

So I've used the script as-is from your example.

by using editor1.getElementsByTagName("IFrame").id i managed to find the editor's IFrame id.

However using:

'document.getElementById('<%=Editor1.ClientID%>_Frame').onclick = helloworld;'

still doesn't fire the alert when clicking inside the document.

11-13-2008, 11:28 AM 45697 in reply to 45696

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: How can i detect changed text in CE on the clientside?

Reply Quote

// get the cute editor instance
var editor1 = document.getElementById('<% = Editor1.ClientID%>');

// retrieving the content of Cute Editor as HTML
var content = editor1.getHTML();
alert(content );

Can you try the above code? Are you able to get the content from editor?

11-13-2008, 11:31 AM 45698 in reply to 45697

Luminousc
Joined on 11-13-2008
Posts 11

Re: How can i detect changed text in CE on the clientside?

Reply Quote

I'm afraid not, I get:

'Object doesn't support this property or method'

11-13-2008, 11:37 AM 45699 in reply to 45698

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: How can i detect changed text in CE on the clientside?

Reply Quote

Is your site online so you can provide an online demo?

Or can you create a simple example showing the problems and send it to me Adam@cutesoft.net?

11-13-2008, 11:45 AM 45700 in reply to 45699

Luminousc
Joined on 11-13-2008
Posts 11

Re: How can i detect changed text in CE on the clientside?

Reply Quote

The site's still running just on my maching from VS2008 at the minute:

I've created a basic page to test it in it's simplest form and the same happens:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CuteTest.aspx.cs" Inherits="CuteTest" %>

<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
<CE:Editor ID="Editor1" runat="server" EditorWysiwygModeCss="Editor.css" Width="776"
    Height="500" AutoConfigure="Simple">
</CE:Editor>

<script language="javascript" type="text/javascript">
    function helloworld() {
      alert("hello world");
    }
    var editor1 = document.getElementById('<%=Editor1.ClientID%>');
    var content = editor1.getHTML();
    alert(content);
</script>

</form>
</body>
</html>

I've got to head home now. I'll check back in the morning. If needs be I'll create a sample app, zip it and email it to you.

thanks for your quick replies.

Craig

11-13-2008, 12:12 PM 45701 in reply to 45700

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: How can i detect changed text in CE on the clientside?

Reply Quote

I've modified your code. Please try it:

<%@ Page Language="C#"%>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html>
    <head>
</head>
<body>
        <form runat="server">
     <CE:Editor ID="Editor1" runat="server" Text="Type here..."></CE:Editor>
     <br>
     <input type="button" value="Click Me" onclick="helloworld()">
   <script language="javascript" type="text/javascript">
    function helloworld() {
    var editor1 = document.getElementById('<%=Editor1.ClientID%>');
    var content = editor1.getHTML();
    alert(content);
    }
   </script>
  </form>
</body>
</html>

11-14-2008, 4:20 AM 45728 in reply to 45701

Luminousc
Joined on 11-13-2008
Posts 11

Re: How can i detect changed text in CE on the clientside?

Reply Quote

Ah-ha, Success!

Yes, your code change worked, still not sure why my code didn't but it helped me zero in on another issue. In IE7 you don't seem to be able to directly write to the onclick event of an object instead you need something like this:

  <input id="clicker" type="button" value="Click Me" />

  <script language="javascript" type="text/javascript">

    document.getElementById('clicker').attachEvent('onclick', sayHello);

    function sayHello() {

      alert('hi');

    }
  </script>
 
Hope this helps anyone else who comes across this one.
 
Thanks again for your help Adam.

Craig