adsense

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

No comments:

Post a Comment