How to Add custom Inside IFrame Editor in Angular Rich Text Editor?
In the Angular Rich Text Editor, when using IFrame mode, it operates as a separate DOM. This means that custom directive events are not automatically listened to within the IFrame DOM. To implement custom directive events, you need to emit these events during the Rich Text Editor’s created event. Follow the steps below to achieve this:
In your app.component.ts, import the custom directive as follows:
import { CustomDirective } from "./customdirective.directive";
Include the custom directive in the Rich Text Editor component like this:
```html
<ejs-richtexteditor #rteObj (created)="onCreated()" [iframeSettings]="iframe" appCustomDirective id='defaultRTE' width="500px" [value]="value"></ejs-richtexteditor>
Use ViewChild to reference the custom directive:
@ViewChild(CustomDirective, { static: false }) customDirective!: CustomDirective;
Inside the Rich Text Editor’s created event, set up the custom directive’s onkeydown listener:
onCreated() {
this.rteInstance?.inputElement.addEventListener("keydown", (args: KeyboardEvent) => {
this.customDirective?.onkeydown(args);
});
}
By following these steps, you can successfully add custom directive events within the IFrame editor of the Rich Text Editor.
Conclusion
I hope you enjoyed learning about adding how to add custom inside IFrame editor in Angular Rich Text Editor.
You can refer to our Angular Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for 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 from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require 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!
