IFrame Editing Mode in React 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 enabled, the Rich Text Editor creates an iframe element as the content area during initialization.
The following example demonstrates enabling iframe mode:
[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
};
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;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
}
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<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
};
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;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
}
let rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;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.
[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,
};
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<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,
}
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<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,
};
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<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,
}
let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;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.
CSS and Scripts Configuration:
iframeSettings={{
enable: true,
resources: {
styles: ['assets/custom-styles.css'],
scripts: ['assets/custom-script.js']
}
}}[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
}
};
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return (<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<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
}
}
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<RichTextEditorComponent height={450} iframeSettings={this.iframeSettings} value={this.rteValue}>
<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
}
};
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<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
}
}
let rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} iframeSettings={iframeSettings} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;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.
Setup
import { RichTextEditorComponent, Inject, HtmlEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
// In your component, set the Mention target to the RTE's inputElement
<MentionComponent
target={rteRef.current?.inputElement}
/>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,
[Class-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
class App extends React.Component {
iframeSetting = {
enable: true,
};
state = {
mentionComponent: false,
target: null,
};
rteObj;
data = [
{ Name: "Selma Rose", Status: "active", EmployeeImage: "2.png", EmailId: "[email protected]" },
{ Name: "Maria", Status: "active", EmployeeImage: "1.png", EmailId: "[email protected]" },
{ Name: "Russo Kay", Status: "busy", EmployeeImage: "8.png", EmailId: "[email protected]" },
{ Name: "Camden Kate", Status: "active", EmployeeImage: "9.png", EmailId: "[email protected]" },
{ Name: "Robert", Status: "busy", EmployeeImage: "dp.png", EmailId: "[email protected]" },
{ Name: "Garth", Status: "active", EmployeeImage: "7.png", EmailId: "[email protected]" },
{ Name: "Andrew James", Status: "away", EmployeeImage: "pic04.png", EmailId: "[email protected]" },
{ Name: "Olivia", Status: "busy", EmployeeImage: "5.png", EmailId: "[email protected]" },
{ Name: "Sophia", Status: "away", EmployeeImage: "6.png", EmailId: "[email protected]" },
{ Name: "Margaret", Status: "active", EmployeeImage: "3.png", EmailId: "[email protected]" },
{ Name: "Ursula Ann", Status: "active", EmployeeImage: "dp.png", EmailId: "[email protected]" },
{ Name: "Laura Grace", Status: "away", EmployeeImage: "4.png", EmailId: "[email protected]" },
{ Name: "Albert", Status: "active", EmployeeImage: "pic03.png", EmailId: "[email protected]" },
{ Name: "William", Status: "away", EmployeeImage: "8.png", EmailId: "[email protected]" }
];
fieldsData = { text: 'Name' };
itemTemplate(data) {
return (<table>
<tr>
<td>
<div id="mention-TemplateList">
<img className="mentionEmpImage" src={"src/rich-text-editor/images/" + data.EmployeeImage}/>
<span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom" + data.Status}></span>
</div>
</td>
<td className="mentionNameList">
<span className="person">{data.Name}</span>
<span className="email">{data.EmailId}</span>
</td>
</tr>
</table>);
}
displayTemplate(data) {
return (<React.Fragment>
<a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
</React.Fragment>);
}
actionBegineHandler(args) {
if (args.requestType === 'EnterAction') {
args.cancel = true;
}
}
created() {
setTimeout(() => {
this.setState({
mentionComponent: true,
target: this.rteObj.inputElement,
});
}, 10);
}
rteValue = "<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>";
render() {
return (<div className='control-pane'>
<div className='control-section' id="rte">
<div className='rte-control-section'>
<RichTextEditorComponent id="mention_integration" value={this.rteValue} ref={(richtexteditor) => {this.rteObj = richtexteditor;}}
iframeSettings={this.iframeSetting}
placeholder="Type @ and tag the name"
created={this.created.bind(this)} actionBegin={this.actionBegineHandler.bind(this)}>
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>
</div>
</div>
{this.state.mentionComponent && (
<MentionComponent id="mentionEditor" target={this.state.target} suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={this.data} fields={this.fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate}></MentionComponent>
)}
</div>);
}
}
export default App;import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
interface AppState {
mentionComponent: false,
target: null,
}
class App extends React.Component<{}, AppState> {
public iframeSetting = {
enable: true,
};
public state = {
mentionComponent: false,
target: null,
};
public rteObj;
public mentionObj : MentionComponent;
private data: { [key: string]: Object }[] = [
{ Name: "Selma Rose", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/2.png", EmailId: "[email protected]" },
{ Name: "Maria", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/1.png", EmailId: "[email protected]" },
{ Name: "Russo Kay", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" },
{ Name: "Camden Kate", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/9.png", EmailId: "[email protected]" },
{ Name: "Robert", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
{ Name: "Garth", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/7.png", EmailId: "[email protected]" },
{ Name: "Andrew James", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic04.png", EmailId: "[email protected]" },
{ Name: "Olivia", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/5.png", EmailId: "[email protected]" },
{ Name: "Sophia", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/6.png", EmailId: "[email protected]" },
{ Name: "Margaret", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/3.png", EmailId: "[email protected]" },
{ Name: "Ursula Ann", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
{ Name: "Laura Grace", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/4.png", EmailId: "[email protected]" },
{ Name: "Albert", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic03.png", EmailId: "[email protected]" },
{ Name: "William", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" }
];
private fieldsData: { [key: string]: string }={ text: 'Name' };
private itemTemplate(data: any): JSX.Element {
return (
<table>
<tr>
<td>
<div id="mention-TemplateList">
<img className="mentionEmpImage" src={data.EmployeeImage} />
<span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
</div>
</td>
<td className="mentionNameList">
<span className="person">{data.Name}</span>
<span className="email">{data.EmailId}</span>
</td>
</tr>
</table>
);
}
private displayTemplate(data: any): JSX.Element {
return (
<React.Fragment>
<a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
</React.Fragment>
);
}
public actionBegineHandler(args: any): void {
if (args.requestType === 'EnterAction' && this.mentionObj.element.classList.contains('e-popup-open')) {
args.cancel = true;
}
}
public created(): void {
setTimeout(() => {
this.setState({
mentionComponent: true,
target: this.rteObj.inputElement,
});
}, 10);
}
private rteValue: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>";
render() {
return (
<div className='control-pane'>
<div className='control-section' id="rte">
<div className='rte-control-section'>
<RichTextEditorComponent id="mention_integration" value={this.rteValue} placeholder="Type @ and tag the name" actionBegin={this.actionBegineHandler.bind(this)} >
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>
</div>
</div>
{this.state.mentionComponent && (
<MentionComponent ref={(scope) => { this.mentionObj = scope; }} id="mentionEditor" target={this.state.target} suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={this.data} fields={this.fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate}></MentionComponent>
)}
</div>
);
}
}
export default App;[Functional-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { useState } from 'react';
function App() {
const [target, setTarget] = useState(null);
const [mentionComponent, renderMentionComponent] = useState(false);
let rteValue = "<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>";
const iframeSetting = {
enable: true,
};
let rteObj;
let data = [
{ Name: "Selma Rose", Status: "active", EmployeeImage: "2.png", EmailId: "[email protected]" },
{ Name: "Maria", Status: "active", EmployeeImage: "1.png", EmailId: "[email protected]" },
{ Name: "Russo Kay", Status: "busy", EmployeeImage: "8.png", EmailId: "[email protected]" },
{ Name: "Camden Kate", Status: "active", EmployeeImage: "9.png", EmailId: "[email protected]" },
{ Name: "Robert", Status: "busy", EmployeeImage: "dp.png", EmailId: "[email protected]" },
{ Name: "Garth", Status: "active", EmployeeImage: "7.png", EmailId: "[email protected]" },
{ Name: "Andrew James", Status: "away", EmployeeImage: "pic04.png", EmailId: "[email protected]" },
{ Name: "Olivia", Status: "busy", EmployeeImage: "5.png", EmailId: "[email protected]" },
{ Name: "Sophia", Status: "away", EmployeeImage: "6.png", EmailId: "[email protected]" },
{ Name: "Margaret", Status: "active", EmployeeImage: "3.png", EmailId: "[email protected]" },
{ Name: "Ursula Ann", Status: "active", EmployeeImage: "dp.png", EmailId: "[email protected]" },
{ Name: "Laura Grace", Status: "away", EmployeeImage: "4.png", EmailId: "[email protected]" },
{ Name: "Albert", Status: "active", EmployeeImage: "pic03.png", EmailId: "[email protected]" },
{ Name: "William", Status: "away", EmployeeImage: "8.png", EmailId: "[email protected]" }
];
let fieldsData = { text: 'Name' };
function itemTemplate(data) {
return (<table>
<tr>
<td>
<div id="mention-TemplateList">
<img className="mentionEmpImage" src={"src/rich-text-editor/images/" + data.EmployeeImage}/>
<span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom" + data.Status}></span>
</div>
</td>
<td className="mentionNameList">
<span className="person">{data.Name}</span>
<span className="email">{data.EmailId}</span>
</td>
</tr>
</table>);
}
function displayTemplate(data) {
return (<React.Fragment>
<a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
</React.Fragment>);
}
function actionBegineHandler(args) {
if (args.requestType === 'EnterAction') {
args.cancel = true;
}
}
function created() {
setTimeout(() => {
renderMentionComponent(true);
setTarget(rteObj.inputElement);
}, 100);
}
return (<div className='control-pane'>
<div className='control-section' id="rte">
<div className='rte-control-section'>
<RichTextEditorComponent id="mention_integration" ref={(richtexteditor) => {rteObj = richtexteditor;}} value={rteValue} iframeSettings={iframeSetting} created={created} placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)}>
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>
</div>
</div>
{mentionComponent && (
<MentionComponent id="mentionEditor" target={target} suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate}></MentionComponent>
)}
</div>);
}
export default App;import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { useState } from 'react';
function App() {
let rteValue: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>";
const [target, setTarget] = useState(null);
const [mentionComponent, renderMentionComponent] = useState(false);
const iframeSetting = {
enable: true,
};
let rteObj;
let mentionObj;
let data: { [key: string]: Object }[] = [
{ Name: "Selma Rose", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/2.png", EmailId: "[email protected]" },
{ Name: "Maria", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/1.png", EmailId: "[email protected]" },
{ Name: "Russo Kay", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" },
{ Name: "Camden Kate", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/9.png", EmailId: "[email protected]" },
{ Name: "Robert", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
{ Name: "Garth", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/7.png", EmailId: "[email protected]" },
{ Name: "Andrew James", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic04.png", EmailId: "[email protected]" },
{ Name: "Olivia", Status: "busy", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/5.png", EmailId: "[email protected]" },
{ Name: "Sophia", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/6.png", EmailId: "[email protected]" },
{ Name: "Margaret", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/3.png", EmailId: "[email protected]" },
{ Name: "Ursula Ann", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/dp.png", EmailId: "[email protected]" },
{ Name: "Laura Grace", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/4.png", EmailId: "[email protected]" },
{ Name: "Albert", Status: "active", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/pic03.png", EmailId: "[email protected]" },
{ Name: "William", Status: "away", EmployeeImage: "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/8.png", EmailId: "[email protected]" }
];
let fieldsData: { [key: string]: string }={ text: 'Name' };
function itemTemplate(data: any) {
return (
<table>
<tr>
<td>
<div id="mention-TemplateList">
<img className="mentionEmpImage" src={data.EmployeeImage} />
<span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
</div>
</td>
<td className="mentionNameList">
<span className="person">{data.Name}</span>
<span className="email">{data.EmailId}</span>
</td>
</tr>
</table>
);
}
function displayTemplate(data: any) {
return (
<React.Fragment>
<a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>
</React.Fragment>
);
}
function actionBegineHandler(args: any): void {
if (args.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {
args.cancel = true;
}
}
function created() {
setTimeout(() => {
renderMentionComponent(true);
setTarget(rteObj.inputElement);
}, 100);
}
return (
<div className='control-pane'>
<div className='control-section' id="rte">
<div className='rte-control-section'>
<RichTextEditorComponent id="mention_integration" ref={(richtexteditor) => {rteObj = richtexteditor;}} value={rteValue} iframeSettings={iframeSetting} created={created.bind(this)} placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)} >
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>
</div>
</div>
{mentionComponent && (
<MentionComponent ref={(scope) => { mentionObj = scope; }} id="mentionEditor" target={target} suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate}></MentionComponent>
)}
</div>
);
}
export default App;You can also explore our iframe in React Rich Text Editor example that shows how to render the iframe in React Rich Text Editor.