Charector limit in Rad:Editor

Thread is closed for posting
26 posts, 2 answers
  1. Samrat Banerjee
    Samrat Banerjee avatar
    10 posts
    Member since:
    Jun 2010

    Posted 27 Oct 2008 Link to this post

    Dear Telerik Support  Team,

    I am using Rad:Editor. I just want to know that how can i apply the charector limit in Rad:Editor. It will be very helpful for me if can suggest me how we can apply this feature using XML file.

    Regards

    Samrat Banerjee
    India.
  2. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 27 Oct 2008 Link to this post

    Hi Samrat,

    You can use the following symbol counter and limiter:

    <span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
    <telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>

    <script type="text/javascript">
    var limitNum = 250;
    var message = 'You are not able to type more than ' + limitNum + ' characters!';
    var counter = $get('counter');

    function LimitLength(mode)
    {                  
        var rtfEditor = $find("<%=RadEditor.ClientID %>");
        if (mode == 2){
         var oValue = rtfEditor.get_textArea().innerHTML.trim().length;
         }
        else{var oValue = rtfEditor.get_html(true).trim();}
     
        if (oValue.length >= limitNum)
        {
            rtfEditor.set_html(oValue.substring(0, limitNum - 1));
            alert(message);
        }  
        counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
    }

    function AttachHandlers(mode)
    {
                      
        var rtfEditor = $find("<%=RadEditor.ClientID %>");
        if(mode==1)
        {        
            rtfEditor.attachEventHandler("onkeyup", LimitLength);
            rtfEditor.attachEventHandler("onpaste", LimitLength);
            rtfEditor.attachEventHandler("onblur", LimitLength);
        }
        else
        {                              
            var textarea = rtfEditor.get_textArea();                                      

            if(window.attachEvent)
            {                              
                textarea.attachEvent("onkeydown", LimitLength);
                textarea.attachEvent("onpaste", LimitLength);
                textarea.attachEvent("onblur", LimitLength);
            }                            
            else
            {                      
               textarea.addEventListener("keyup",LimitLength, true);
               textarea.addEventListener("paste", LimitLength, true);
               textarea.addEventListener("blur", LimitLength, true);
            }
        }
    }

    function OnClientLoad(editor, args)
    {                  
        rtfEditor = editor;                      
        AttachHandlers(1);
        LimitLength(1);
                                                      
     
        editor.add_modeChange(function(sender, args)
        {      
           var mode = sender.get_mode();                   
           if (mode == 1 || mode == 2)
           {                                     
              AttachHandlers(mode);
              LimitLength(mode);
           }
      });
    }
    </script>

    Feel free to enhance the code to better fit your scenario.

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Samrat Banerjee
    Samrat Banerjee avatar
    10 posts
    Member since:
    Jun 2010

    Posted 17 Nov 2008 Link to this post

    Hi Telerik Team,

    I am sincerely thankful to your support and your helpful solution to my last query. It helped!!!

    I am currently working on this page having multiple instances of Rad:Editor generated by a RadEditor control which is kept inside a loop via code-behind template of that aspx page.
    I have generated different id's for the RadEditor control everytime it is rendered on the page inside the loop, to avoid ambiguities.

    e.g:-
    <!-- First Rad:Editor Control -->
    <div id="ctl00_MainContent_TextBox0_RadEditor1" class="radeditor Vista rade_wrapper" style="border-width: 0px; font-size: 9pt; height: 350px; width: 197px;">
           <div id="ctl00_MainContent_TextBox0_ctl00_MainContent_TextBox0_RadEditor1dialogOpener"
            style="display: none;"> ... </div>
        <table id="ctl00_MainContent_TextBox0_RadEditor1Wrapper" style="table-layout: auto;  width: 100%; height: 350px;" cellpadding="0" cellspacing="0">
            <tbody> ... </tbody>    </table>
    </div>

    <!-- Second Rad:Editor Control -->

    <div id="ctl00_MainContent_TextBox1_RadEditor1" class="radeditor Vista rade_wrapper" style="border-width: 0px; font-size: 9pt; height: 350px; width: 197px;">
           <div id="ctl00_MainContent_TextBox1_ctl00_MainContent_TextBox0_RadEditor1dialogOpener"
            style="display: none;"> ... </div>
        <table id="ctl00_MainContent_TextBox1_RadEditor1Wrapper" style="table-layout: auto;  width: 100%; height: 350px;" cellpadding="0" cellspacing="0">
            <tbody> ... </tbody>    </table>
    </div>

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    The javascript function you gave to me in your previous reply, works fine when I had single Rad:Editor control on my page but it did not respond or modify the remaining characters count on this page with multiple Rad:Editor controls.

    I did not know what I am missing here, or is it some ID redundancy related issue.
    I have so far -
    1. Tried passing static client-side ID's of the RadEditor controls to the JAVASCRIPT function -
     var rtfEditor = $find("<%=RadEditor.ClientID %>");

    "ctl00_MainContent_TextBox0_RadEditor1"
    "ctl00_MainContent_TextBox1_RadEditor1"
    But it didn't work out.

    2. I have tried putting seperate independent instances of Rad:Editor control on the aspx page keeping every id of subelements and controls unique but it didn't work out either.

    I assume this is a very tricky and rare scenario in developement life cycle.  Please guide me through this problem, I am kind of stuck here.

    Thanks,
    Samra



  5. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 17 Nov 2008 Link to this post

    Hi Sam,

    Here is an example demonstrating how to restrict the symbols of multiple editors on the page:

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="LimitCharacters"></telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor2" runat="server" OnClientLoad="LimitCharacters"></telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor3" runat="server" OnClientLoad="LimitCharacters"></telerik:RadEditor>

      <script type="text/javascript">
     
      var editorList = new Object();
      var editorLengthArray = [20,30,40];
      var counter = 0;
      
     
      function isAlphaNumericKey(keyCode)
      {
       if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
       {
        return true;
       }
       return false;
      }
     
      function LimitCharacters(editor)
      {       
     
          editorList[editor.get_id()] = editorLengthArray[counter];
          counter++;
         
          editor.attachEventHandler("onkeydown", function(e)
          {
            e = (e == null)? window.event : e;
            if (isAlphaNumericKey(e.keyCode))
            {  
                var maxTextLength = editorList[editor.get_id()];
                   
                textLength = editor.get_text().length;
                if (textLength >= maxTextLength)
                {
                    alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    e.returnValue = false;
                }
            }
           });
      }
      </script>

    Just type in the content area to see the alert message.


    Kind regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Samrat Banerjee
    Samrat Banerjee avatar
    10 posts
    Member since:
    Jun 2010

    Posted 04 Dec 2008 Link to this post

    Dear Telerik Support Team,

    I would like to give you thanks for solving my problem, which I asked you last time. I really appreciate your efforts of technical support. Your support really helps us. :-)

    I would like to ask you another point in my character limit query, the JavaScript function given by you is working absolutely file, but it is not working when user copy – paste the text in the editor. It is not affecting the counter even user can able to paste the text more than the character limit, also it is not working when user perform the same operation by using mouse.

     

    Can you help me out? Your help or support really solve my problem.

     

    Looking towards your great support.

    Thanks and Regards,
    Sam

  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 08 Dec 2008 Link to this post

    Hello Sam,

    You should attach an onpaste eventhandler which will be executed when the user pastes content in the editor. Here is an example:

    <span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
    <telerik:RadEditor ID="RadEditor" StripFormattingOptions="nonesupresscleanmessage" runat="server" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>

    <script type="text/javascript">
    var limitNum = 250;
    var message = 'You are not able to type more than ' + limitNum + ' characters!';
    var counter = $get('counter');

    function LimitLength(mode)
    {                 
        var rtfEditor = $find("<%=RadEditor.ClientID %>");
        if (mode == 2){
         var oValue = rtfEditor.get_textArea().innerHTML.trim().length;
         }
        else{var oValue = rtfEditor.get_html(true).trim();}
     
        if (oValue.length >= limitNum)
        {
            rtfEditor.set_html(oValue.substring(0, limitNum - 1));
            alert(message);
        } 
        counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
    }

    function AttachHandlers(mode)
    {
                     
        var rtfEditor = $find("<%=RadEditor.ClientID %>");
        if(mode==1)
        {       
            rtfEditor.attachEventHandler("onkeyup", LimitLength);
            rtfEditor.attachEventHandler("onpaste", LimitLength);
            rtfEditor.attachEventHandler("onblur", LimitLength);
        }
        else
        {                             
            var textarea = rtfEditor.get_textArea();         //returns a reference to the textarea in Html mode                            

            if(window.attachEvent)
            {                             
                textarea.attachEvent("onkeydown", LimitLength);
                textarea.attachEvent("onpaste", LimitLength);
                textarea.attachEvent("onblur", LimitLength);
            }                           
            else
            {                     
               textarea.addEventListener("keyup",LimitLength, true);
               textarea.addEventListener("paste", LimitLength, true);
               textarea.addEventListener("blur", LimitLength, true);
            }
        }
    }

    function OnClientLoad(editor, args)
    {                 
        rtfEditor = editor;                     
        AttachHandlers(1);
        LimitLength(1);
                                                     
     
        editor.add_modeChange(function(sender, args)
        {     
           var mode = sender.get_mode();                  
           if (mode == 1 || mode == 2)
           {                                    
              AttachHandlers(mode);
              LimitLength(mode);
           }
      });
    }
    </script>

    Best wishes,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. John
    John avatar
    41 posts
    Member since:
    Nov 2007

    Posted 16 Apr 2009 Link to this post

    Hi!

    The character limitation works almost fine for us but there is still a (or two ;) question(s) left. Attaching to the onpaste event handler doesn't work properly because it is called before the paste is done. Thus retrieving the content of the editor will not give you the content after pasting and the "old" text is tested whether the length is correct or not. I also tried to use the OnClientPasteHtml function but wasn't successful yet.

    Could you provide a solution for that problem?

    The other thing I'd like to ask if there is a possibility also catching the "rightclick-paste" which is not working yet?

    Many thanks in advance!!
  9. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 20 Apr 2009 Link to this post

    Hi Bidan,

    Please, try the following example:

    <script type="text/javascript">  
    var maxTextLength = 30;  
    var messageText = 'You are not able to type more than ' + maxTextLength + ' symbols!';    
         
     function isAlphaNumericKey(keyCode)    
     {    
          if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))    
          {    
              return true;    
          }    
          return false;    
     }    
         
     function LimitCharacters(editor)    
     {    
         editor.attachEventHandler ("keydown"function (e)    
         {    
             e = (e == null)? window.event : e;    
             if (isAlphaNumericKey(e.keyCode))    
             {    
                 textLength = editor.get_text().length;    
                 if (textLength >= maxTextLength)    
                 {    
                      alert(messageText);    
                      e.returnValue = false;    
                      return false;    
                 }    
             }    
          });    
     }    
      
     function CalculateLength(editor, value)  
     {  
         var textLength = editor.get_text().length;  
         var clipboardLength = value.length;  
         textLength += clipboardLength;  
         return textLength;  
     }  
      
     function OnClientPasteHtml(editor, args)  
     {  
        var commandName = args.get_commandName();     
        var value = args.get_value();  
          
            if (commandName == "PasteFromWord"  
                || commandName == "PasteFromWordNoFontsNoSizes"  
                || commandName == "PastePlainText"  
                || commandName == "PasteAsHtml"  
                || commandName == "Paste" )  
            {  
                var textLength = CalculateLength (editor, value);  
                if (textLength >= maxTextLength)  
                {  
                  alert("You are not allowed to enter more that 30 symbols");  
                  args.set_cancel(true);  
      
                }  
            }   
     }  
    </script>  
    <telerik:RadEditor id="RadEditor1" OnClientPasteHtml="OnClientPasteHtml" OnClientLoad="LimitCharacters"  
        Runat="server">  
        <Content></Content>  
    </telerik:RadEditor>   


    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. bill
    bill avatar
    2 posts
    Member since:
    Dec 2008

    Posted 26 Aug 2009 Link to this post

    Hi,

    I've taken the previous script examples and am trying to limit character content for multiple RadEditor controls on a single page.

    Typing beyond the specified character limits is handled correctly, as well as using the commands "Paste from Word", "Paste Plain Text", and "Paste As Html" when the [clipboard content + previous text entered] exceeds the specified character limits.

    However, the paste command from a simple right click-paste or using the Edit/Paste function from the Menu... or ctl V does not result in the alert message that the limits have been exceeded.

    Shown below is the code that I've been using.

    Please let me know what I can do to resolve this.

    Thanks in advance.

    ====================================================================================================
    <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="contentPage.aspx.vb" Inherits="contentPage" title="Untitled Page" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     
    <script type="text/javascript" src="limitCharacters2.js"></script>

    <telerik:RadEditor ID="RadEditorHeadline" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content></telerik:RadEditor>
           
    <telerik:RadEditor ID="RadEditorPurpose" runat="server" OnClientLoad="LimitCharacters" NewLineBr="False" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content></telerik:RadEditor>  

    </asp:Content>

     

     

    //======================================================================================================== 

    //limitCharacters2.js

    //========================================================================================================
    // JavaScript File to limit characters entered into Prometheus Rad Editor control

    var editorList= new Object();
    var editorLengthArray = [80,80,80];
    var counter = 0;

    function isAlphaNumericKey(keyCode)
      {
       if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
       {
        return true;
       }
       return false;
      }
     
    function LimitCharacters(editor)
      {       
     
          editorList[editor.get_id()] = editorLengthArray[counter];
          counter++;
         
          editor.attachEventHandler("onkeydown", function(e)
          {
            e = (e == null)? window.event : e;
            if (isAlphaNumericKey(e.keyCode))
            {  
                var maxTextLength = editorList[editor.get_id()];
                   
                textLength = editor.get_text().length;
                if (textLength >= maxTextLength)
                {
                    alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                
                    e.returnValue = false;
                }
            }
           });
      }

    function CalculateLength(editor, value)  
     {  
         var textLength = editor.get_text().length;  
         var clipboardLength = value.length;  
         textLength += clipboardLength;  
         return textLength;  
     }  
      
    function OnClientPasteHtml(editor, args)  
     {  
        var maxTextLength = editorList[editor.get_id()];
        var commandName = args.get_commandName();     
        var value = args.get_value();  
          
            if (commandName == "PasteFromWord"  
                || commandName == "PasteFromWordNoFontsNoSizes"  
                || commandName == "PastePlainText"  
                || commandName == "PasteAsHtml"  
                || commandName == "Paste" )  
            {  
                var textLength = CalculateLength (editor, value);  
                if (textLength >= maxTextLength)  
                {  
                  alert('You are not able to type more than ' + maxTextLength + ' symbols!'); 
                  args.set_cancel(true);  
      
                }  
            }   
     }  


    //======================================================================================================
  11. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 31 Aug 2009 Link to this post

    Hi Bill,

    Please, try the following code enhancement of the solution:

    <telerik:RadEditor ID="RadEditorHeadline" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml"
    <Content></Content></telerik:RadEditor> 
            
    <telerik:RadEditor ID="RadEditorPurpose" runat="server" OnClientLoad="LimitCharacters" NewLineBr="False" OnClientPasteHtml="OnClientPasteHtml"
    <Content></Content></telerik:RadEditor>  
     
    <script type="text/javascript"
        var editorList= new Object(); 
        var editorLengthArray = [20,30]; 
        var counter = 0; 
     
        function isAlphaNumericKey(keyCode) 
        { 
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) 
            { 
                return true
            } 
            return false
        } 
      
        function LimitCharacters(editor) 
        {        
          editorList[editor.get_id()] = editorLengthArray[counter]; 
          counter++; 
          
          editor.attachEventHandler("onkeydown"function(e) 
          { 
            e = (e == null)? window.event : e; 
            if (isAlphaNumericKey(e.keyCode)) 
            {   
                var maxTextLength = editorList[editor.get_id()]; 
                    
                textLength = editor.get_text().length; 
                if (textLength >= maxTextLength) 
                { 
                    alert('You are not able to type more than ' + maxTextLength + ' symbols!'); 
                 
                    e.returnValue = false
                } 
            } 
           }); 
            
            var element = document.all ? editor.get_document().body : editor.get_document(); 
            $telerik.addExternalHandler(element, "paste"function(e) 
            {    
                    e = (e == null)? window.event : e; 
     
                    var maxTextLength = editorList[editor.get_id()]; 
                        textLength = editor.get_text().length; 
                         
                        var clipboardLength = window.clipboardData.getData("Text").length; 
                        textLength += clipboardLength; 
                        if (textLength >= maxTextLength) 
                        { 
                            alert('You are not able to type more than ' + maxTextLength + ' symbols!'); 
                            e.returnValue = false
                            return false
     
                        } 
            }); 
        } 
     
        function CalculateLength(editor, value)   
         {   
             var textLength = editor.get_text().length;   
             var clipboardLength = value.length;   
             textLength += clipboardLength;   
             return textLength;   
         }   
           
        function OnClientPasteHtml(editor, args)   
         {   
            var maxTextLength = editorList[editor.get_id()]; 
            var commandName = args.get_commandName();      
            var value = args.get_value();   
               
                if (commandName == "PasteFromWord"   
                    || commandName == "PasteFromWordNoFontsNoSizes"   
                    || commandName == "PastePlainText"   
                    || commandName == "PasteAsHtml"   
                    || commandName == "Paste" )   
                {   
                    var textLength = CalculateLength (editor, value);   
                    if (textLength >= maxTextLength)   
                    {   
                      alert('You are not able to type more than ' + maxTextLength + ' symbols!');  
                      args.set_cancel(true);   
           
                    }   
                }    
         }     
     </script> 
     

    It works on my side when pasting content with Ctrl+V, via the Paste option in the context menu as well as the Paste option in the toolbar Edit menu.

    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  12. Tai Nguyen
    Tai Nguyen avatar
    1 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    Hi Telerik Team,

    Your's solution work fine in IE but not work in FireFox version 3.5.5. When user type more chars, the message show but inputed chars still showed in the editor.

    Please help.
    Thanks

    nat
  13. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 27 Nov 2009 Link to this post

    Hi Nat,

    This problem is due to a bug in Firefox. To solve it you should not fire the alert() from the following statement: if (textLength > maxTextLength) located inside the LimitCharacters() function, e.g.
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content></telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor2" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content></telerik:RadEditor> 
     <div id="counter"></div>
    <script type="text/javascript">
        var editorList= new Object();
        var editorLengthArray = [20,30];
        var counter = 0;
         
        function isAlphaNumericKey(keyCode)
        {
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
            {
                return true;
            }
            return false;
        }
       
        function LimitCharacters(editor)
        {       
          editorList[editor.get_id()] = editorLengthArray[counter];
          counter++;
          editor.attachEventHandler("onkeydown", function(e)
          {
            e = (e == null)? window.event : e;
            if (isAlphaNumericKey(e.keyCode))
            {  
                var maxTextLength = editorList[editor.get_id()];
                textLength = editor.get_text().length;
                if (textLength >= maxTextLength)
                {
                    if ($telerik.isIE)
                    {
                      alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    }
                    $telerik.cancelRawEvent(e);
                }
            }
           });
            var element = document.all ? editor.get_document().body : editor.get_document();
            $telerik.addExternalHandler(element, "paste", function(e)
            {   
                    e = (e == null)? window.event : e;
      
                    var maxTextLength = editorList[editor.get_id()];
                        textLength = editor.get_text().length;
                          
                        var clipboardLength = window.clipboardData.getData("Text").length;
                        textLength += clipboardLength;
                        if (textLength >= maxTextLength)
                        {
                            alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                            e.returnValue = false;
                            return false;
      
                        }
            });
        }
      
        function CalculateLength(editor, value)  
         {  
             var textLength = editor.get_text().length;  
             var clipboardLength = value.length;  
             textLength += clipboardLength;  
             return textLength;  
         }  
            
        function OnClientPasteHtml(editor, args)  
         {  
            var maxTextLength = editorList[editor.get_id()];
            var commandName = args.get_commandName();     
            var value = args.get_value();  
                
                if (commandName == "PasteFromWord"  
                    || commandName == "PasteFromWordNoFontsNoSizes"  
                    || commandName == "PastePlainText"  
                    || commandName == "PasteAsHtml"  
                    || commandName == "Paste" )  
                {  
                    var textLength = CalculateLength (editor, value);  
                    if (textLength >= maxTextLength)  
                    {  
                      alert('You are not able to type more than ' + maxTextLength + ' symbols!'); 
                      args.set_cancel(true);  
            
                    }  
                }   
         }    
     </script>

    Of course this is not user friendly and you should add a label over or below the editor that notifies the user that there is characters restriction.

    Please also note that in Q3 2009 we introduced two new properties in RadEditor: the MaxTextLength and MaxHtmlLength properties check the character length when submitting the content. We decided to implement them in this way because if we check the content length on paste and / or on onkeydown then this will decrease performance and will slow down the typing / editing of large content. This is how these properties are implemented in the competitors' DHTML editors as well.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  14. Maya
    Maya avatar
    3 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    Hello,

    Thanks a lot for all the useful info.
    I need your help , can you please tell me how I can show remaining charectore as user types in the radEditor.
    I would like to show the remaining charectors outside the radEditor perhaps as a Label
    I have googled a bit but didn't find any useful material.


    Thanks
  15. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 20 Jul 2010 Link to this post

    Hi Maya,

    To achieve the required functionality you need to add a label (or an input element), and change its displayed text (or value) in the OnKeyDown and Paste event handlers, assigned to the RadEditor inside LimitCharacters() function, e.g.:
    function LimitCharacters(editor)
    {
        editorList[editor.get_id()] = editorLengthArray[counter];
        counter++;
        editor.attachEventHandler("onkeydown", function (e)
        {
            e = (e == null) ? window.event : e;
            if (isAlphaNumericKey(e.keyCode))
            {
                var maxTextLength = editorList[editor.get_id()];
                textLength = editor.get_text().length;
     
                if (textLength >= maxTextLength)
                {
                    if ($telerik.isIE)
                    {
                        alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    }
                    $telerik.cancelRawEvent(e);
                }
            }
            //modification regarding remaining characters
            var counterDisplay = document.getElementById("editor1Counter"); //editorCounter1 is a HTML label element
            counterDisplay.innerHTML = "Remaining characters: " + parseInt(maxTextLength - textLength - 1);
     
        });
        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "paste", function (e)
        {
            e = (e == null) ? window.event : e;
     
            var maxTextLength = editorList[editor.get_id()];
            textLength = editor.get_text().length;
     
            var clipboardLength = window.clipboardData.getData("Text").length;
            textLength += clipboardLength;
     
            //modification regarding remaining characters
            var counterDisplay = document.getElementById("editor1Counter"); //editorCounter1 is a HTML label element
            counterDisplay.innerHTML = "Remaining characters: " + parseInt(maxTextLength - textLength - 1);
     
            if (textLength >= maxTextLength)
            {
                alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                e.returnValue = false;
                return false;
     
            }
        });
    }
     
     

    Best wishes,
    Dobromir
    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
  16. Maya
    Maya avatar
    3 posts
    Member since:
    Jun 2010

    Posted 22 Jul 2010 Link to this post

    Hello Telerik Team,

     

    Thanks a lot for the reply.

    I am trying to use the code,but still its not working for me!
    I have this code in my .aspx file and I have  <asp:Label ID="..." runat="server" Text="..." Css="FormTitle"></asp:Label>
    what else should I do??


    Thanks in advance

  17. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 26 Jul 2010 Link to this post

    Hi Maya,

    Could you please be more specific regarding the problem that occurs and the exact implementation?

    Please find attached a sample project using the approach suggested in this thread. Could you please modify it to a point where the problem occurs and send it back so we can investigate it further?

    Sincerely yours,
    Dobromir
    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
  18. Maya
    Maya avatar
    3 posts
    Member since:
    Jun 2010

    Posted 27 Jul 2010 Link to this post

    Hi Telerik Team,

    The code you provided does not work completely.
    These are the points where its not working as it should.
    1. it starts with Charector NaN and then 19,18, instead of showing 20 in front of text: remaining charectores.
    2. when you start a new line, it goes back to maxLenght and starts counting all over again.
    3. the counter doesnt count the Bold/Italic/bullet List/ Number list



    Thanks
  19. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 30 Jul 2010 Link to this post

    Hi Maya,

    Please find attached a modified sample page where the problem with NaN is fixed. Regarding the other two problems I was unable to reproduce them. Please check the code and let me know if I am missing something.

    Also, please note that this is a just a sample and you might need to modify it to meet the exact requirements.

    Best wishes,
    Dobromir
    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
  20. Ravishankar Baranwal
    Ravishankar Baranwal avatar
    3 posts
    Member since:
    Mar 2009

    Posted 29 Oct 2010 Link to this post

    I am using rad editor control in one of my sitefinity application. Here i have to add the content as given bellow in attached snap. Please help that how the enduser will make the entries in the rad editor. What we have to do extra to provide such kind of facility.
  21. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 01 Nov 2010 Link to this post

    Hello Ravishankar,

    You can right click on the image, choose Properties... item, set the Alignment selector to Left and press OK.
    See the attached video for more information: http://screencast.com/t/sb9uvtDg.

    Kind regards,
    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
  22. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 09 Sep 2011 Link to this post

    I have used this code with
    <script type="text/javascript" defer="defer">

    It did not work without the defer - I got error "LimitCharacters" is undefined. With the defer it works.
    But when I switch to compatibility view in IE9, I get "LimitCharacters" is undefined. Any ideas how to solve this problem?
    Thanks.
  23. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 13 Sep 2011 Link to this post

    Hello R,

    I tested the following code default.zip in compatibility view in IE9 and I was unable to reproduce the problem. Could you please see the following video http://screencast.com/t/76g5Mc26ar and let me know what I am missing?

    All the best,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  24. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    All the javascript code looks the same as what you have. This is the asp code.
    Maybe something here is throwing compatibility mode off?

    <
    style type="text/css">
            .buttonAsLink
            {
              background-color:transparent;
              border:none;
              color:blue;
              cursor:pointer;
              text-decoration:underline;
              font-weight:bold;
            }
        </style>
     
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ACDConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [ACD_Test].[dbo].[View_ConsRec] WHERE ([FileName] = @FileName)">
        <SelectParameters>
            <asp:Parameter Name="FileName" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ACDConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [ACD_Test].[dbo].[View_ProjDocs] WHERE ([FileName] = @FileName)">
        <SelectParameters>
            <asp:Parameter Name="FileName" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
     
    <%-- RC-9/11 --%>
    <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ACDConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [ACD_Test].[dbo].[View_PhysFeatureDocs] WHERE ([FileName] = @FileName)">
        <SelectParameters>
            <asp:Parameter Name="FileName" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:ACDConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [ACD_Test].[dbo].[View_ObjDocs] WHERE ([FileName] = @FileName)">
        <SelectParameters>
            <asp:Parameter Name="FileName" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <%-- RC-9/11 END --%>
     
    <table runat="server" style="width: 100%" id="ToolTipWrapper" border="0" cellpadding="2"
        cellspacing="0">
        <tr>
            <td style="text-align: center;">
             
                <asp:FormView ID="FileNameView" DataKeyNames="FileName" runat="server" OnDataBound="ToolTipView_DataBound">
                    <ItemTemplate>
     
                        <asp:Label CssClass="title" ID="Category" runat="server"><%# Eval("FileName")%></asp:Label>
                        <hr />
                        <asp:Image ID="image" runat="server" ImageUrl='<%# Eval("UrlAddress") %>' />
                        <br />                  
                        <%-- RC-9/8/11 --%>
                        <center>
                            <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml" EditModes="All"
                                ToolsFile="~/EditorToolBar/Tools.xml" Width="600px" Height="100px" OnInit="RadEditor1_Init" ForeColor="Black" Font-Bold="true" Font-Size="Small"
                                Content='<%# (Eval("Notes") == DBNull.Value || Eval("Notes") == "" || Eval("Notes").ToString() == "null") ? "" : Eval("Notes") %>'>
                                <CssFiles>
                                    <telerik:EditorCssFile Value="~/Styles/RadEditorStyleOverrides.css" />
                                </CssFiles>
                            </telerik:RadEditor>
     
                            <asp:Button ID="BtnEdit" runat="server" BorderStyle="None" OnClick="BtnEdit_Click" Text="Edit" CssClass="buttonAsLink" UseSubmitBehavior="false" Visible="false"/>
                            <asp:Button ID="BtnSave" runat="server" OnClick="BtnSave_Click" Text="Save" UseSubmitBehavior="false"/>
                            <asp:Button ID="BtnCancel" runat="server" OnClick="BtnCancel_Click" Text="Cancel" UseSubmitBehavior="false" />
                        </center>
                        <%-- RC-9/8/11 END --%>
     
                    </ItemTemplate>
                </asp:FormView>
     
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LblMessage" runat="server" Text=""></asp:Label>
            </td>
        </tr>
    </table>
  25. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    I figured it out. It was a matter of not having the following in my header:
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=5" />
  26. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 19 Mar 2013 Link to this post

    Hi  RumenRumen








    I want to stop entering characters. when it come to maxlength and want to show customvalidator active. when it reaches its maxlength.
    I don't want to show alerts.

    ASPX:
        <telerik:RadEditor ToolbarMode="Default" BorderStyle="None" ID="txtComments" EditModes="Design"
           BorderWidth="0" BorderColor="Transparent" ExternalDialogsPath="~/EditorDialogs"
           runat="server" Height="190" Width="575"></telerik:RadEditor>

    <asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="checkLength"
                                        runat="server" ControlToValidate="txtComments" ValidationGroup="GrpSave" CssClass="Error_text"
                                        Display="Dynamic" Text="Comments should not contain more than 6,000 characters.">                     </asp:CustomValidator>

                                    <script type="text/javascript">
                                        function checkLength(sender, args) {
                                            var editorText = args.Value;
                                            if (editorText.length > 6000) {
                                                args.IsValid = false;
                                            }
                                            else {
                                                args.IsValid = true;
                                            }
                                        }  
                                    </script>
    <asp:Button ID="btnSave" runat="server" Text="Save" ValidationGroup="GrpSave" />

    I just want to stop it , when it reaches maxlength and want to custom validator message. so we don't confuse why we can't enter characters instead of clicking on save button.

    Thanks,
    Muhammad Waseem
    the telerik team








  27. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 20 Mar 2013 Link to this post

    Hello,

    In such case you should attach to the keydown event and cancel the typing when the specified characters length is reached as shown in my earlier posts, for example: http://www.telerik.com/community/forums/aspnet-ajax/chart/charector-limit-in-rad-editor.aspx#662718.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017