Placeholder Text in Angular Rich Text Editor Component

24 Jan 20251 minute to read

Specifies the placeholder for the Rich Text Editor’s content used when the editor’s content area is empty through the placeholder property.

You can customize the appearance of the placeholder text by targeting the e-rte-placeholder class in your CSS. This allows you to modify properties such as font family, color, and other styles.

.e-richtexteditor .e-rte-placeholder {
    font-family: monospace;
}
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

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

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

See Also