Blazorise RichTextEdit: API Reference
Explore the API reference for the Blazorise RichTextEdit component, detailing available attributes and methods.
The RichTextEdit component in Blazorise is a rich text editor that provides a user-friendly interface for creating and editing formatted text content. It supports a variety of text formatting options such as bold, italic, underline, lists, links, and more. Additionally, the editor is extensible, allowing developers to enable and use advanced features like inserting tables, images, and even embedding custom HTML content.
API
Parameters
RichTextEdit
| Parameter | Description | Type | Default |
|---|---|---|---|
AriaDescribedBy |
Gets or sets the aria-describedby attribute value. RemarksWhen set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation. |
string | |
AriaInvalid |
Gets or sets the aria-invalid attribute value. RemarksWhen set, this value is rendered as-is and overrides the validation-derived aria-invalid state. |
string | |
Autofocus |
Set's the focus to the component after the rendering is done. |
bool | false |
ChildContent |
Specifies the content to be rendered inside this RichTextEdit. |
RenderFragment | null |
ConfigureQuillJsMethod |
[Optional] The javascript method to call to configure additional QuillJs modules and or add custom bindings. |
string | |
Disabled |
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. |
bool | false |
Editor |
[Optional] Gets or sets the content visible in the editor. |
RenderFragment | null |
Feedback |
Placeholder for validation messages. |
RenderFragment | null |
PlaceHolder |
Place holder text visible in empty editor. |
string | |
ReadOnly |
Add the readonly boolean attribute on an input to prevent modification of the input’s value. |
bool | false |
Size |
Sets the size of the input control. |
Size? | null |
SubmitOnEnter |
Call EnterPressed event when user presses the ENTER key. |
bool | false |
TabIndex |
If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. |
int? | null |
Theme |
The theme (Snow or Bubble) of the editor. Possible values: |
RichTextEditTheme | RichTextEditTheme.Snow |
Toolbar |
[Optional] Gets or sets the content of the toolbar. |
RenderFragment | null |
ToolbarPosition |
Toolbar placed on the top or bottom of the editor. Possible values: |
Placement | Top |
UseResize |
Indicates whether resizing functionality should be enabled. |
bool | false |
Value |
Gets or sets the value inside the input field. |
TValue | null |
ValueExpression |
Gets or sets an expression that identifies the input value. |
Expression<Func<TValue>> | null |
RichTextEditToolbarGroup
| Parameter | Description | Type | Default |
|---|---|---|---|
ChildContent |
Gets or sets the child content. |
RenderFragment | null |
RichTextEditToolbarButton
| Parameter | Description | Type | Default |
|---|---|---|---|
Action |
Gets or sets the toolbar action. |
RichTextEditAction? | null |
Value |
Gets or sets the value corresponding to the action. |
string |
RichTextEditToolbarSelect
| Parameter | Description | Type | Default |
|---|---|---|---|
Action |
Gets or sets the select action. |
RichTextEditAction? | null |
ChildContent |
Gets or sets the child content. |
RenderFragment | null |
Events
RichTextEdit
| Event | Description | Type |
|---|---|---|
Blur |
The blur event fires when an element has lost focus. |
EventCallback<FocusEventArgs> |
ContentChanged |
Occurs when the content within the editor changes. |
EventCallback |
CustomValidationValue |
Used to provide custom validation value on which the validation will be processed with the Validator handler. RemarksShould be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList. |
Func<TValue> |
EditorBlur |
Occurs when the editor loses focus. |
EventCallback |
EditorFocus |
Occurs when the editor gains focus. |
EventCallback |
EnterPressed |
Occurs when the enter key is pressed within the editor. RemarksThis event is triggered only when SubmitOnEnter is enabled. |
EventCallback |
FocusIn |
Occurs when the input box gains focus. |
EventCallback<FocusEventArgs> |
FocusOut |
Occurs when the input box loses focus. |
EventCallback<FocusEventArgs> |
KeyDown |
Occurs when a key is pressed down while the control has focus. |
EventCallback<KeyboardEventArgs> |
KeyPress |
Occurs when a key is pressed while the control has focus. |
EventCallback<KeyboardEventArgs> |
KeyUp |
Occurs when a key is released while the control has focus. |
EventCallback<KeyboardEventArgs> |
OnFocus |
Occurs when the input box gains or loses focus. |
EventCallback<FocusEventArgs> |
ValueChanged |
Occurs after value has changed. |
EventCallback<TValue> |
Methods
RichTextEdit
| Method | Description | Return | Parameters |
|---|---|---|---|
ClearAsync |
Clears the editor content asynchronously. | ValueTask | |
GetDeltaAsync |
Gets the editor content as a Quill Delta JSON asynchronously. | ValueTask<string> | |
GetHtmlAsync |
Gets the editor content as HTML asynchronously. | ValueTask<string> | RichTextEditHtmlOptions htmlOptions |
GetTextAsync |
Gets the editor content as plain text asynchronously. | ValueTask<string> | |
OnContentChanged |
Javascript callback for when content changes. | Task | string html, string text |
OnEditorBlur |
Javascript callback for when editor lost focus. | Task | |
OnEditorFocus |
Javascript callback for when editor get focus. | Task | |
OnEnter |
Javascript callback for when enter is pressed. | Task | |
SetDeltaAsync |
Sets the editor content as a Quill Delta JSON asynchronously.
RemarksThe Quill Delta format is a rich text format used by the Quill editor. See the official Quill.js documentation for more details. | ValueTask | string deltaJson |
SetHtmlAsync |
Sets the editor content as HTML asynchronously.
RemarksImproper handling of HTML can lead to cross-site scripting (XSS). Ensure that the HTML content is properly sanitized before setting it in the editor. | ValueTask | string html |
SetTextAsync |
Sets the editor content as plain text asynchronously. | ValueTask | string text |
Focus |
Sets the focus on the underline element. | Task | bool scrollToElement |
Revalidate |
Forces the Validation (if any is used) to re-validate with the new custom or internal value. | Task |