Skip to content

983303: Updated style.md, table.md, toolbar.md, undo-redo-manager.md, webassembly-performance.md, xhtml-validation.md #6788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
Open

983303: Updated style.md, table.md, toolbar.md, undo-redo-manager.md, webassembly-performance.md, xhtml-validation.md #6788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a287635
983303: Updated iframe.md, image.md, import-and-export.md, import-exp…
Bhuvaneshwari-SF4208 Oct 1, 2025
4c5a8c8
Merge branch 'development' of https://github.com/syncfusion-content/b…
Bhuvaneshwari-SF4208 Oct 1, 2025
180275d
983303: Updated style.md, table.md, toolbar.md, undo-redo-manager.md,…
Bhuvaneshwari-SF4208 Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions blazor/rich-text-editor/iframe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: IFrame Rendering in Blazor RichTextEditor | Syncfusion
description: Checkout and learn here all about IFrame Rendering in Syncfusion Blazor RichTextEditor component and more.
title: IFrame Rendering in Blazor Rich Text Editor | Syncfusion
description: Checkout and learn here all about IFrame Rendering in Syncfusion Blazor Rich Text Editor component and more.
platform: Blazor
control: RichTextEditor
documentation: ug
---

# Iframe Editable in Blazor RichTextEditor
# Iframe Editable in Blazor Rich Text Editor

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

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

{% tabs %}
{% highlight cshtml %}
Expand All @@ -26,11 +26,11 @@ Basically, in an iframe mode, you have the entire document but only the editor c
{% endhighlight %}
{% endtabs %}

![Blazor RichTextEditor with iframe](./images/blazor-richtexteditor-iframe.png)
![Blazor Rich Text Editor with iframe](./images/blazor-richtexteditor-iframe.png)

## IFrame attributes

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

{% tabs %}
{% highlight cshtml %}
Expand All @@ -40,13 +40,13 @@ You can add an additional attribute to the body tag of an `<iframe>` element by
{% endhighlight %}
{% endtabs %}

![Blazor RichTextEditor with iframe attribute](./images/blazor-richtexteditor-iframe-attribute.png)
![Blazor Rich Text Editor with iframe attribute](./images/blazor-richtexteditor-iframe-attribute.png)

## Adding external CSS/Script file

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

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.
Similarly, add external script files to the iframe document using the same `RichTextEditorIframeSettings.Resources` property to provide additional functionality for the Rich Text Editor.

