Iframe in React Rich text editor component
29 Aug 202324 minutes to read
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 displays only the body tag of a <iframe> document.
[Class-component]
/**
* Rich Text Editor - IFrame sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
iframeSettings = {
enable: true
};
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - IFrame sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private iframeSettings: object = {
enable: true
}
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - IFrame sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let iframeSettings = {
enable: true
};
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - IFrame sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let iframeSettings: object = {
enable: true
}
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;IFrame attributes
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.
[Class-component]
/**
* Rich Text Editor - IFrame Attributes sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
iframeSettings = {
attributes: {
readonly: 'readonly'
},
enable: true,
};
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - IFrame Attributes sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private iframeSettings: object = {
attributes: {
readonly: 'readonly'
},
enable: true,
}
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - IFrame Attributes sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let iframeSettings = {
attributes: {
readonly: 'readonly'
},
enable: true,
};
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - IFrame Attributes sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App(){
let iframeSettings: object = {
attributes: {
readonly: 'readonly'
},
enable: true,
}
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;Adding external CSS/Script file
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 Rich Text Editor.
[Class-component]
/**
* Rich Text Editor - IFrame Resources sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
iframeSettings = {
enable: true,
resources: {
scripts: [],
styles: ['myStyle.css'] // Styles
}
};
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b> <label> --> Styles injected from iframe settings</label></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - IFrame Resources sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private iframeSettings: object = {
enable: true,
resources: {
scripts: [], // Scripts
styles: ['myStyle.css'] // Styles
}
}
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b> <label> --> Styles injected from iframe settings</label></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - IFrame Resources sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let iframeSettings = {
enable: true,
resources: {
scripts: [],
styles: ['myStyle.css'] // Styles
}
};
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b> <label> --> Styles injected from iframe settings</label></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - IFrame Resources sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let iframeSettings: object = {
enable: true,
resources: {
scripts: [], // Scripts
styles: ['myStyle.css'] // Styles
}
}
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b> <label> --> Styles injected from iframe settings</label></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;