Character Count in Angular Rich Text Editor component

24 Jan 20253 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.

To use quick Character Count feature, configure CountService in the provider section.

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. 
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [showCharCount]='true' [maxLength]='maxLength'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
    public maxLength = 2000;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

  let editorCount: number = this.editor.getCharCount();

See Also