{% tabs %}
{% highlight cshtml %}
Expand All @@ -72,6 +72,6 @@ Similarly, add the external script file to the `<iframe>` element using the `Ric
{% endhighlight %}
{% endtabs %}

![Blazor RichTextEditor with external css/script](./images/blazor-richtexteditor-iframe-external-CSS-script.png)
![Blazor Rich Text Editor with external CSS and script](./images/blazor-richtexteditor-iframe-external-CSS-script.png)

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.
N> Visit the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) ffeature 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.
62 changes: 31 additions & 31 deletions blazor/rich-text-editor/image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
---
layout: post
title: Image in Blazor RichTextEditor Component | Syncfusion
description: Checkout and learn here all about Image in Syncfusion Blazor RichTextEditor component and much more.
title: Image in Blazor Rich Text Editor Component | Syncfusion
description: Checkout and learn here all about Image in Syncfusion Blazor Rich Text Editor component and much more.
platform: Blazor
control: RichTextEditor
documentation: ug
---

# Image in Blazor RichTextEditor Component
# Image in Blazor Rich Text Editor Component

Rich Text Editor allows inserting images from online sources and local computer where you want to insert the image in your content. For inserting the image to the Rich Text Editor, the following list of options have been provided in the `RichTextEditorImageSettings`.
The Rich Text Editor supports inserting images from online sources and the local computer wherever images are needed in the content. To configure image behavior, use the options in [RichTextEditorImageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html).

| Options | Description |
|----------------|---------|
| AllowedTypes | Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with List<string>. For example, private List<string> AllowedTypes = new List<string> { ".jpg",".png", ".gif" };|
| AllowedTypes | Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with List<string>. For example, private List<string> AllowedTypes = new List<string> `{ ".jpg", ".png", ".gif" };`|
| Display | Sets the default display for an image when it is inserted into the Rich Text Editor. Possible options are: `Inline` and `Break`.|
| Width | Sets the default width of the image when it is inserted in the Rich Text Editor.|
| Height | Sets the default height of the image when it is inserted in the Rich Text Editor.|
| SaveUrl | Provides URL to map the action result method to save the image.|
| Path | Specifies the location to store the image. It is of string type and it appends to the name of the file or folder where you want to store the image. For example, "api/Images/"|
| EnableResize | Enables resizing for image element.|
| MinWidth | Defines the minimum Width of the image.|
| MaxWidth | Defines the maximum Width of the image.|
| MinHeight | Defines the minimum Height of the image.|
| MaxHeight | Defines the maximum Height of the image.|
| ResizeByPercent | Image resizing should be done by percentage calculation.|
| Width | Sets the default width of an inserted image. |
| Height | Sets the default height of an inserted image. |
| SaveUrl | Specifies the URL of the controller action that handles image upload. |
| Path | Specifies the location to store the image. It is of string type and it appends to the name of the file or folder where you want to store the image. For example, `"api/Images/"`|
| EnableResize | Enables resizing for images. |
| MinWidth | Sets the minimum width of the image. |
| MaxWidth | Sets the maximum width of the image. |
| MinHeight | Sets the minimum height of the image. |
| MaxHeight | Sets the maximum height of the image. |
| ResizeByPercent | Enables image resizing by percentage. |

## Upload options

Through the `browse` option in the Image dialog, select the image from the local machine and insert into the Rich Text Editor content.
Use the `browse` option in the Image dialog to select an image from the local machine and insert into the Rich Text Editor content.

If the path field is not specified in the `RichTextEditorImageSettings`, the image will be converted into base64 and blob url for the image will be created then generated url will be set as `src` property of `<img>` tag as below.
If the [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Path) field is not specified in the [RichTextEditorImageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html), the image will be converted into base64 and blob url for the image will be created then generated url will be set as `src` property of `<img>` tag as below.

The image has been loaded from the local machine and it will be saved in the given location.

Expand Down Expand Up @@ -135,43 +135,43 @@ namespace ImageUpload.Controllers

```

![Blazor RichTextEditor with Image](./images/blazor-richtexteditor-with-image.png)
![Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-with-image.png)

## Image delete

To remove an image from the Rich Text Editor content, select the image and click "Remove" tool from quick toolbar. It will delete the image from the Rich Text Editor content.

After selecting the image from the local machine, the URL for the image will be generated, from there also you can remove the image from the service location by clicking the cross icon as in the following image.

![Removing Image in Blazor RichTextEditor Content](./images/blazor-richtexteditor-remove-image.png)
![Removing Image in Blazor Rich Text Editor Content](./images/blazor-richtexteditor-remove-image.png)

## Insert from web

To insert an image from online source like Google, Ping, and more, enable images tool on the editor’s toolbar. By default, the images tool opens an image dialog that allows to insert an image from online source.

![Inserting Image in Blazor RichTextEditor Content](./images/blazor-richtexteditor-insert-image.png)
![Inserting Image in Blazor Rich Text Editor Content](./images/blazor-richtexteditor-insert-image.png)

## Dimension

Sets the default width and height of the image when it is inserted in the Rich Text Editor using `Width` and `Height` of `RichTextEditorImageSettings`.

Through the `QuickToolbar` also you can change the width and height using `Change Size` option. After clicking the option, the image size will open as below. In that specify the width and height of the image in pixel.
The image size can also be changed through the `QuickToolbar` using the `Change Size` option. After clicking the option, a dialog opens where width and height can be specified in pixels.

![Changing Image Dimension in Blazor RichTextEditor](./images/blazor-richtexteditor-image-size.png)
![Changing Image Dimension in Blazor Rich Text Editor](./images/blazor-richtexteditor-image-size.png)

## Caption and Alt Text
## Caption and alt text

Image caption and alternative text can be specified for the inserted image in the Rich Text Editor using the `RichTextEditorQuickToolbarSettings` options such as Image Caption and Alternative Text.
Specify image captions and alternative text using `RichTextEditorQuickToolbarSettings` options such as Image Caption and Alternative Text.

