IFrame Editing Mode in Angular Rich Text Editor
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
You can apply external CSS and script files to the iframe by using the resources property of iframeSettings. This allows you to customize the appearance and functionality of the editor’s content while maintaining style isolation.
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
The Rich Text Editor supports the Mention component even when rendered inside an iframe. To enable mention functionality in iframe mode, you must set the Mention component’s target property to the Rich Text Editor’s input element.
The Mention popup is triggered when the user types a designated character (e.g., @) 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="https://ej2.syncfusion.com/angular/demos/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="">@</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]\">@Maria</a></span>​</p><p>Welcome to the mention integration with rich text editor demo. Type <code>@</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));