How to Integrate Mention with Iframe in Angular Rich Text Editor?

1 min read

To integrate the Mention component with the Iframe Editor in a Rich Text Editor, it is crucial to designate the input element of the Angular Rich Text Editor as the target for the Mention component. This can be achieved by leveraging the created event of the Rich Text Editor.

Initialize the Rich Text Editor

To 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.

Additional References

Conclusion

I hope you enjoyed learning how to integrate mentions with iframes in the Angular Rich Text Editor.
You can refer to the Angular Rich Text Editor feature tour page to learn about its other groundbreaking features and representations, as well as the documentation to quickly get started with configuration specifications. You can also explore our Angular Rich Text Editor example to understand how to create and manipulate data.
For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.
If you have any queries or need clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)