IFrame Editing Mode in JavaScript Rich Text Editor control
18 Nov 20181 minute to read
The iframe editor in the Rich Text Editor control provides an isolated environment for content editing. It uses an iframe element to create a separate document, ensuring better compatibility and separation from the parent page’s styles and scripts. 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
To enable the iframe editor, you can use the iframeSettings property. When this option is enabled, the Rich Text Editor creates an iframe element as the content area during initialization.
Here’s an example of how to enable the iframe editor:
Customizing IFrame attributes
You can add custom attributes to the body tag of the iframe 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.
Integrating external CSS and scripts
The Rich Text Editor allows you to apply an external CSS file to style the iframe element. This can be done using the styles field in the iframeSettings property. By including an external CSS file, you can easily change the appearance of the editor’s content to meet your specific requirements.
Likewise, add the external script file to the < iframe > element using the scripts field of iframeSettings to provide the additional functionalities to the RichTextEditor.
You can also explore our iframe in JavaScript Rich Text Editor example that shows how to render the iframe in JavaScript Rich Text Editor.
Integrating Mention with Iframe
Rich Text Editor supports advanced features such as Mention control, even when it is rendered inside an iframe. To enable mention functionality within the iframe-mode Rich Text Editor, you need to correctly set the target of the Mention control.
Specifically, assign the inputElement of the Rich Text Editor to the target property of the Mention control. This ensures that the Mention popup is triggered correctly when the user types a designated character (such as @) inside the Rich Text Editor’s editable area.
Here’s an example of how to integrate Mention with Iframe editor,