Character Count in ASP.NET MVC Rich Text Editor Control

4 Mar 20252 minutes to read

The Character Count feature in the Rich Text Editor allows you to track and display the number of characters entered in the editor. This feature is particularly useful when you need to limit the content length or provide visual feedback to users about their input.

How to Enable Character Count

To enable the character count feature, set the ShowCharCount property to true. By default, this property is set to false.

When enabled, the character count is displayed at the bottom right corner of the editor.

Understanding Character Count Color Indicators

The character count color will be modified based on the characters in the Rich Text Editor.

Status Description
normal The character count color remains black until 70% of the maxLength count is reached.
warning When the character count reaches 70% of the maxLength, the color changes to orange, indicating that the maximum limit is approaching.
error Once the character count hits 90% of the maxLength, the color turns red, signaling that the limit is nearly reached. 
@Html.EJS().RichTextEditor("characterCount").ShowCharCount(true).Value(ViewBag.value).MaxLength(2000).Render()
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        return View();
    }
}

Setting Maximum Character Limit

You can restrict the number of characters entered in the editor by setting the MaxLength property to a specific numeric value. When set, the maximum allowable character count is displayed alongside the current count at the bottom right of the editor.

If MaxLength is not set, there is no limit to the character count in the editor.

Retrieving Character Count Programmatically

You can programmatically get the current character count in the editor using the getCharCount public method.

  var editorCount = richTextEditorInstance.GetCharCount();

See Also