Integrating Mention with Iframe Editor in Rich Text Editor
When integrating the Mention component with the Iframe Editor in a Rich Text Editor, it is essential to set the input element of the Rich Text Editor as the target for the Mention component. This can be accomplished by utilizing the created event of the Rich Text Editor.
Initialize the Rich Text Editor
Set up the RichTextEditor with the necessary toolbar settings and properties. Enable iframeSettings to use Iframe mode, and configure the created event accordingly.
<ejs-richtexteditor
#rteObj
id="mention_integration"
placeholder="Type @ and tag the name"
[iframeSettings]="iframe"
(created)="onCreated($event)">
</ejs-richtexteditor>
Set Up the Mention Component
Ensure that you have the Mention component properly initialized in your application.
<ejs-mention
#mention
[dataSource]="data"
[fields]="fieldsData">
</ejs-mention>
Target the Input Element
Use the created event to assign the input element of the Rich Text Editor to the Mention component’s target.
Here is a sample code snippet demonstrating how to achieve this:
onCreated() {
this.mentionObj.target = this.rteObj.inputElement;
}
By following these steps, you can successfully integrate the Mention feature with the Iframe Editor in your Rich Text Editor.
