Charector limit in Rad:Editor

[Samrat Banerjee]

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.

[Rumen]

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.

[Samrat Banerjee]

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

[Rumen]

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.

[Samrat Banerjee]

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

[Rumen]

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.

[John]

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!!

[Rumen]

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.

[bill]

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

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

[Rumen]

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.

[Tai Nguyen]

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

[Rumen]

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.

[Maya]

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

[Dobromir]

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

[Maya]

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

[Dobromir]

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

[Maya]

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

[Dobromir]

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

[Ravishankar Baranwal]

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.

[Rumen]

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

[R]

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.

[Rumen]

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.

[R]

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>

[R]

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" />

[Waseem]

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

[Rumen]

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