Through the Alternative Text option, set the alternative text for the image, when the image is not uploaded successfully into the Rich Text Editor.
Use the Alternative Text option to set alt text that displays when the image fails to load.

By clicking the Image Caption, the image will get wrapped in an image element with a caption. Then, you can type caption content inside the Rich Text Editor.
Clicking Image Caption wraps the image with a caption element, allowing caption text to be entered in the editor.

## Display position

Sets the default display for an image when it is inserted in the Rich Text Editor using `Display` field in`RichTextEditorImageSettings`.

N> It has two possible options: `Inline` and `Break`.
N> Available options: Inline and Break.

```cshtml

Expand All @@ -189,15 +189,15 @@ N> It has two possible options: `Inline` and `Break`.

## Image with link

The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, the remove, edit, and open links will be added to the quick toolbar of image as below. For further details about link, refer to the [link documentation](./link).
An image can be used as a hyperlink. When an image is linked, the quick toolbar includes Remove Link, Edit Link, and Open Link options. For more details, see the[link documentation](./link).

![Blazor RichTextEditor Image with Link](./images/blazor-richtexteditor-image-link.png)
![Blazor Rich Text Editor Image with Link](./images/blazor-richtexteditor-image-link.png)

## Resize

Rich Text Editor has a built-in image inserting support. The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.
The Rich Text Editor includes built-in support for image resizing. Resize handles appear on the image’s corners when focused, allowing users to resize with the mouse or touch easily. Resizing preserves the aspect ratio.

![Image Resizing in Blazor RichTextEditor](./images/blazor-richtexteditor-image-resize.png)
![Image Resizing in Blazor Rich Text Editor](./images/blazor-richtexteditor-image-resize.png)

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 know how to render and configure the rich text editor tools.

Expand Down
10 changes: 5 additions & 5 deletions blazor/rich-text-editor/import-and-export.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

## Import from Microsoft Word

The Rich Text Editor allows you to import content from Word documents, preserving the original formatting and structure, including headings, lists, tables, and text styles. This ensures that documents are accurately represented within the editor for seamless editing and enhancement
The Rich Text Editor allows you to import content from Word documents, preserving the original formatting and structure, including headings, lists, tables, and text styles. This ensures accurate representation of documents within the editor, enabling seamless editing.

To integrate an `ImportWord` option into the Rich Text Editor toolbar using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.

Expand Down Expand Up @@ -75,7 +75,7 @@ The following code block provides a detailed explanation of the API endpoint use

```

The `ImportWord` functionality is integrated within the `ActionBegin` and `ActionComplete` events. If the cancel property is set to true in the `ActionBegin` event argument, the execution of the `ImportWord` functionality can be prevented.
The `ImportWord` feature integrates with `ActionBegin` and `ActionComplete` events. Setting the `cancel` property to `true` in `ActionBegin` prevents execution.

The following example illustrates how to set up the `ImportWord` in the Rich Text Editor to facilitate content importation from Word documents:

Expand Down Expand Up @@ -205,7 +205,7 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex

The Rich Text Editor's export functionality allows users to convert their edited content into PDF or Word documents with a single click, preserving all text styles, images, tables, and other formatting elements.

You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the[RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.

To enable the `ExportWord` and `ExportPdf` functionality, the `ServiceUrl` property must be correctly configured within the `RichTextEditorExportWord` and `RichTextEditorExportPdf`. These API endpoints handle the export process and manage the server-side generation of Word and PDF files, respectively.

Expand All @@ -224,7 +224,7 @@ The following code block provides a detailed explanation of the API endpoint use
public ActionResult ExportToPdf([FromBody] ExportParam args)
{
string htmlString = args.html;
if (htmlString == null && htmlString == "")
if (string.IsNullOrEmpty(htmlString)
{
return null;
}
Expand All @@ -251,7 +251,7 @@ The following code block provides a detailed explanation of the API endpoint use
public FileStreamResult ExportToDocx([FromBody] ExportParam args)
{
string htmlString = args.html;
if (htmlString == null && htmlString == "")
if (string.IsNullOrEmpty(htmlString)
{
return null;
}
Expand Down
Loading