You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/iframe.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
-
title: IFrame Rendering in Blazor RichTextEditor | Syncfusion
4
-
description: Checkout and learn here all about IFrame Rendering in Syncfusion Blazor RichTextEditor component and more.
3
+
title: IFrame Rendering in Blazor Rich Text Editor | Syncfusion
4
+
description: Checkout and learn here all about IFrame Rendering in Syncfusion Blazor Rich Text Editor component and more.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
-
# Iframe Editable in Blazor RichTextEditor
10
+
# Iframe Editable in Blazor Rich Text Editor
11
11
12
-
When the `RichTextEditorIframeSettings` option is set to [RichTextEditorIframeSettings.enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Enable),the editor creates the iframe element as the content area on component initialization, which is used to display and edit the content. The editor only displays the body tag of an `<iframe>` document in the content area.
12
+
When the `RichTextEditorIframeSettings` option is set to [RichTextEditorIframeSettings.Enable ](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Enable),the editor creates an iframe element as the content area during initialization, which is then used to display and edit the content. In iframe mode, the editor displays only the body tag of the iframe document within the content area.
13
13
14
-
Basically, in an iframe mode, you have the entire document but only the editor content, and you can also use styles and scripts only for the particular editor.
14
+
In iframe mode, the editor content is hosted in an isolated document. Only the editor's content is shown, and styles or scripts can be applied specifically to that editor without affecting the rest of the page.
15
15
16
16
{% tabs %}
17
17
{% highlight cshtml %}
@@ -26,11 +26,11 @@ Basically, in an iframe mode, you have the entire document but only the editor c
26
26
{% endhighlight %}
27
27
{% endtabs %}
28
28
29
-
29
+
30
30
31
31
## IFrame attributes
32
32
33
-
You can add an additional attribute to the body tag of an `<iframe>` element by using the[RichTextEditorIframeSettings.Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_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.
33
+
Add additional attributes to the body element of the iframe document using the[RichTextEditorIframeSettings.Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Attributes)property. This property accepts name–value pairs in string format and can be used to override the default appearance of the content area.
34
34
35
35
{% tabs %}
36
36
{% highlight cshtml %}
@@ -40,13 +40,13 @@ You can add an additional attribute to the body tag of an `<iframe>` element by
40
40
{% endhighlight %}
41
41
{% endtabs %}
42
42
43
-
43
+
44
44
45
45
## Adding external CSS/Script file
46
46
47
-
The editor offers to add an external CSS file to style the `<iframe>` element. Using the [RichTextEditorIframeSettings.Resources](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Resources) property, you can easily change the appearance of the editor's content by using an external CSS file.
47
+
The editor supports adding external CSS files to style the iframe document by using the [RichTextEditorIframeSettings.Resources](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Resources) property. This allows changing the appearance of the editor content with an external stylesheet.
48
48
49
-
Similarly, add the external script file to the `<iframe>` element using the `RichTextEditorIframeSettings.Resources` property, and it will provide the additional functionalities to the Rich Text Editor.
49
+
Similarly, add external script files to the iframe document using the same `RichTextEditorIframeSettings.Resources` property to provide additional functionality for the Rich Text Editor.
50
50
51
51
{% tabs %}
52
52
{% highlight cshtml %}
@@ -72,6 +72,6 @@ Similarly, add the external script file to the `<iframe>` element using the `Ric
72
72
{% endhighlight %}
73
73
{% endtabs %}
74
74
75
-
75
+
76
76
77
-
N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5)example to knows how to render and configure the rich text editor tools.
77
+
N> Visit the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour for an overview of its capabilities. Explore the [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5)demo to learn how to render and configure the editor tools.
0 commit comments