AttachEvent for characters left

Last post 03-18-2014, 11:14 AM by Kenneth. 6 replies.
Sort Posts: Previous Next
  •  03-10-2014, 1:26 PM 80044

    AttachEvent for characters left

    We have a client that wants a "characters left" countdown from a maxlength so we've created one with editor.attachEvent.  Buttons for this editor are very basic:  undo, redo, cut, copy, paste.  The following attached event function works great in IE but in Firefox and Chrome, the undo/redo buttons don't trigger the event.  Can anyone help with this?

     

    function CE_attachEvent() { 

    var editor1 = document.getElementById('<%= Editor4.ClientID %>');

    if (editor1 != null) { 

    var editdoc = editor1.GetDocument();

     

    if (editor1.attachEvent)

    editor1.attachEvent('onclick', UpdatePlainTextCount);

    else if (editdoc.addEventListener)

    editor1.addEventListener('onclick',UpdatePlainTextCount,true); 

     

    if (editor1.attachEvent)

    editor1.attachEvent('onkeyup', UpdatePlainTextCount);

    else if (editdoc.addEventListener)

    editor1.addEventListener('onkeyup',UpdatePlainTextCount,true);

     

     Thanks!

     
  •  03-11-2014, 9:14 AM 80053 in reply to 80044

    Re: AttachEvent for characters left

    Hi,

     

    Please try the example page below. I set the max to 5.

     

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>GetPlainText</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CE:Editor ID="editor1" runat="server" ShowBottomBar="false">  
    12.         </CE:Editor>  
    13.         <div id="plainText" style="visibility: hidden">  
    14.         </div>  
    15.     </form>  
    16. </body>  
    17. </html>  
    18.   
    19. <script>  
    20. function isIE() {  
    21.     if (window.navigator.userAgent.toLowerCase().indexOf("msie") != -1) return true;  
    22.     else return false;  
    23. }  
    24.   
    25. function GetTextLenght() {  
    26.   
    27.     var editor1 = document.getElementById('<%= editor1.ClientID %>');  
    28.     var plainText = document.getElementById("plainText");  
    29.     plainText.innerHTML = editor1.GetHTML();  
    30.     var text;  
    31.     if (isIE()) {  
    32.         text = plainText.innerText;  
    33.     }  
    34.     else {  
    35.         text = plainText.textContent;  
    36.     }  
    37.     plainText.innerHTML = "";  
    38.     return text.length;  
    39. }  
    40.   
    41. function disableEvent(oEvent)  
    42. {  
    43.     if(GetTextLenght()>=5)  
    44.     {  
    45.         //alert("characters more than 5");  
    46.         oEvent.preventDefault();     
    47.     }  
    48.      
    49. }  
    50. function CuteEditor_OnInitialized(editor)  
    51. {  
    52.     var editdoc = editor.GetDocument();  
    53.     if(window.addEventListener)  
    54.     {  
    55.           
    56.         editdoc.addEventListener("keypress",disableEvent,"false");  
    57.     }  
    58.      
    59.     editdoc.body.onkeydown=function()  
    60.     {  
    61.         if(GetTextLenght()>=5)  
    62.         {  
    63.             return false;  
    64.         }  
    65.          
    66.     }  
    67. }  
    68. </script>  
     

    Regards,

     

    Ken 

  •  03-11-2014, 10:23 AM 80055 in reply to 80044

    Re: AttachEvent for characters left

    We have also tried the CuteEditor_OnChange function, which also doesn't pick up the undo/redo clicks in firefox or chrome.

     

    And we also tried the CuteEditor_OnCommand function and it picks up the Undo/redo clicks but is a 'pre-process' action so it doesn't reflect the contents of the editor after the undo or redo action has occurred. 

     

    Remember, this works for us in IE, just not Firefox or Chrome.

     

    Any help at all to pick up the Cute Editor button clicks after the action has taken place would be greatly appreciated.  

  •  03-11-2014, 10:33 AM 80056 in reply to 80055

    Re: AttachEvent for characters left

    Thanks Ken, but I guess I wasn't clear what we are trying to do.  We give the editor's character count remaining and then show the number in red when its has passed the max length.  No need for a detachEvent.  However the counter isn't correct when an Undo or Redo action happens in Firefox and Chrome.

     

    So the real problem is our counter doesn't change when the user clicks the Undo or the Redo button....in Firefox and Chrome.  We need some event to look for that picks up a Cute Editor 'button up' (like keyup) that works in Firefox and Chrome...

     

     

  •  03-12-2014, 9:07 AM 80062 in reply to 80056

    Re: AttachEvent for characters left

    Hi SJochums,

     

    it has no API to catch the button up, but you can catch the button command by the api below.  It will fire when user click on anyone of the editor buttons.

     

    1. <script type="text/javascript">  
    2. function CuteEditor_OnCommand(editor,command,ui,value)  
    3.  {  
    4.     //handle the command by yourself  
    5.    if(command=="Undo")  
    6.    {  
    7.         alert("undo");  
    8.    }  
    9. }  
    10. </script>  
     

    Regards,

     

    Ken 

  •  03-17-2014, 10:02 AM 80097 in reply to 80062

    Re: AttachEvent for characters left

     Ken,

    That is true; the 'Undo' and 'Redo' commands are caught but BEFORE the action is done....so my character count down doesn't change even though the contents of the editor changed. 

    I need something that I can catch the event of the 'Undo' and 'Redo' buttons AFTER the action is done so I can get the character count of the contents once the undo/redo action is completed.

    This is pretty important to the client....and while the attached event function works great in IE, it doesn't in Firefox and Chrome.

  •  03-18-2014, 11:14 AM 80107 in reply to 80097

    Re: AttachEvent for characters left

    Hi SJochums,

     

    Then I suggest you remove the undo/redo button from the toolbar and create your custom button to achieve the undo/redo command, so you can fire another command after them. Like the example below.

     

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5.   
    6. <script runat="server">  
    7.     protected override void OnLoad(EventArgs e)  
    8.     {  
    9.         CuteEditor.ToolControl tc = editor1.ToolControls["mybutton"];  
    10.         if (tc != null)  
    11.         {  
    12.             System.Web.UI.WebControls.Image Image1 = new System.Web.UI.WebControls.Image();  
    13.             Image1.ImageUrl = "http://cutesoft.net/CuteSoft_Client/CuteEditor/Images/undo.gif";  
    14.             Image1.CssClass = "CuteEditorButton";  
    15.             Image1.Attributes["onclick"] = "CuteEditor_GetEditor(this).ExecCommand('Undo');alert('fire after undo!');";  
    16.             tc.Control.Controls.Add(Image1);  
    17.         }    
    18.         base.OnLoad(e);  
    19.     }  
    20. </script>  
    21.   
    22. <html xmlns="http://www.w3.org/1999/xhtml">  
    23. <head id="Head1" runat="server">  
    24.     <title>example</title>  
    25. </head>  
    26. <body>  
    27.     <form id="form1" runat="server">  
    28.         <CE:Editor ID="editor1" runat="server" TemplateItemList="[Bold,Italic]/[mybutton]" >  
    29.         </CE:Editor>  
    30.     </form>  
    31. </body>  
    32. </html>  
     

    Regards,

     

    Ken 

View as RSS news feed in XML