Statistics module character count not accurate

5 posts, 1 answers
  1. Danielle
    Danielle avatar
    5 posts
    Member since:
    Mar 2019

    Posted 06 Aug 2019 Link to this post

    When I am using the statistics module I'm getting a completely different character count than when I process the content on the backend using controlName.Content.  When comparing the text, the content I receive on the backend is processed with paragraph tags instead of line breaks where the content on the front end is not.

    Is there a way to get an accurate count of characters on the front end?  Because my customer is complaining that the statistics module says they have 34 characters left when our back-end validation is showing they are over by a few characters.

    The first characters in the text processed by the backend is "<p>".  This does not appear at all in the front-end validation text string.

  2. Rumen
    Admin
    Rumen avatar
    14280 posts

    Posted 08 Aug 2019 Link to this post

    Hello,

    Can you provide the content that caused this problem so that I can examine it?

    For example if the content is not well formed you may experience such discrepancy.

    Also can you share the RadEditor configuration and how do you validate the content on the client? 

    You can customize the Statistics module since by design it does not count the special punctuation symbols - examples - https://www.telerik.com/forums/how-to-make-statistics-module-fire-for-every-keystroke#PfHC1gThR0OejXkCDFCUtg and https://www.telerik.com/forums/character-limit-in-radeditor-d6daa80bc0a1#h7_KS7kQaEirX8O20MLPsA.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Danielle
    Danielle avatar
    5 posts
    Member since:
    Mar 2019

    Posted 08 Aug 2019 in reply to Rumen Link to this post

    <telerik:RadEditor RenderMode="Lightweight" runat="server" Visible="false" ID="reTest" SkinID="DefaultSetOfTools"  Height="100px" EditModes="Design" Width="100%">
        <Tools>       
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="AjaxSpellCheck" />
            </telerik:EditorToolGroup>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Cut"/>
                <telerik:EditorTool Name="Copy"/>
                <telerik:EditorTool Name="PastePlainText"/>
                <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
            </telerik:EditorToolGroup>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="FindAndReplace" />
                <telerik:EditorTool Name="Undo" />
                <telerik:EditorTool Name="Redo" />
            </telerik:EditorToolGroup>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Bold" />
                <telerik:EditorTool Name="Underline" />
                <telerik:EditorTool Name="InsertUnorderedList" />
                <telerik:EditorTool Name="ToggleScreenMode" Text="Toggle between Minimized/FullScreen Modes" />
            </telerik:EditorToolGroup>
        </Tools>
        <Modules>
            <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
        </Modules>
    </telerik:RadEditor>

    Above is my code for the radeditor.  I'm also using some javascript as I've tried a few things to attempt to get the count closer to what the code-behind returns and I've added the keystroke event handler customization.

    Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.render = function () {
        originalRender.apply(this);
     
        this.get_editor().remove_selectionChange(this._onDoCountDelegate);
        this.get_editor().attachEventHandler("onkeyup", this._onDoCountDelegate);
        this.get_editor().attachEventHandler("onbeforepaste", this._onDoCountDelegate);
    };

     

    And the following (I've tried this in a few ways)

    Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.doCount = function () {
        var that = this;
        if (!that.get_visible()) return;
     
        //var text = that.get_editor().get_text({ removeMultipleSpaces: false });
        var text = that.get_editor().get_html();
        text = text.replace(that._trimNewLineCharsRegExp, "");
         
     
        var wordsCount = that._getWordsCount(text);
        var charsCount = that._getCharactersCount(text);
     
        that._renderCounts(wordsCount, charsCount);
        };
    }

     

    When inputting the following text without the quotes, I receive a character count of 548 on the front end and 558 from the codebehind. I am using VB. 

    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in eros egestas, egestas mauris sit amet, sagittis nisl. Sed non porttitor nisl, eget pulvinar nunc. Nam commodo aliquet elit. Sed volutpat dignissim ex vel ultricies. Proin augue odio, semper eu convallis a, sodales eu lacus. Integer sit amet lacus lacus. Phasellus nec iaculis eros, ut fringilla dui. Nam laoreet felis non aliquam viverra. Sed ut dui augue. Proin mi mi, finibus lobortis elit vitae, auctor fermentum quam.

    Etiam aliquet, nunc quis convallis ornare, fe "

    When I run a length against the content using the following, the character count drops to 550 characters, but I still can't get it to match the front end.

    reTest.Content.Trim().Replace(Microsoft.VisualBasic.Constants.vbCrLf, "").Length
  4. Answer
    Rumen
    Admin
    Rumen avatar
    14280 posts

    Posted 09 Aug 2019 Link to this post

    Hi Danielle,

    Thank you for the provided example!

    Can you please try to disable the content filters ContentFilters="None" of RadEditor, since they modify the <br> tags to <br /> as well as sanitize the content which makes the content in the editor iframe content area to be different of this when going to HTML mode or when submitting it to the server:

    ASPX
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
                    <script>
                        Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.doCount = function () {
                            var that = this;
                            if (!that.get_visible()) return;
     
                            //var text = that.get_editor().get_text({ removeMultipleSpaces: false });
                            var text = that.get_editor().get_html();
                            text = text.replace(that._trimNewLineCharsRegExp, "");
     
     
                            var wordsCount = that._getWordsCount(text);
                            var charsCount = that._getCharactersCount(text);
     
                            that._renderCounts(wordsCount, charsCount);
                        };
     
            </script>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="reTest" Height="500px" ContentFilters="None">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="AjaxSpellCheck" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Cut" />
                        <telerik:EditorTool Name="Copy" />
                        <telerik:EditorTool Name="PastePlainText" />
                        <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="FindAndReplace" />
                        <telerik:EditorTool Name="Undo" />
                        <telerik:EditorTool Name="Redo" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Bold" />
                        <telerik:EditorTool Name="Underline" />
                        <telerik:EditorTool Name="InsertUnorderedList" />
                        <telerik:EditorTool Name="ToggleScreenMode" Text="Toggle between Minimized/FullScreen Modes" />
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in eros egestas, egestas mauris sit amet, sagittis nisl. Sed non porttitor nisl, eget pulvinar nunc. Nam commodo aliquet elit. Sed volutpat dignissim ex vel ultricies. Proin augue odio, semper eu convallis a, sodales eu lacus. Integer sit amet lacus lacus. Phasellus nec iaculis eros, ut fringilla dui. Nam laoreet felis non aliquam viverra. Sed ut dui augue. Proin mi mi, finibus lobortis elit vitae, auctor fermentum quam. <br />
    <br />
    Etiam aliquet, nunc quis convallis ornare, fe</Content>
                <Modules>
                    <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
                </Modules>
            </telerik:RadEditor>
            <asp:Button Text="Check Server Content" ID="CheckContent" OnClick="CheckContent_Click" runat="server" />
            <br />
            <asp:Label Text="Server Count" ID="ServerCountLabel" runat="server" />
             
     
        </form>
    </body>
    </html>

    Codebehind
    Protected Sub CheckContent_Click(ByVal sender As Object, ByVal e As EventArgs)
        ServerCountLabel.Text = reTest.Content.Replace(vbLf, "").Length.ToString()
    End Sub


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Danielle
    Danielle avatar
    5 posts
    Member since:
    Mar 2019

    Posted 16 Aug 2019 in reply to Rumen Link to this post

    This worked perfectly!  Thanks so much for the help Rumen!
Back to Top