Showing posts with label Radeditor show remaining character count. Show all posts
Showing posts with label Radeditor show remaining character count. Show all posts

Friday, February 3, 2023

Telerik Radeditor show remaining character count

We can use jQuery to show remaining character count for a RadEditor as shown below.  This will wok for both design and HTML modes. Here MaxTextLength is considered as the upper character limit,

JS

var textLength;

var maxTextLength;

 function radEditorOnClientLoad(editor, args) {

   maxTextLength = editor.get_maxTextLength();

    textLength = editor.get_text().length;

       if (textLength > maxTextLength)

        $('#charCountSpan' ).html("Characters Remaining: Limit Exceeded ");

    else

        $('#charCountSpan').html("Characters Remaining: " + (maxTextLength - textLength) );

    

    $(editor.get_textArea()).on("input propertychange change keyup", ChangeCharacterCount);

    $(editor.get_contentArea()).on("input propertychange change keyup", ChangeCharacterCount);

}

function ChangeCharacterCount( ) {

var editorElement = $find(<%= txtDetails.ClientID %>);

textLength = editorElement.get_text().length;

                if (textLength > maxTextLength)

                    $('#charCountSpan').html("Characters Remaining: <span class='LimitExceed'>Limit Exceeded </span>");

                else

                   $('#charCountSpan').html("Characters Remaining: " + numberWithCommas(maxTextLength - textLength));

}

HTML

 <telerik:RadEditor ID="txtDetails" runat="server" TextMode="MultiLine"   MaxTextLength ="2000" OnClientLoad="radEditorOnClientLoad" ></telerik:RadEditor>

 <span id="charCountSpan" runat ="server" class="float-right"></span>



Cheers,
Samitha