Class RichTextEditorImageSettings

A class used for configuring the image inserting settings in the SfRichTextEditor.

Inheritance

System.Object

RichTextEditorImageSettings

Namespace: Syncfusion.Blazor.RichTextEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class RichTextEditorImageSettings : OwningComponentBase

Constructors

RichTextEditorImageSettings()

Declaration

public RichTextEditorImageSettings()

Properties

AllowedTypes

Gets or sets image extensions that populate the allowed type of images on the browse.

Declaration

public List<string> AllowedTypes { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	The list of image types that are allowed to be uploaded. The default values are jpeg, jpg, and png.

Remarks

The File Browser allows secified extenions audio files and restricts uploading of other types of files.

Examples

The following code example allows uploading only for JPEG and JPG image types.

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items = "@Tools" />
    <RichTextEditorImageSettings AllowedTypes="@TypeList" />
</SfRichTextEditor>
@code {
    List<string> TypeList = new List<string>() { ".jpeg", ".jpg" };
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Image }
    };
}

Display

Gets or sets whether the inserted image is displayed as Inline or Break.

Declaration

public ImageDisplay Display { get; set; }

Property Value

Type	Description
ImageDisplay	One of the ImageDisplay enumeration. The default value is Inline

EnableResize

Gets or sets value indicating whether the image element can be resized in the editor’s content.

Declaration

public bool EnableResize { get; set; }

Property Value

Type	Description
System.Boolean	true, if the image can be resized; otherwise, false.The default value is true.

Remarks

You can resize image width, maximum upto MaxWidth value and maximum upto MinWidth value. Same as resize image height maximum upto MaxHeight value and maximum upto MinHeight value.

Height

Gets or sets the default height value of the image element when they are inserted into the editor.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	This property contains height value as string. The default value is auto.

Remarks

To provide the height value in pixel or percent (%) as string type.

MaxHeight

Gets or sets the maximum height constraint of the image element.

Declaration

public string MaxHeight { get; set; }

Property Value

Type	Description
System.String	A string value that represents the maximum height.

Remarks

To provide the maximum height value in pixel or percent (%) as string type.

MaxWidth

Gets or sets the maximum width constraint of the image element.

Declaration

public string MaxWidth { get; set; }

Property Value

Type	Description
System.String	A string value that represents the maximum width.

Remarks

To provide the maximum width value in pixel or percent (%) as string type.

MinHeight

Gets or sets the minimum height constraint of the image element.

Declaration

public string MinHeight { get; set; }

Property Value

Type	Description
System.String	A string value that represents the minimum height.

Remarks

To provide the minimum height value in pixel or percent (%) as string type.

MinWidth

Gets or sets the minimum width constraint of the image element.

Declaration

public string MinWidth { get; set; }

Property Value

Type	Description
System.String	A string value that represents the minimum width.

Remarks

To provide the minimum height value in pixel or percent (%) as string type.

Path

Gets or sets the Url of image save location.

Declaration

public string Path { get; set; }

Property Value

Type	Description
System.String	The value as a Url string to save image file in to server. The default value is String.Empty.

Examples

In the following code example, upload images and save them into the wwwroot/images folder.

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor>
   <RichTextEditorImageSettings Path="wwwroot/images" />
</SfRichTextEditor>

RemoveUrl

Specifies the URL of remove action that receives the image information and handles the remove operation on the server.

Declaration

public string RemoveUrl { get; set; }

Property Value

Type	Description
System.String	The URL of the remove action for removing the image on the server. The default value is String.Empty.

Remarks

The remove action should handle a POST request and define an argument with the name UploadFiles.

Trigger the event when uploading and canceling or removing an image in the insert image dialog, pasting and removing an image in Paste cleanup popup.

Examples

In the following code example, call the Remove method API endpoint on the image removing action.

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor>
   <RichTextEditorImageSettings RemoveUrl="/api/imageupload/Remove" />
</SfRichTextEditor>

ResizeByPercent

Gets or sets whether the image resizing should be enable percentage calculation.

Declaration

public bool ResizeByPercent { get; set; }

Property Value

Type	Description
System.Boolean	true, if the image can be resized based on percentage calculation; otherwise, false.The default value is true.

SaveFormat

Gets or sets the whether the inserted image is inserted as blob or base64 format.

Declaration

public SaveFormat SaveFormat { get; set; }

Property Value

Type	Description
SaveFormat	One of the SaveFormat enumeration. The default value is Blob

SaveUrl

Specifies the URL of save action that will receive the uploaded image and save it on the server.

Declaration

public string SaveUrl { get; set; }

Property Value

Type	Description
System.String	The URL of the save action for uploading and saving images on the server. The default value is String.Empty.

Remarks

The save action should handle a POST request and define an argument with the name UploadFiles.

Trigger the event when inserting the image via Insert image dialog, pasting the image, replacing the existing image, and dragging and dropping from the file browser.

Examples

In the following code example, call the Save method API endpoint on the image uploading action.

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor>
   <RichTextEditorImageSettings SaveUrl="/api/imageupload/Save" />
</SfRichTextEditor>

Width

Gets or sets the width of the image when they are inserted into the editor.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The width of the component in pixels or percent (%) as string type. The default value is auto.

Methods

Dispose(Boolean)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Boolean value to dispose the object.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true if this is the first time OnAfterRender(Boolean) has been invoked.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean