Integrating Rich Text Editor in Tab Components

16 Jan 20253 minutes to read

Integrating a Rich Text Editor within Tab components provides a versatile and organized user interface for text formatting and content creation across multiple tabs. Each tab instance includes a dedicated editor instance configured with extensive toolbar options, enabling users to effortlessly manipulate text styles, apply formatting, insert media, and manage content layout.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { TabComponent, TabModule } from '@syncfusion/ej2-angular-navigations';
import { RichTextEditorComponent, RichTextEditorModule, ToolbarSettingsModel, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [RichTextEditorModule, TabModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-tab #tab>
    <e-tabitems>
    <e-tabitem>
        <ng-template #headerText>
           <div> TAB1 </div>
        </ng-template>
        <ng-template #content>
        <ejs-richtexteditor #editor [toolbarSettings]='tools'></ejs-richtexteditor>
        </ng-template>
    </e-tabitem>
    <e-tabitem>
        <ng-template #headerText>
           <div> TAB2 </div>
        </ng-template>
        <ng-template #content>
        <ejs-richtexteditor #editor [toolbarSettings]='tools'></ejs-richtexteditor>
        </ng-template>
    </e-tabitem>
    <e-tabitem>
        <ng-template #headerText>
           <div> TAB3 </div>
        </ng-template>
        <ng-template #content>
        <ejs-richtexteditor #editor [toolbarSettings]='tools'></ejs-richtexteditor>
        </ng-template>
    </e-tabitem>
</e-tabitems>
</ejs-tab>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {

  @ViewChild('tab') tabObj!: TabComponent;
  @ViewChild('editor') editorObj!: RichTextEditorComponent;
  public tools: ToolbarSettingsModel = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
  }
}

main.ts

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