Text Alignments in the Angular Rich Text Editor component

16 Jan 20252 minutes to read

The Rich Text Editor offers various text alignment options, including left, center, right, and justify. To utilize these alignment options, add the Alignments item to the items property in the toolbarSettings.

Important Note: Text alignment is applied to the entire block element containing the cursor or selected text, not just to the selected text itself. When you apply an alignment, it affects the whole paragraph or block, even if you’ve only selected a portion of the text.

Here are the available alignment options:

• Align Left:
  To left-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Left icon in the toolbar. This will align the entire paragraph with the left margin.

• Align Center:
  To center-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Center icon in the toolbar. This will center the entire paragraph within its container.

• Align Right:
  To right-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Right icon in the toolbar. This will align the entire paragraph with the right margin.

• Align Justify:
  To fully justify your text, place the cursor in the desired paragraph or select any text within it, then click the Align Justify icon in the toolbar. This will distribute the entire paragraph evenly across the line, aligning it with both the left and right margins.

Please refer to the sample and code snippets below to add these alignment options in the Rich Text Editor.

app.component.ts

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

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

export class AppComponent {
    public tools: ToolbarSettingsModel = {
        items: ['Alignments']
    };
}

main.ts

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