Iframe Editable in Blazor RichTextEditor

12 Aug 20223 minutes to read

When the RichTextEditorIframeSettings option is RichTextEditorIframeSettings.enabled, the editor creates the iframe element as the content area on component initialization, it is used to display and edit the content. In the content area, the editor displays only the body tag of a <iframe> document.

Basically, in an iframe mode, you have got the entire document only the editor content, and also you can use styles and scripts only for the particular Editor.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>

Blazor RichTextEditor with IFrame

IFrame attributes

The editor allows you to pass an additional attribute to body tag of a <iframe> element using RichTextEditorIframeSettings.Attributes property. This property contains name or value pairs in string format. It is used to override the default appearance of the content area.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" Attributes="@IframeAttributes" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>

@code {
    private Dictionary<string, object> IframeAttributes = new Dictionary<string, object>() {
        { "style", "background: lightgray;" }
    };
}

Blazor RichTextEditor with IFrame Attribute

Adding external CSS/Script file

The editor offers to add external CSS file to style the <iframe> element. Easily change the appearance of editor’s content using an external CSS file using Resources - Styles field in the RichTextEditorIframeSettings.Resources property.

Likewise, add the external script file to the <iframe> element using Resources - Scripts field of RichTextEditorIframeSettings.Resources to provide the additional functionalities to the Rich Text Editor.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" Resources="@Resources" />
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the image</b></p>
    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://blazor.syncfusion.com/demos/images/RichTextEditor/RTEImage-Feather.png' />
</SfRichTextEditor>

@code {
    private ResourcesModel Resources { get; set; } = new ResourcesModel()
    {
        Styles = new string[] { "/styles.css" },
        Scripts = new string[] { "/script.js" }
    };
}

Blazor RichTextEditor with External css/script

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to knows how to render and configure the rich text editor tools.