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

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

    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

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

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

    Client side event examle:

    <script>
    function test () {
        var editor1=document.getElementById('<%=Editor1.ClientID%>');
        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

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

    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

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

    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

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

    Craig,
     
    What's the ID of your Editor? If your editor ID is Editor1, the client ID will be: Editor1.ClientID
     
    <script>
    function test () {
        var editor1=document.getElementById('<%=Editor1.ClientID%>');
        var editdoc = editor1.GetDocument();
        editdoc.onclick=helloworld;
    }
    function helloworld() {
        alert("hello world");
    }
    </script>
     
    Can you post some code showing the problem?
     

    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

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

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

    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

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

    // 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?

    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

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

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

    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

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

    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?
     

    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

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

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

    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

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

    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>

    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

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

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

    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
View as RSS news feed in XML