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.
Inherited Members
Namespace: Syncfusion.Blazor.RichTextEditor
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfRichTextEditor : SfBaseComponent
Constructors
SfRichTextEditor()
Declaration
public SfRichTextEditor()
Properties
AutoSaveOnIdle
Enables or disables the auto-save option which performs the save action while in the idle state after typed content.
If enabled, the Rich Text Editor will save the content on the idle state with SaveInterval
property's value.
Declaration
public bool AutoSaveOnIdle { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
ChildContent
Sets the child content for the Rich Text Editor Element.
Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment |
CssClass
Specifies the CSS class name that append with the root element of the Rich Text Editor. One or more custom CSS classes can be added to the Rich Text Editor.
Declaration
public string CssClass { get; set; }
Property Value
Type | Description |
---|---|
System.String |
DeniedSanitizeSelectors
Specifies the list of denied attributes preventing from sanitize or not.
Declaration
public string[] DeniedSanitizeSelectors { get; set; }
Property Value
Type | Description |
---|---|
System.String[] |
EditorMode
Defines the types of editor mode in which the Rich Text Editor is rendered.
Declaration
public EditorMode EditorMode { get; set; }
Property Value
Type | Description |
---|---|
EditorMode |
EnableAutoUrl
The given URL will automatically convert to the absolute path URL by prefixing https://
to hyperlinks.
Declaration
public bool EnableAutoUrl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Enabled
Specifies a value that indicates whether the component is enabled or not.
Declaration
public bool Enabled { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableHtmlEncode
Specifies the value that indicates whether the source code is displayed with the encoded format or not.
Declaration
public bool EnableHtmlEncode { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableHtmlSanitizer
Defines whether to allow the cross-scripting site or not.
Declaration
public bool EnableHtmlSanitizer { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnablePersistence
Enables or disables the persisting component's state between page reloads. If enabled, the value of Rich Text Editor is persisted.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableResize
Enables or disables the resizing option in the editor. If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.
Declaration
public bool EnableResize { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableRtl
Enable or disable the rendering component in the right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableTabKey
Determines whether the Tab key action works within a content or not in the Rich Text Editor content.
Declaration
public bool EnableTabKey { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
EnableXhtml
Enables to validate the Rich Text Editor’s content as valid XHTML format and resave it in the Editor’s content. To get valid XHTML format of content, use the public method “GetXhtml”.
Declaration
public bool EnableXhtml { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
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
FloatingToolbarOffset
Preserves the toolbar at the top of the Rich Text Editor on scrolling and specifies the offset of the floating toolbar from the documents top position.
Declaration
public double FloatingToolbarOffset { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Height
Specifies the height of the Rich Text Editor component.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String |
ID
Specifies the unique identifier.
Declaration
public string ID { get; set; }
Property Value
Type | Description |
---|---|
System.String |
KeyConfigure
Customizes the key actions in Rich Text Editor. For example, when using a German keyboard, the key actions can be customized using these shortcuts.
Declaration
public ShortcutKeys KeyConfigure { get; set; }
Property Value
Type | Description |
---|---|
ShortcutKeys |
MaxLength
Specifies the maximum number of characters allowed in the Rich Text Editor component.
Declaration
public int MaxLength { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 |
Placeholder
Specifies the placeholder text to display when the Rich Text Editor's body is empty.
Declaration
public string Placeholder { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Readonly
The user interactions on the component are disabled when set to true.
Declaration
public bool Readonly { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
RteEditContext
Declaration
protected EditContext RteEditContext { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.Forms.EditContext |
SaveInterval
Specifies the SaveInterval in milliseconds for autosave the value. 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 |
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
ShowCharCount
Sets a value that show or hide the character counter in the editor.
Declaration
public bool ShowCharCount { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
UndoRedoSteps
Specifies the count of undo history which is stored in the UndoRedoManager.
Declaration
public int UndoRedoSteps { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 |
UndoRedoTimer
Specifies the interval value in milliseconds that store actions in UndoRedoManager. The minimum value is 300 milliseconds.
Declaration
public int UndoRedoTimer { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 |
Value
Specifies the value of the Rich Text Editor.
Declaration
public string Value { get; set; }
Property Value
Type | Description |
---|---|
System.String |
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
Specifies the width of the Rich Text Editor.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String |
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 Rich Text Editor 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. |
EnableToolbarItem(List<ToolbarCommand>)
Enables the given toolbar items in the Rich Text Editor 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. |
ExecuteCommandAsync(CommandName)
Executes the 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, 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, String, ExecuteCommandOption)
Executes the 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()
Focuses the Rich Text Editor component.
Declaration
public Task FocusAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
FocusOutAsync()
Blurs the Rich Text Editor component.
Declaration
public Task FocusOutAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
GetCharCountAsync()
Returns the maximum number of characters in the Rich Text Editor.
Declaration
public Task<double> GetCharCountAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Double> | A System.Threading.Tasks.Task representing any asynchronous operation. |
GetSelectedHtmlAsync()
Returns 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 Rich Text Editor.
Declaration
public Task<string> GetSelectionAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.String> | A System.Threading.Tasks.Task representing any asynchronous operation. |
GetTextAsync()
Returns 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
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 Rich Text Editor 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 in the Rich Text Editor 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 in the Rich Text Editor 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 Rich Text 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 Rich Text Editor component.
Declaration
public Task ShowDialogAsync(DialogType type)
Parameters
Type | Name | Description |
---|---|---|
DialogType | type |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task |
ShowFullScreenAsync()
Shows the Rich Text Editor 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. |