Basic Text Styling in Angular Rich Text Editor component

24 Jan 20254 minutes to read

The Rich Text Editor’s basic styles feature provides essential formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured.

Available Text Styles

The table below lists the available text styles in the Rich Text Editor’s toolbar.

Name	Icons	Summary	Initialization
Bold		Makes text thicker and darker	toolbarSettings: { items: [‘Bold’]}	<b>bold</b>
Italic		Slants text to the right	toolbarSettings: { items: [‘Italic’]}	<em>italic</em>
Underline		Adds a line beneath the text	toolbarSettings: { items: [‘Underline’]}
StrikeThrough		Applies a line through the text.	toolbarSettings: { items: [‘StrikeThrough’]}
InlineCode		Formats text as inline code	toolbarSettings: { items: [‘InlineCode’]}	<code>inline code</code>
SubScript		Positions text slightly below the normal line	toolbarSettings: { items: [‘SubScript’]}
SuperScript		Positions text slightly above the normal line	toolbarSettings: { items: [‘SuperScript’’]}
LowerCase		Converts text to lowercase	toolbarSettings: { items: [‘LowerCase’]}
UpperCase		Converts text to uppercase	toolbarSettings: { items: [‘UpperCase’’]}

Please refer to the sample below to add these basic text styling options in the Rich Text Editor.

app.component.ts

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, ToolbarSettingsModel, QuickToolbarService, TableService, PasteCleanupService, ImageService, LinkService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, ImageService, LinkService]
})
export class AppComponent {
    public value: string = "<p>The Rich Text Editor component is a WYSIWYG (\"what you see is what you get\") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> <p><b>Key features:</b></p> <ul><li>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</li><li>Capable of handling markdown editing.</li><li>Contains a modular library to load the necessary functionality on demand.</li><li>Provides a fully customizable toolbar.</li><li>Provides HTML view to edit the source directly for developers.</li><li>Supports third-party library integration.</li><li>Allows preview of modified content before saving it.</li><li>Handles images, hyperlinks, videos, uploads, etc.</li><li>Contains undo/redo manager.</li><li>Creates bulleted and numbered lists.</li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
    };
}

main.ts

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

See Also

Customizing Font Family, Size, and Color in Rich Text Editor