Radeditor count length on text without HTML

2 posts, 0 answers
  1. Örjan
    Örjan avatar
    1 posts
    Member since:
    Dec 2016

    Posted 08 Dec 2016 Link to this post

    Hi,
    I have a problem with the Radeditor and counting the length of the text inside it. When I use a JavaScript with the get_text() function the length is different from when I use Radeditor.Text.Length in code behind. I want both for client and server side validation.

    It seems like they count Enter key differently. Radeditor.Text.Length count them as two characters regardless how many I use. So one Enter key is two chars and five enter key is also two chars. It trims it down or something.

    The JavaScript count every enter key as one characters unless it’s a line with no text between two lines with text, then it counts that enter key as two characters.

    This is my code and everything is working fine it’s just that they are counting different when it comes to enter key.

    //Validates the length against the maxlength allowed
    _radEditorLengthCheck: function (sender, args) {
     
           //Gets the maxLength property in my settings class
           var maxLength = this.data.maxLength;
     
           if (maxLength > 0) {
               var editor = this.data.controls.get_editor();
               var value = editor.get_text();
               args.IsValid = value.length <= maxLength;          
           }
           else {
               args.IsValid = true;
           }
       },

     

    //Updates a label counter so the user can se how many characters when blur
    handle_blur: function (sender, args) {
           var countlabel = this.data.objects.windowOriginalValue.data.controls.get_charCounter();
           var editor = this.data.controls.get_editor();
           var element = editor.get_contentArea();
     
           $telerik.addExternalHandler(element, "blur", function (e) {      
               var value = editor.get_text();          
               countlabel.innerHTML = value.length;
           });
       }

     

    //Client side validator
    protected void EditorLengthValidator_ServerValidate(object source, ServerValidateEventArgs args)
       {
               // force Text-property to update
               Radeditor.Content = Radeditor.Content;
     
               string noHTML = Radeditor.Text;
               args.IsValid = noHTML.Length <= MaxLength;
     
               //Update the Label that shows the count
               LCounterChars.InnerText = noHTML.Length.ToString();
       }

     

  2. Ianko
    Admin
    Ianko avatar
    1914 posts

    Posted 13 Dec 2016 Link to this post

    Hello Örjan,

    The described behavior seems to be a bug. You can monitor it via this item: https://feedback.telerik.com/Project/108/Feedback/Details/207672

    Here you are a code example how you could correct that: 

    ASPX

    <telerik:RadEditor runat="server" ID="RadEditor1"></telerik:RadEditor
     
    Client-side length: <asp:TextBox runat="server" ID="clientSideLength" />
    Server-side length: <asp:TextBox runat="server" ID="serverSideLength"/>
    <br />
    Client-side text:     <asp:TextBox runat="server" ID="clientSideText" />
    Server-side text:     <asp:TextBox runat="server" ID="serverSideText"/>
    <br />
    <asp:Button Text="Post back" runat="server" OnClientClick="checkLength();" OnClick="Unnamed_Click" />
     
    <script>
        function checkLength() {
            var $ = $telerik.$;
            var editor = $find("<%= RadEditor1.ClientID %>")
            var clientTB = $get("<%= clientSideLength.ClientID %>");
            var clientSideText = $get("<%= clientSideText.ClientID %>");
             
            var plainText = editor.get_text({ trimText: true, removeMultipleSpaces: true }).replace(/\n/g, " \n");
             
            $(clientTB).val(plainText.length);
            $(clientSideText).val(plainText);
        }
    </script>

    C#
    protected void Unnamed_Click(object sender, EventArgs e)
    {
        var plainText = RadEditor1.Text;
     
        while (plainText.Contains("\n\n"))
        {
            plainText = plainText.Replace("\n\n", "\n");
        }
     
        serverSideLength.Text = plainText.Length.ToString();
        serverSideText.Text = plainText;
    }


    Regards,
    Ianko
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top