Style and Appearance in Angular Rich Text Editor

Below are the CSS selectors you can use to customize the Rich Text Editor’s appearance.

Style the placeholder text

Use the following CSS to customize the default color in the Rich Text Editor’s placeholder.

.e-richtexteditor .e-rte-placeholder {
    color: blue;
    font-family: monospace;
}

Style the editor content area

Use the following CSS to modify the default style of the Rich Text Editor’s content area, including font properties, background, and text color.

/* To change font family and font size */
.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    font-size: 20px;
    font-family: Segoe ui;
}

/* To change font color and content background */
.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-source-content {
    background: seashell;
    color: blue;
}

Customize the toolbar appearance

Use the following CSS to customize the default color in the Rich Text Editor’s toolbar icon.

/* To change font color for toolbar icon */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons:active {
    color: red;
}

/* To change font color for toolbar button */
.e-toolbar .e-tbar-btn,
.e-toolbar .e-tbar-btn:active,
.e-toolbar .e-tbar-btn:hover {
    color: red;
}

/* To change font color for toolbar button in active state*/
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-rte-dropdown-btn-text {
    color: red;
}

/* To change font color for expanded toolbar items */
.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons,
.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
    color: red;
}

Style the character count display

Use the following CSS to customize the default color in the Rich Text Editor’s character count.

/* To change font color, font family, font size and opacity  */
.e-richtexteditor .e-rte-character-count {
    color: red;
    font-family: segoe ui;
    font-size: 18px;
    opacity: 0.54;
    padding-bottom: 2px;
    padding-right: 14px;
}

Modify the editor container border

Use the following CSS to customize the border color in the Rich Text Editor’s container.

.e-richtexteditor .e-rte-container{
    border: 2px solid #454bc1;
    border-radius: 4px;
}

Highlight specific text programmatically

Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor’s executeCommand method.

import { Component, ViewChild } from '@angular/core';
import { NodeSelection, ToolbarService, QuickToolbarService, LinkService, ImageService, PasteCleanupService, HtmlEditorService, RichTextEditorModule, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<div><button (click)="setBackground()" class="e-btn" style="margin:5px">Apply</button>
  <ejs-richtexteditor #editor [value]="value"></ejs-richtexteditor></div>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService],
})
export class AppComponent {
    @ViewChild('editor')
    public editorObj!: RichTextEditorComponent;

    public value: string =
        "<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>";

    private nodeSelection: NodeSelection = new NodeSelection();

    setBackground() {
        const rteContent = (this.editorObj as any).contentModule.getDocument();
        const firstParagraph = (this.editorObj as any).contentModule
            .getEditPanel()
            .querySelector('p');

        if (firstParagraph && firstParagraph.firstChild) {
            this.nodeSelection.setSelectionText(
                rteContent,
                firstParagraph.firstChild,
                firstParagraph.firstChild,
                4, // Start index
                20 // End index
            );
            this.editorObj.executeCommand('backColor', 'yellow');
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also