IFrame Editing Mode in the Angular Rich Text Editor Component

29 Aug 202512 minutes to read

The iframe editor in the Rich Text Editor provides an isolated environment for content editing by using an iframe element as the content area. This ensures separation from the parent page’s styles and scripts, preventing conflicts and enhancing compatibility.In this mode, the editor displays only the body tag of the iframe, offering a clean and isolated workspace for content creation.

Configuring the Iframe editor

Iframe editing mode is enabled using the iframeSettings property. When this option is enabled, the Rich Text Editor creates an iframe element as the content area during initialization.

The following example demonstrates enabling iframe mode:

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { ToolbarService, LinkService, ImageService, HtmlEditorService,IFrameSettingsModel} from '@syncfusion/ej2-angular-richtexteditor';
import { Component } from '@angular/core';

@Component({
    imports: [RichTextEditorAllModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent  {
    public iframe: IFrameSettingsModel = { enable: true };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing IFrame attributes

Custom attributes can be applied to the iframe’s body element using the attributes field of the iframeSettings property. This property accepts name/value pairs in string format, enabling you to override the default appearance of the content area.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService,IFrameSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorAllModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent  {
    public iframe: IFrameSettingsModel = {
        enable: true,
        attributes: {readonly: 'readonly'}
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Integrating external CSS and scripts

The Rich Text Editor allows you to apply an external CSS file to style the iframe element. This can be done using the styles field in the iframeSettings property. By including an external CSS file, you can easily change the appearance of the editor’s content to meet your specific requirements.

Likewise, add the external script file to the < iframe > element using the scripts field of iframeSettings to provide the additional functionalities to the RichTextEditor.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, IFrameSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [RichTextEditorAllModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent  {
    public iframe: IFrameSettingsModel = {
        enable: true,
        attributes: {readonly: 'readonly'},
        resources: {
            scripts: [''],  // script.js
            styles: ['']    // css
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also explore our iframe in Angular Rich Text Editor example that shows how to render the iframe in Angular Rich Text Editor.

Integrating Mention with Iframe

Rich Text Editor supports advanced features such as Mention component, even when it is rendered inside an iframe. To enable mention functionality within the iframe-mode Rich Text Editor, you need to correctly set the target of the Mention component.

Specifically, assign the inputElement of the Rich Text Editor to the target property of the Mention component. This ensures that the Mention popup is triggered correctly when the user types a designated character (such as @) inside the Rich Text Editor’s editable area.

Here’s an example of how to integrate Mention with Iframe editor,

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

@Component({
  imports: [RichTextEditorModule, MentionModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor #mentionRTE id="mention_integration" [iframeSettings]="iframe"  placeholder="Type @ and tag the name" (actionBegin)="onActionBegin($event)"  (created)="created()" [value]='value'>
</ejs-richtexteditor>
<ejs-mention #mention [dataSource]='data' [target]="target" [fields]='fieldsData' [suggestionCount]="8" [showMentionChar]="false" [allowSpaces]="true"  
popupWidth='250px' popupHeight='200px'>
    <ng-template #itemTemplate let-data>
        <table>
            <tr>
              <td>
                <div id="mention-TemplateList"> 
                  <img class="mentionEmpImage" src="./assets/rich-text-editor/images/.png" alt="employee" />
                  <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom "></span>
                </div>
                </td>
                <td class="mentionNameList">
                  <span class="person"></span>
                  <span class="email"></span>
                </td>
              </tr>
            </table>
    </ng-template>
    <ng-template #displayTemplate let-data>
        <a href="mailto:" title="">&#64;</a>
    </ng-template>
</ejs-mention>
`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
  public value: string = "<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:[email protected]\" title=\"[email protected]\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>";
  @ViewChild('mention') mentionObj!: Mention;
  @ViewChild('mentionRTE') rteObj!: RichTextEditorComponent;

  public iframe = { enable: true };
  public target: any;
  public toolbarSettings: ToolbarSettingsModel = {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
      'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', '|', 'Undo', 'Redo'
    ]
  };
  public data: { [key: string]: MentionModule }[] = [
    { Name: "Selma Rose", Status: "active", Eimg: "2", EmailId: "[email protected]" },
    { Name: "Maria", Status: "active", Eimg: "1", EmailId: "[email protected]" },
    { Name: "Russo Kay", Status: "busy", Eimg: "8", EmailId: "[email protected]" },
    { Name: "Camden Kate", Status: "active", Eimg: "9", EmailId: "[email protected]" },
    { Name: "Robert", Status: "busy", Eimg: "dp", EmailId: "[email protected]" },
    { Name: "Garth", Status: "active", Eimg: "7", EmailId: "[email protected]" },
    { Name: "Andrew James", Status: "away", Eimg: "pic04", EmailId: "[email protected]" },
    { Name: "Olivia", Status: "busy", Eimg: "5", EmailId: "[email protected]" },
    { Name: "Sophia", Status: "away", Eimg: "6", EmailId: "[email protected]" },
    { Name: "Margaret", Status: "active", Eimg: "3", EmailId: "[email protected]" },
    { Name: "Ursula Ann", Status: "active", Eimg: "dp", EmailId: "[email protected]" },
    { Name: "Laura Grace", Status: "away", Eimg: "4", EmailId: "[email protected]" },
    { Name: "Albert", Status: "active", Eimg: "pic03", EmailId: "[email protected]" },
    { Name: "William", Status: "away", Eimg: "10", EmailId: "[email protected]" }
  ];
  public fieldsData: { [key: string]: string } = { text: 'Name' };

  onActionBegin(args: ActionBeginEventArgs) {
    if (args.requestType === 'EnterAction' && this.mentionObj.element.classList.contains('e-popup-open')) {
      args.cancel = true;
    }
  }
  created() {
    // here assigned the RichTextEditor's inputElement as the Mention's target
    this.target = this.rteObj.inputElement;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also