Integrate Tab component into the Angular Rich Text Editor

18 Nov 20185 minutes to read

The integration of Tab component with Rich Text Editor component offers versatile functionality for content management scenarios. Users can leverage this combination for multi-document editing where different tabs contain separate RTE instances, allowing simultaneous work on multiple content pieces without context switching.

Prerequisites

Before proceeding, complete the base Rich Text Editor setup described in the Getting Started guide. The guide covers angular CLI setup, package installation, CSS imports, module injection, and basic editor markup: Getting Started with angular Rich Text Editor.

Key features

  • Provides organized content display – Tabs group different sections of the editor (e.g., formatting options, media insertion, code view) neatly, reducing clutter.
  • Provides scalability – New features or plugins can be added as separate tabs without disrupting the existing editor layout.
  • Offers consistency across UI – Tabs establish a familiar navigation pattern, aligning with modern UI/UX practices and making the editor intuitive.

Setup the Tab Component

Install the Tabs package if not present:

npm install @syncfusion/ej2-angular-navigations

Configure Tab component for the Rich Text Editor

Step 1: Import packages and providers
Import TabModule together with RichTextEditorModule and provide the editor services in the component:

import { TabModule } from '@syncfusion/ej2-angular-navigations'

Step 2: Configure Tabs and RTE

<ejs-tab>
  <e-tabitems>
    <e-tabitem>
      <ng-template #headerText>
        <div> RichTextEditor Tab 1 </div>
      </ng-template>
      <ng-template #content>
        <ejs-richtexteditor></ejs-richtexteditor>
      </ng-template>
    </e-tabitem>
    <e-tabitem>
      <ng-template #headerText>
        <div> RichTextEditor Tab 2 </div>
      </ng-template>
      <ng-template #content>
        <ejs-richtexteditor></ejs-richtexteditor>
      </ng-template>
    </e-tabitem>
  </e-tabitems>
</ejs-tab>

Note: It is recommended to use ng-template inside the tab component for smooth rendering of the rich text editor.

Example for tab integration

Below is the example integration of tab with the Angular Rich Text Editor.

```

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, AudioService, VideoService, RichTextEditorModule, ToolbarSettingsModel, EmojiPickerService } from '@syncfusion/ej2-angular-richtexteditor';
import { TabModule } from '@syncfusion/ej2-angular-navigations'

@Component({
   imports: [RichTextEditorModule, TabModule],
   standalone: true,
   selector: 'app-root',
   template: `
<ejs-tab>
  <e-tabitems>
    <e-tabitem>
      <ng-template #headerText>
        <div> Text Formatting </div>
      </ng-template>
      <ng-template #content>
        <ejs-richtexteditor  [toolbarSettings]='tools1'></ejs-richtexteditor>
      </ng-template>
    </e-tabitem>
    <e-tabitem>
      <ng-template #headerText>
        <div> Insert Media Options </div>
      </ng-template>
      <ng-template #content>
        <ejs-richtexteditor  [toolbarSettings]='tools2'></ejs-richtexteditor>
      </ng-template>
    </e-tabitem>
  </e-tabitems>
</ejs-tab>
   `,
   providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, AudioService, VideoService, EmojiPickerService]
})

export class AppComponent {
  public tools1: ToolbarSettingsModel = {
    items: [
      'Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'BackgroundColor', 'FontColor', 'FontName']
  };
  public tools2: ToolbarSettingsModel = {
    items: ['Undo', 'Redo', '|', 'Image', 'Video', 'Audio', 'EmojiPicker']
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-icons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

Additional resources

  • GitHub Repository: Angular Rich Text Editor with Tab Component
  • Syncfusion Tab getting started: https://ej2.syncfusion.com/angular/documentation/tab/getting-started
  • Syncfusion Tab API: https://ej2.syncfusion.com/angular/documentation/tab/mention/
  • Syncfusion Rich Text Editor API: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/