Limit content to certain number of characters

9 posts, 0 answers
  1. John Billiris (JSBBS)
    John Billiris (JSBBS) avatar
    27 posts
    Member since:
    Mar 2007

    Posted 05 Dec 2007 Link to this post

    This is more a feature request than an issue...

    Is it possible to introduce a MaxLength property to limit the number of characters that is permissible in the RadEditor?
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 06 Dec 2007 Link to this post

    Hello,

    Thank you for your feature request. We logged it and we will consider its implementation.

    Currently, you can review the following help article which provides guidance how to restrict the HTML content added in the editor: get_Html.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John Billiris (JSBBS)
    John Billiris (JSBBS) avatar
    27 posts
    Member since:
    Mar 2007

    Posted 03 Feb 2008 Link to this post

    Thanks Rumen,

    However, when I enter text in and then swap over to the HTML editor and wrap the text in <html></html> tags, then swap back to the rich text editor, the events NO LONGER fire !!!

    So, I can't provide interactive feedback on the browser.

    Are you able to reproduce this ?
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 04 Feb 2008 Link to this post

    Hello jsbbs,

    When you switch to the HTML mode and wrap the text in <html></html> tags, then the editor switches its Rich Text Editing engine to work in Full HTML editing mode and reattaches again its eventhandlers. Thus you should reattach the custom onkeydown event again. Here is a sample code that will help you to see when the editor is switched to Design mode from Preview or Html modes:


                    editor.add_modeChange(function(sender, args)
                    {       
                        var mode = sender.get_mode();
                        if (mode == 1)
                        {          
                            editor.attachEventHandler("onkeydown", functionName);
                        }
                    }); 

     
    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. John Billiris (JSBBS)
    John Billiris (JSBBS) avatar
    27 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2008 Link to this post

    Rumen,

    Thanks, but ...

    1) the events are still not firing while I'm in HTML mode. I've even changed the javascript to check for mode == 2.

    2) the length of the string when I call get_Html() is different between the normal mode and HTML mode (it deviates more with the more text entered). My objective is to limit the number of characters entered irrespective of the edit mode the user chooses. Nevertheless, the length of the HTML shouldn't change when swapping between modes!

    FYI: I just checked my version of Telerik.Web.UI.dll; it is 2007.2.1107.0.
  7. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 08 Feb 2008 Link to this post

    Hi,

    The content area of Html mode is a textbox. Here is an example how to get a reference to this textarea and attach eventhandlers to it:

    var textarea = rtfEditor._getTextArea();                                       

    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);
    }

    Here is a sample example:

    <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._getTextArea().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._getTextArea();                                       

            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 regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Hessner
    Hessner avatar
    189 posts
    Member since:
    Mar 2003

    Posted 03 Aug 2008 Link to this post

    Hi, Rumen

    Do you have the updated javascript, for the latest version of r.a.d.editor AJAX?

    Have tried the script listed, with no success.

    Nice clientside solution, btw.

    The reason for me trying to use this code is that it seems that my validator no longer work (with the latest AJAX version:)
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
    ErrorMessage="Overskriften må max. indeholde 512 tegn." 
    Display="None" ControlToValidate="RadEditor1" 
    ValidationExpression="^.{1,512}">  
    </asp:RegularExpressionValidator> 

    Even with 1-2 characters it will fire.


    Regards,
    Bo Hessner
  9. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 04 Aug 2008 Link to this post

    Hi Hessner,

    Please, try to achieve your scenario using a CustomValidator control:

    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
    <asp:CustomValidator runat="server" ID="CustomValidator1" ClientValidationFunction="checkLength">*</asp:CustomValidator>  
    <asp:Button ID="button1" Text="Submit" runat="server" />  
    <script type="text/javascript">  
        var limitNum = 50;  
        var message = 'You are not able to type more than ' + limitNum + ' symbols!';  
          
        function checkLength(validator, args)  
        {  
            var editor = $find('<%=RadEditor1.ClientID%>');     // get a reference to RadEditor
            var editorText = editor.get_text();     //get the HTML content of the control
            args.IsValid = editorText.length < limitNum;  
        }  
    </script>

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Hessner
    Hessner avatar
    189 posts
    Member since:
    Mar 2003

    Posted 04 Aug 2008 Link to this post

    Super!

    Regards,
    Bo Hessner
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017