Re: How to display javascript alert for exceeding text length?

  •  01-19-2011, 6:58 PM

    Re: How to display javascript alert for exceeding text length?

    Dear karmyogi,
     
    Please refer to the following snippet:
    <%@ Page Language="C#"%>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <html>
        <head>
      <title>JavaScript API</title>
       <script language="JavaScript" type="text/javascript" >    
           function CE_attachEvent() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');
               //Get the editor content 
               var editdoc = editor1.GetDocument();
               // attach Event
               if (editdoc.attachEvent)
                   editdoc.attachEvent('onkeypress', HandleChange);
               else if (editdoc.addEventListener)
                   editdoc.addEventListener('keypress', HandleChange, true);
           }
           function CE_detachEvent() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');
               //Get the editor content 
               var editdoc = editor1.GetDocument();
               // detach Event
               if (editdoc.detachEvent)
                   editdoc.detachEvent('onkeypress', HandleChange);
               else if (editdoc.removeEventListener)
                   editdoc.removeEventListener('keypress', HandleChange, true);
           }
           function HandleChange() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');           // Get the editor HTML
               text = editor1.getHTML();
               if (text.length > 10) {
                   alert("the string length is limited to 10");
               }
           }      
      </script>
      <script runat="server">
      override protected void OnInit(EventArgs e)
      {
       base.OnInit(e); 
      }
      </script>
     <body>
            <form id="Form1" runat="server">  
       <table cellpadding="15">
        <tr>     
         <td>
          <h1>JavaScript API</h1>
          This example shows you how to use CuteEditor JavaScript API to customize the application.
          <br /><br />
          <CE:Editor id="Editor1" Width="560" TemplateItemList="[Save,Bold,Italic,Underline,InsertChars,InsertEmotion]" ThemeType="OfficeXP" Height="250" EditorWysiwygModeCss="../example.css" runat="server"></CE:Editor><br />
          <p style="width:600">    
          <INPUT type=button value="attach Event (onkeypress)" onclick="CE_attachEvent()">
          <INPUT type=button value="detach Event (onkeypress)" onclick="CE_detachEvent()">
          </P>
              </td>
        </tr>
       </table> 
      </form>
     </body>
    </html>
    <script language="JavaScript" type="text/javascript" >
        var editor1 = document.getElementById("<%=Editor1.ClientID%>");
        if (editor1.IsReady) CuteEditor_OnInitialized(editor);
           function CuteEditor_OnChange(editor) {
            }      
        </script>
     
    Thank you for asking
View Complete Thread