Class SfRichTextEditor

The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more.

Inheritance

System.Object

SfBaseComponent

SfRichTextEditor

Inherited Members

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.RichTextEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfRichTextEditor : SfBaseComponent

Constructors

SfRichTextEditor()

Declaration

public SfRichTextEditor()

Properties

AutoSaveOnIdle

Gets or sets whether the content is saved if the editor is idle for the number of milliseconds specified in the SaveInterval property or not.

Declaration

public bool AutoSaveOnIdle { get; set; }

Property Value

Type	Description
System.Boolean	true, if the editor is idle for the number of milliseconds specified in the SaveInterval property otherwise,false. The default value is false.

See Also

SaveInterval

ChildContent

Gets or Sets the child content for the SfRichTextEditor component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The template content. The default value in null.

Examples

In the following code example, the content has been set to the SfRichTextEditor using the ChildContent property.

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor>
    <p> The Rich Text Editor component is a <b>WYSIWYG</b>("what you see is what you get") editor.</p>
</SfRichTextEditor>

CssClass

Gets or sets the classes for SfRichTextEditor component to customize the appearance. One or more custom CSS classes can be added.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS classes string separated by space to customize the appearance of the editor. The default value is String.Empty

DeniedSanitizeSelectors

Gets or sets the list of denied attributes preventing when pasting into the editor.

Declaration

public string[] DeniedSanitizeSelectors { get; set; }

Property Value

Type	Description
System.String[]	Accepts the array of string values. The default value is empty array.

EditorMode

Gets or sets a value that indicates the SfRichTextEditor allows to edit and formatting the HTML or Markdown content.

Declaration

public EditorMode EditorMode { get; set; }

Property Value

Type	Description
EditorMode	One of the EditorMode enumeration. The default value is HTML

Remarks

If the EditorMode is HTML, edit HTML markup content. If the EditorMode is Markdown, edit the Markdown content with markdown syntax.

EnableAutoUrl

Gets or sets whether the hyperlinks URL will automatically convert to the absolute path URL by prefixing https:// or not.

Declaration

public bool EnableAutoUrl { get; set; }

Property Value

Type	Description
System.Boolean	true, if hyperliks URL will automatically added prefixing https://; otherwise, false.The default value is false.

Enabled

Gets or sets whether the SfRichTextEditor component is enabled or not.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Rich Text Editor component is enabled. The default value is true.

EnableHtmlEncode

Gets or sets whether the source code is displayed with the HTML encoded format or not.

Declaration

public bool EnableHtmlEncode { get; set; }

Property Value

Type	Description
System.Boolean	true, if the source code diaply with HTML encoded format; otherwise,false.The default value is false.

Remarks

The encoding option applies only to the HTML editor, not to Markdown.

EnableHtmlSanitizer

Gets or sets whether to allow the cross-scripting site attacks or not.

Declaration

public bool EnableHtmlSanitizer { get; set; }

Property Value

Type	Description
System.Boolean	true, if the eidtor content disable the cross-scripting site attacks; otherwise,false.The default value is true.

EnablePersistence

Gets or sets whether to persist component's state between page reloads. When set to true, the Value property is persisted

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, if the component's state persistence is enabled. The default value is false.

Remarks

Component's Value property will be stored in browser local storage to persist component's state when page reloads.

EnableResize

Gets or sets whether the Rich Text Editor content area allow to resize or not.

Declaration

