When the iframeSettings option is enabled, the Rich Text Editor creates the iframe element as the content area on control initialization. It is used to display and editing the content in content area. The editor will display only the body tag of a < iframe > document.
/**
* RTE IFrame Sample
*/
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
public iframe: object = { enable: true };
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule,
DialogModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
<link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-code-mirror::before {
content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}
#special_char,
.char_block {
display: inline-block;
}
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;
}
.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}
#custom_tbar,
#custom_tbar div{
cursor: pointer;
}
#rteSection {
height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";
}
.e-richtexteditor textarea.e-content {
float: left;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
width: 100%;
}
.property-panel-content td{
width: 50%;
}
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;
}
.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}
.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;
}
@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;
}
.fabric #rteDialog {
min-width: 241px;
}
.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;
}
.highcontrast.e-bigger #rteDialog {
min-width: 283px;
}
.highcontrast #rteDialog {
min-width: 243px;
}
.material #rteDialog {
min-width: 224px;
}
.material.e-bigger #rteDialog {
min-width: 236px;
}
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>The editor allows you to pass an additional attribute to body tag of a < iframe > element using attributes fields of the iframeSettings property. This property contains name/value pairs in string format. It is used to override the default appearance of the content area.
/**
* RTE IFrame attributes Sample
*/
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
public iframe: object = {
enable: true,
attributes: {
readonly: 'readonly'
}
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule,
DialogModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
<link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-code-mirror::before {
content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}
#special_char,
.char_block {
display: inline-block;
}
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;
}
.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}
#custom_tbar,
#custom_tbar div{
cursor: pointer;
}
#rteSection {
height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";
}
.e-richtexteditor textarea.e-content {
float: left;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
width: 100%;
}
.property-panel-content td{
width: 50%;
}
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;
}
.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}
.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;
}
@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;
}
.fabric #rteDialog {
min-width: 241px;
}
.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;
}
.highcontrast.e-bigger #rteDialog {
min-width: 283px;
}
.highcontrast #rteDialog {
min-width: 243px;
}
.material #rteDialog {
min-width: 224px;
}
.material.e-bigger #rteDialog {
min-width: 236px;
}
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>The editor offers you to add external CSS file to style the < iframe > element. Easily change the appearance of editor’s content using an external CSS file using styles field in the iframeSettings property.
Likewise, add the external script file to the < iframe > element using the scripts field of iframeSettings to provide the additional functionalities to the RichTextEditor.
/**
* RTE IFrame Sample
*/
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [iframeSettings]='iframe'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
public iframe: object = {
enable: true,
attributes: {
readonly: 'readonly'
},
resources: {
scripts: [''], // script.js
styles: [''] // css
}
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule,
DialogModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
<link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-code-mirror::before {
content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}
#special_char,
.char_block {
display: inline-block;
}
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;
}
.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}
#custom_tbar,
#custom_tbar div{
cursor: pointer;
}
#rteSection {
height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";
}
.e-richtexteditor textarea.e-content {
float: left;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
width: 100%;
}
.property-panel-content td{
width: 50%;
}
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;
}
.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}
.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;
}
@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;
}
.fabric #rteDialog {
min-width: 241px;
}
.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;
}
.highcontrast.e-bigger #rteDialog {
min-width: 283px;
}
.highcontrast #rteDialog {
min-width: 243px;
}
.material #rteDialog {
min-width: 224px;
}
.material.e-bigger #rteDialog {
min-width: 236px;
}
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>You can also explore our iframe in Angular Rich Text Editor example that shows how to render the iframe in Angular Rich Text Editor.