Blazorise RichTextEdit: API Reference
Explore the Blazorise RichTextEdit API reference for editor parameters, toolbar components, events, and methods.
For examples and details on the usage of this component, visit the example page: RichTextEdit
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 | Default | Type |
|---|---|---|
AriaDescribedBy | — | string |
Specifies the aria-describedby attribute value. When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation. | ||
AriaInvalid | — | string |
Specifies the aria-invalid attribute value. When set, this value is rendered as-is and overrides the validation-derived aria-invalid state. | ||
AriaLabelledBy | — | string |
Specifies the aria-labelledby attribute value. When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel. | ||
AriaRequired | false | bool |
Specifies the aria-required attribute value. When set, this value overrides the required-field state resolved from the parent Validation. | ||
Autofocus | false | bool |
Set's the focus to the component after the rendering is done. | ||
ChildContent | null | RenderFragment |
Specifies the content to be rendered inside this RichTextEdit. | ||
ConfigureQuillJsMethod | — | string |
[Optional] The javascript method to call to configure additional QuillJs modules and or add custom bindings. | ||
Disabled | false | bool |
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. | ||
Editor | null | RenderFragment |
[Optional] Gets or sets the content visible in the editor. | ||
Feedback | null | RenderFragment |
Placeholder for validation messages. | ||
OnScreenKeyboard | false | bool |
Enables the on-screen keyboard for this input component. When not explicitly set, the global accessibility option is used. When omitted, uses the global accessibility setting and enabled input types. | ||
OnScreenKeyboardEnterKeyBehavior | Input-dependent | OnScreenKeyboardEnterKeyBehavior |
Specifies how the on-screen keyboard enter key should behave for this input component. Possible values: DefaultNewLineSubmitHideKeyDownWhen omitted, uses the cascading override, then the global option, then the input component's behavior. | ||
OnScreenKeyboardLayout | Input-dependent | OnScreenKeyboardLayout |
Specifies the on-screen keyboard layout for this input component. When not explicitly set, the global accessibility option is used. Possible values: TextNumericDecimalEmailUrlTelephoneWhen omitted, uses the global default layout, then the input component's layout. | ||
OnScreenKeyboardShowMode | Focus | OnScreenKeyboardShowMode |
Gets or sets how the on-screen keyboard is shown for this input. Possible values: DefaultFocusManualWhen omitted, uses the global show mode; Default resolves to Focus. | ||
PlaceHolder | — | string |
Place holder text visible in empty editor. | ||
ReadOnly | false | bool |
Add the readonly boolean attribute on an input to prevent modification of the input’s value. | ||
SanitizedPasteOptions | null | RichTextEditSanitizedPasteOptions |
Options used to configure sanitized paste functionality. When this parameter is explicitly defined, it has priority over globally configured SanitizedPasteOptions. | ||
Size | Default | Size? |
Sets the size of the input control. When omitted, uses the parent Addons size, then the theme input size, then Size.Default. | ||
SubmitOnEnter | false | bool |
Call EnterPressed event when user presses the ENTER key. | ||
TabIndex | null | int? |
If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. | ||
Theme | Snow | RichTextEditTheme |
The theme (Snow or Bubble) of the editor. Possible values: SnowBubble | ||
Toolbar | null | RenderFragment |
[Optional] Gets or sets the content of the toolbar. | ||
ToolbarPosition | Top | Placement |
Toolbar placed on the top or bottom of the editor. Possible values: TopBottomStartEnd | ||
UseResize | false | bool |
Indicates whether resizing functionality should be enabled. When this parameter is explicitly defined, it has priority over globally configured UseResize. | ||
UseSanitizedPaste | false | bool |
Indicates whether sanitized paste functionality should be enabled. When this parameter is explicitly defined, it has priority over globally configured UseSanitizedPaste. | ||
UseTables | false | bool |
Indicates whether table functionality should be enabled. When this parameter is explicitly defined, it has priority over globally configured UseTables. | ||
Value | null | TValue |
Specifies the value inside the input field. | ||
ValueExpression | null | Expression<Func<TValue>> |
Specifies an expression that identifies the input value. | ||
RichTextEditToolbarGroup
| Parameter | Default | Type |
|---|---|---|
ChildContent | null | RenderFragment |
Defines the child content. | ||
RichTextEditToolbarButton
| Parameter | Default | Type |
|---|---|---|
Action | null | RichTextEditAction? |
Specifies the toolbar action. | ||
Value | — | string |
Specifies the value corresponding to the action. | ||
RichTextEditToolbarSelect
| Parameter | Default | Type |
|---|---|---|
Action | null | RichTextEditAction? |
Specifies the select action. | ||
ChildContent | null | RenderFragment |
Defines the child content. | ||
Events
RichTextEdit
| Event | Type |
|---|---|
Blur | EventCallback<FocusEventArgs> |
The blur event fires when an element has lost focus. | |
ContentChanged | EventCallback |
Notifies when the content within the editor changes. | |
CustomValidationValue | Func<TValue> |
Used to provide custom validation value on which the validation will be processed with the Validator handler. Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList. | |
EditorBlur | EventCallback |
Notifies when the editor loses focus. | |
EditorFocus | EventCallback |
Notifies when the editor gains focus. | |
EnterPressed | EventCallback |
Notifies when the enter key is pressed within the editor. This event is triggered only when SubmitOnEnter is enabled. | |
FocusIn | EventCallback<FocusEventArgs> |
Notifies when the input box gains focus. | |
FocusOut | EventCallback<FocusEventArgs> |
Notifies when the input box loses focus. | |
KeyDown | EventCallback<KeyboardEventArgs> |
Notifies when a key is pressed down while the control has focus. | |
KeyPress | EventCallback<KeyboardEventArgs> |
Notifies when a key is pressed while the control has focus. | |
KeyUp | EventCallback<KeyboardEventArgs> |
Notifies when a key is released while the control has focus. | |
OnFocus | EventCallback<FocusEventArgs> |
Notifies when the input box gains or loses focus. | |
ValueChanged | EventCallback<TValue> |
Occurs after value has changed. | |
Methods
RichTextEdit
| Method | Return | Parameters |
|---|---|---|
ClearAsync | ValueTask | — |
Clears the editor content asynchronously.
| ||
GetDeltaAsync | ValueTask<string> | — |
Gets the editor content as a Quill Delta JSON asynchronously.
| ||
GetHtmlAsync | ValueTask<string> | RichTextEditHtmlOptions htmlOptions |
Gets the editor content as HTML asynchronously.
| ||
GetTextAsync | ValueTask<string> | — |
Gets the editor content as plain text asynchronously.
| ||
SetDeltaAsync | ValueTask | string deltaJson |
Sets the editor content as a Quill Delta JSON asynchronously.
The Quill Delta format is a rich text format used by the Quill editor. See the official Quill.js documentation for more details. | ||
SetHtmlAsync | ValueTask | string html |
Sets the editor content as HTML asynchronously.
Improper handling of HTML can lead to cross-site scripting (XSS). Ensure that the HTML content is properly sanitized before setting it in the editor. | ||
SetTextAsync | ValueTask | string text |
Sets the editor content as plain text asynchronously.
| ||
ShowOnScreenKeyboard | Task | bool focus |
Shows the on-screen keyboard for this input.
| ||
Focus | Task | bool scrollToElement |
Sets the focus on the underline element.
| ||
Revalidate | Task | — |
Forces the Validation (if any is used) to re-validate with the new custom or internal value.
| ||