public bool EnableResize { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Rich Text Editor content area allows as resizable. The default value is false.

EnableRtl

Gets or sets whether the right to left direction is enabled for SfRichTextEditor component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, if the right to left direction is enabled for SfRichTextEditor component. The default value is false.

EnableTabKey

Gets or sets whether the Tab key action works within the editor content or not.

Declaration

public bool EnableTabKey { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Tab key action works within the editor content otherwise,false. The default value is false.

EnableXhtml

Gets or sets whether the editor’s content is valid XHTML format or not.

Declaration

public bool EnableXhtml { get; set; }

Property Value

Type	Description
System.Boolean	true, if the editor content is valid XHML format otherwise,false. The default value is false.

Remarks

To get valid XHTML format of content, use the public method GetXhtmlAsync().

EnterKey

Gets or sets a tag value that will be inserted when ENTER key is pressed.

Declaration

public EnterKeyTag EnterKey { get; set; }

Property Value

Type	Description
EnterKeyTag	One of the EnterKeyTag enumeration values. The default value is P

Remarks

If the EnterKey is EnterKeyTag.P, new <p> tag will be inserted when ENTER key is pressed. If the EnterKey is EnterKeyTag.DIV, new <div> tag will be inserted when ENTER key is pressed. If the EnterKey is EnterKeyTag.BR, new <br> tag will be inserted when ENTER key is pressed.

See Also

ShiftEnterKey

FloatingToolbarOffset

Gets or sets offset top value to preserves the toolbar of the SfRichTextEditor on scrolling.

Declaration

public double FloatingToolbarOffset { get; set; }

Property Value

Type	Description
System.Double	This property contains offset top value as double type. The default value is 0.

Height

Get or sets the height of the SfRichTextEditor component.

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.

ID

Gets or sets the unique identifier for SfRichTextEditor component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is String.Empty.

Remarks

You can specify only unique value.

KeyConfigure

Gets or sets the keyboard shortcuts key configuration in the SfRichTextEditor.

Declaration

public ShortcutKeys KeyConfigure { get; set; }

Property Value

Type	Description
ShortcutKeys	ShortcutKeys

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor KeyConfigure="shortcutKeys">
</SfRichTextEditor>
@code {
    ShortcutKeys shortcutKeys = new ShortcutKeys() { Bold = "ctrl+d" };
     }

MaxLength

Gets or sets the maximum number of characters allowed to type in the SfRichTextEditor component.

Declaration

public int MaxLength { get; set; }

Property Value

Type	Description
System.Int32	The number of characters allowed to type in the editor. The default value is -1, means no limitation.

Remarks

While copy and pasting the content into the editor, allowed to paste MaxLength characters remaining will truncate.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor MaxLength="200" ShowCharCount=true>
</SfRichTextEditor>

Placeholder

Gets or sets the text that is displayed when the component has no content and remove on the focus.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	The text that is displayed when the SfRichTextEditor component has no content. The default value is String.Empty.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor Placeholder="Start to type...">
</SfRichTextEditor>

Readonly

Gets or sets a value indicating whether content in the SfRichTextEditor component is read-only.

Declaration

public bool Readonly { get; set; }

Property Value

Type	Description
System.Boolean	true if the Rich Text Editor component is read-only; otherwise, false. The default is false.

Remarks

When this property is set to true, the contents of the component cannot be changed by the user interaction. But, you can set the value of the Value property in code.

RteEditContext

Declaration

protected EditContext RteEditContext { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.Forms.EditContext

SaveInterval

Gets or sets an interval time to automatically make a save request after a specified time in the editor. The change event will be triggered if the content was changed from the last saved interval.

Declaration

public double SaveInterval { get; set; }

Property Value

Type	Description
System.Double	The number of miliseconds of interval time to automatically make a save request in the SfRichTextEditor. The default is 10000 miliseconds.

Remarks

The ValueChange event will be triggered with every save request if the content was changed in the editor from the last saved interval.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor SaveInterval="1000">
</SfRichTextEditor>

See Also

AutoSaveOnIdle

ShiftEnterKey

Gets or sets a tag value that will be inserted when SHIFT + ENTER key is pressed.

Declaration

public ShiftEnterKeyTag ShiftEnterKey { get; set; }

Property Value

Type	Description
ShiftEnterKeyTag	One of the ShiftEnterKeyTag enumeration values. The default value is BR

Remarks

If the ShiftEnterKey is ShiftEnterKeyTag.BR, new <br> tag will be inserted when SHIFT + ENTER key is pressed. If the ShiftEnterKey is ShiftEnterKeyTag.P, new <p> tag will be inserted when SHIFT + ENTER key is pressed. If the ShiftEnterKey is ShiftEnterKeyTag.DIV, new <div> tag will be inserted when SHIFT + ENTER key is pressed.

See Also

EnterKey

ShowCharCount

Gets or sets a value that shows or hides the character counter at the bottom of the editor.

Declaration

public bool ShowCharCount { get; set; }

Property Value

Type	Description
System.Boolean	true if the character counter shows at the bottom of the editor; otherwise, false. The default is false.

See Also

MaxLength

ShowTooltip

Gets or sets whether tooltips will be displayed for the Rich Text Editor toolbar.

Declaration

public bool ShowTooltip { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Rich Text Editor describe the functions of toolbar and inline toolbar items ; otherwise,false.The default value is true.

UndoRedoSteps

Gets or sets the number of undo and redo history steps count, which is stored in the undo and redo stack.

Declaration

public int UndoRedoSteps { get; set; }

Property Value

Type	Description
System.Int32	The number of steps to stored in the undo and redo stack. The default value is 30.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor UndoRedoSteps="50">
</SfRichTextEditor>

UndoRedoTimer

Gets or sets the idle time in milliseconds stored in the undo stack after stopping typing in the editor.

Declaration

public int UndoRedoTimer { get; set; }

Property Value

Type	Description
System.Int32	The number of miliseconds of idle time to be stored in the undo stack after stop typing in the editor. The default is 300 miliseconds.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor UndoRedoTimer="100">
</SfRichTextEditor>

Value

Gets or sets the current content of the Rich Text Editor.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	The content displayed in the Rich Text Editor component.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor @bind-Value="rteValue">
</SfRichTextEditor>
@code {
    string rteValue = "<p> The Rich Text Editor component is a <b>WYSIWYG</b>('what you see is what you get') editor.</p>";
     }

ValueChanged

Declaration

public EventCallback<string> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>

ValueExpression

Declaration

public Expression<Func<string>> ValueExpression { get; set; }

Property Value

Type	Description
System.Linq.Expressions.Expression<System.Func<System.String>>

Width

Gets or sets the width of the Rich Text 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 100%.

Examples

@using Syncfusion.Blazor.RichTextEditor;
<SfRichTextEditor Width="50%">
</SfRichTextEditor>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CloseDialogAsync(DialogType)

Closes the dialog in the Rich Text Editor component.

Declaration

public Task CloseDialogAsync(DialogType type)

Parameters

Type	Name	Description
DialogType	type

Returns

Type	Description
System.Threading.Tasks.Task

DisableToolbarItem(List<ToolbarCommand>)

Disables the given toolbar items in the SfRichTextEditor component.

Declaration

public void DisableToolbarItem(List<ToolbarCommand> items)

Parameters

Type	Name	Description
System.Collections.Generic.List<ToolbarCommand>	items	Specifies the list of toolbar items to be disabled.

Remarks

This method does not return a value.

EnableToolbarItem(List<ToolbarCommand>)

Enables the given toolbar items in the SfRichTextEditor component.

Declaration

public void EnableToolbarItem(List<ToolbarCommand> items)

Parameters

Type	Name	Description
System.Collections.Generic.List<ToolbarCommand>	items	Specifies the list of toolbar items to be enabled.

Remarks

This method does not return a value.

ExecuteCommandAsync(CommandName)

Executes the specified commands.

Declaration

public Task ExecuteCommandAsync(CommandName commandName)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.

Returns

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

ExecuteCommandAsync(CommandName, AudioCommandsArgs, ExecuteCommandOption)

Executes the commands related to Audio.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, AudioCommandsArgs commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
AudioCommandsArgs	commandValue	Specifies the values like Url and CssClass of the audio.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

ExecuteCommandAsync(CommandName, ImageCommandsArgs, ExecuteCommandOption)

Executes the commands related to Image.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, ImageCommandsArgs commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
ImageCommandsArgs	commandValue	Specifies the values like Url ,Width, Height, AltText and CssClass of the image.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

ExecuteCommandAsync(CommandName, LinkCommandsArgs, ExecuteCommandOption)

Executes the commands related to Link.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, LinkCommandsArgs commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
LinkCommandsArgs	commandValue	Specifies the values like Url ,Title, Text and Target of the link.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

ExecuteCommandAsync(CommandName, TableCommandsArgs, ExecuteCommandOption)

Executes the commands related to Table.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, TableCommandsArgs commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
TableCommandsArgs	commandValue	Specifies the values like Rows ,Columns and Width of the table.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

ExecuteCommandAsync(CommandName, VideoCommandsArgs, ExecuteCommandOption)

Executes the commands related to Video.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, VideoCommandsArgs commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
VideoCommandsArgs	commandValue	Specifies the values like Url ,Width, Height, and CssClass of the video.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

ExecuteCommandAsync(CommandName, String, ExecuteCommandOption)

Executes the specified commands.

Declaration

public Task ExecuteCommandAsync(CommandName commandName, string commandValue = null, ExecuteCommandOption option = null)

Parameters

Type	Name	Description
CommandName	commandName	Specifies the name of the command to be executed.
System.String	commandValue	Specifies the value to be applied or inserted when executing the command.
ExecuteCommandOption	option	Specifies other options to be given when execution.

Returns

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

FocusAsync()

Attempts to set focus to SfRichTextEditor component.

Declaration

public Task FocusAsync()

Returns

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

FocusOutAsync()

Blurs the SfRichTextEditor component.

Declaration

public Task FocusOutAsync()

Returns

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

GetCharCountAsync()

Gets the number of characters in the SfRichTextEditor.

Declaration

public Task<double> GetCharCountAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Double>	The number of characters count.

GetSelectedHtmlAsync()

Gets the HTML value of the selected content as a string.

Declaration

public Task<string> GetSelectedHtmlAsync()

Returns

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

GetSelectionAsync()

Retrieves the HTML markup content from currently selected content of the SfRichTextEditor.

Declaration

public Task<string> GetSelectionAsync()

Returns

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

GetTextAsync()

Gets the plain-text content of the editor’s value.

Declaration

public Task<string> GetTextAsync()

Returns

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

GetXhtmlAsync()

Retrieves the Rich Text Editor's XHTML validated HTML content when EnableXhtml property is enabled.

Declaration

public Task<string> GetXhtmlAsync()

Returns

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

HideInlineToolbarAsync()

Hides the inline quick toolbar.

Declaration

public Task HideInlineToolbarAsync()

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.

Overrides

SfBaseComponent.OnInitializedAsync()

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.

PrintAsync()

Prints the Rich Text Editor’s value.

Declaration

public Task PrintAsync()

Returns

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

RefreshUIAsync()

Refresh the view of the editor.

Declaration

public Task RefreshUIAsync()

Returns

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

RemoveToolbarItem(List<ToolbarCommand>)

Removes the given toolbar items from the SfRichTextEditor component.

Declaration

public void RemoveToolbarItem(List<ToolbarCommand> items)

Parameters

Type	Name	Description
System.Collections.Generic.List<ToolbarCommand>	items	Specifies the list of toolbar items to be removed.

RestoreSelectionAsync()

Restore the saved selection range in the SfRichTextEditor content.

Declaration

public Task RestoreSelectionAsync()

Returns

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

SaveSelectionAsync()

Save the current selection range in the SfRichTextEditor content.

Declaration

public Task SaveSelectionAsync()

Returns

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

SelectAllAsync()

Selects all the content in the editor.

Declaration

public Task SelectAllAsync()

Returns

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

ShowDialogAsync(DialogType)

Shows the dialog in the SfRichTextEditor component.

Declaration

public Task ShowDialogAsync(DialogType type)

Parameters

Type	Name	Description
DialogType	type	Specifies the dialog name to be open.

Returns

Type	Description
System.Threading.Tasks.Task

ShowFullScreenAsync()

Shows the SfRichTextEditor component in full-screen mode.

Declaration

public Task ShowFullScreenAsync()

Returns

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

ShowInlineToolbarAsync()

Shows the inline quick toolbar.

Declaration

public Task ShowInlineToolbarAsync()

Returns

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

ShowSourceCodeAsync()

Shows the HTML and Markdown markup of the Rich Text Editor’s value.

Declaration

public Task ShowSourceCodeAsync()

Returns

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