Integrate Dialog into Angular Rich Text Editor Component

11 Feb 20265 minutes to read

When rendering the Rich Text Editor inside a Dialog component, the dialog container and its wrapper elements are initially styled with display: none. This styling prevents the editor’s toolbar from calculating the proper offset width. As a result, the toolbar may render incorrectly, appearing above the edit area container.

To resolve this issue, we can utilize the refreshUI method of the Rich Text Editor in conjunction with the open event. This approach ensures that the Rich Text Editor’s UI is properly refreshed and rendered once the Dialog is visible.

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

• Host a Rich Text Editor or a custom source editor inside a modal Dialog.
• Ensure correct toolbar layout by refreshing the editor UI after Dialog open.
• Reuse editor instances inside the Dialog to retain state and performance.
• Configure Dialog size and behavior to suit editing scenarios.

Setup or Installation

Install the required packages using the following command:

npm install @syncfusion/ej2-angular-popups @syncfusion/ej2-angular-buttons

Configure Dialog for the rich text editor

Step 1: import packages and providers

• Import Dialog and Button modules along with the Rich Text Editor module and provide editor services in the component.

import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { RichTextEditorModule, RichTextEditorComponent, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]

Step 2: Configure button and dialog

• Add a button to open the Dialog and place the Rich Text Editor inside the Dialog content. Bind the Dialog open event to refresh the editor UI when visible.

<button ejs-button (click)="openDialog()">Open Dialog</button>
<ejs-dialog #dialog [width]="'600px'" [height]="'500px'" [visible]="false" (open)="onDialogOpen()">
  <ng-template #content>
    <ejs-richtexteditor #editor [toolbarSettings]="tools"></ejs-richtexteditor>
  </ng-template>
</ejs-dialog>

public openDialog(): void {
  this.dialogObj.show();
}

Step 3: how to refresh the UI in Rich Text Editor

• call the refreshUI method of Rich Text Editor inside the dialog close event.

public onDialogClose(): void {
  this.editorObj.refreshUI();
}

Example for dialog integration

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

app.ts

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';
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, DialogModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  styleUrl: 'app.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button (click)="openDialog()">Open Dialog</button>
    <ejs-dialog #dialog [width]="'350px'" [height]="'400px'" [showCloseIcon]="true" [visible] ="false" (open)="onDialogOpen()">
      <ng-template #header>
        <div>Dialog Header</div>
      </ng-template>
      <ng-template #content >
        <ejs-richtexteditor #editor [toolbarSettings]='tools'></ejs-richtexteditor>
      </ng-template>
      <ng-template #footer>
      <div>Dialog Footer</div>
      </ng-template>
    </ejs-dialog>
  `,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class App {
  @ViewChild('dialog')
  dialogObj!: DialogComponent;
  @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']
  };

  public openDialog(): void {
    this.dialogObj.show();
  }

  public onDialogOpen(): void {
    this.editorObj.refreshUI();
  }
}

app.css

.e-dialog.e-popup.e-popup-open {
    max-height: none !important;
}

Additional resources

• GitHub Repository: Angular Rich Text Editor integrations samples
• Rich Text Editor — API reference and guides: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/index-default
• Dialog — API reference and events: https://ej2.syncfusion.com/angular/documentation/api/dialog/index-default
• Getting started with Angular Rich Text Editor: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started
• Samples and demos for hands-on examples: https://ej2.syncfusion.com/angular/demos/#/material/rich-text-editor/overview