This is a migrated thread and some comments may be shown as answers.

Limit content to certain number of characters

8 Answers 580 Views
Editor
This is a migrated thread and some comments may be shown as answers.
John Billiris (JSBBS)
Top achievements
Rank 1
John Billiris (JSBBS) asked on 05 Dec 2007, 11:44 PM
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?

8 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 06 Dec 2007, 07:43 AM
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
0
John Billiris (JSBBS)
Top achievements
Rank 1
answered on 04 Feb 2008, 01:06 AM
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 ?
0
Rumen
Telerik team
answered on 04 Feb 2008, 03:28 PM
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
0
John Billiris (JSBBS)
Top achievements
Rank 1
answered on 05 Feb 2008, 02:23 AM
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.
0
Rumen
Telerik team
answered on 08 Feb 2008, 04:15 PM
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
0
Hessner
Top achievements
Rank 2
answered on 03 Aug 2008, 06:01 PM
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
0
Rumen
Telerik team
answered on 04 Aug 2008, 09:08 AM
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.
0
Hessner
Top achievements
Rank 2
answered on 04 Aug 2008, 10:40 AM
Super!

Regards,
Bo Hessner
Tags
Editor
Asked by
John Billiris (JSBBS)
Top achievements
Rank 1
Answers by
Rumen
Telerik team
John Billiris (JSBBS)
Top achievements
Rank 1
Hessner
Top achievements
Rank 2
Share this question
or