Blazorise RichTextEdit component

The RichTextEdit component allows you to add a WYSIWYG rich text editor.

The Blazorise RichTextEdit is based on the QuillJS JavaScript library.

RichTextEdit the root editor component
- Value (Optional) the bound HTML content
- Editor (Optional) initial editor content when Value is not set
- Toolbar (Optional) the editor toolbar definition
  - RichTextEditToolbarGroup toolbar group
    - RichTextEditToolbarButton toolbar button
    - RichTextEditToolbarSelect toolbar selection dropdown
      - RichTextEditToolbarSelectItem toolbar selection item
    - any custom button or component

To use the RichTextEdit component, install the Blazorise.RichTextEdit package first.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.RichTextEdit

Imports

In your main _Imports.razor add:

@using Blazorise.RichTextEdit

Configuration

In your startup configuration (Program.cs or Startup.cs), add the following statement.

builder.Services
    .AddBlazoriseRichTextEdit( options => { ... } );

Options

Name	Description	Type	Default
`UseSnowTheme`	Load the QuillJS snow theme related resources.	`bool`	`true`
`UseBubbleTheme`	Load the QuillJS bubble theme related resources.	`bool`	`false`
`UseTables`	If true enables the QuillJs table module. Please be aware that this module is not part of the core QuillJs library, and it is still experimental.	`bool`	`false`
`QuillJSVersion`	The QuillJS version to load.	`string`	`2.0.0`
`DynamicLoadReferences`	Load the RichTextEdit scripts and stylesheets on demand.	`bool`	`true`

Examples

Basic

<RichTextEdit @ref="richTextEditRef"
              Theme="RichTextEditTheme.Snow"
              @bind-Value="contentAsHtml"
              ContentChanged="@OnContentChanged"
              PlaceHolder="Type your post here..."
              ReadOnly="@readOnly"
              SubmitOnEnter="false"
              EnterPressed="@OnSave"
              ToolbarPosition="Placement.Bottom">
    <Toolbar>
        <RichTextEditToolbarGroup>
            <RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
            <RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
            <RichTextEditToolbarSelect Action="RichTextEditAction.Size">
                <RichTextEditToolbarSelectItem Value="small" />
                <RichTextEditToolbarSelectItem Selected />
                <RichTextEditToolbarSelectItem Value="large" />
                <RichTextEditToolbarSelectItem Value="huge">Very Big</RichTextEditToolbarSelectItem>
            </RichTextEditToolbarSelect>
            <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="ordered" />
            <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="bullet" />
        </RichTextEditToolbarGroup>
        <!-- Custom toolbar content -->
        <RichTextEditToolbarGroup Float="Float.End">
            <Button onClick="window.open('https://www.quilljs.com/','quilljs')"><Icon Name="IconName.InfoCircle" /></Button>
            <Button Clicked="@OnSave"><Icon Name="IconName.Save" /></Button>
        </RichTextEditToolbarGroup>
    </Toolbar>
</RichTextEdit>

@code {
    protected RichTextEdit richTextEditRef;
    protected bool readOnly;
    protected string contentAsHtml = "<p>My example content</p>";
    protected string contentAsDeltaJson;
    protected string contentAsText;
    protected string savedContent;

    public async Task OnContentChanged()
    {
        contentAsDeltaJson = await richTextEditRef.GetDeltaAsync();
        contentAsText = await richTextEditRef.GetTextAsync();
    }

    public async Task OnSave()
    {
        savedContent = await richTextEditRef.GetHtmlAsync();
        await richTextEditRef.ClearAsync();
    }
}

Validation

Use Validation with RichTextEdit to validate the editor's content.

Message

With Tables

To enable table support within the RichTextEdit component, you need to configure it in your Startup.cs file as follows:

.AddBlazoriseRichTextEdit( options =>
{
    options.UseTables = true;
} )

Once enabled, you can create tables within the RichTextEdit component using the following code:

Note: This feature is currently marked as experimental. While it provides basic table functionality, some advanced features may be limited or not fully supported. We recommend using it with caution until an official module is released by the Quill.js team.

<RichTextEdit Value="My example content">
    <Toolbar>
        <RichTextEditToolbarGroup>
            <RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
            <RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
            <RichTextEditToolbarSelect Action="RichTextEditAction.Size">
                <RichTextEditToolbarSelectItem Value="small" />
                <RichTextEditToolbarSelectItem Selected />
                <RichTextEditToolbarSelectItem Value="large" />
                <RichTextEditToolbarSelectItem Value="huge">Very Big</RichTextEditToolbarSelectItem>
            </RichTextEditToolbarSelect>
            <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="ordered" />
            <RichTextEditToolbarButton Action="RichTextEditAction.List" Value="bullet" />
        </RichTextEditToolbarGroup>
        <RichTextEditToolbarGroup>
            <RichTextEditToolbarButton Action="RichTextEditAction.Table" />
        </RichTextEditToolbarGroup>
    </Toolbar>
</RichTextEdit>

With Resize

To enable resize support within the RichTextEdit component, you need to configure it in your Startup.cs file as follows:

.AddBlazoriseRichTextEdit( options =>
{
    options.UseResize = true;
} )

Once module is configured, you can use the UseResize parameter to enable or disable the resize functionality.

<RichTextEdit UseResize Value="My example content">
    <Toolbar>
        <RichTextEditToolbarGroup>
            <RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
            <RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
        </RichTextEditToolbarGroup>
        <RichTextEditToolbarGroup>
            <RichTextEditToolbarButton Action="RichTextEditAction.Image" />
        </RichTextEditToolbarGroup>
    </Toolbar>
</RichTextEdit>

Editor customization

Theming

The RichTextEdit comes default with 2 themes Snow and Bubble. The Snow theme is a simple flat toolbar theme and the Bubble theme is a tooltip based theme where the toolbar will be displayed in the tooltip.

See QuillJS Themes for more information.

Toolbar

The RichTextEdit toolbar can be completely customized. QuillJS defines a number of default actions that can be used through the RichTextEditToolbarButton and RichTextEditToolbarSelect components

See QuillJS Toolbar module for more information.

QuillJS Configuration

The RichTextEdit has the option to inject additional QuillJS configuration logic or load additional modules. Use the ConfigureQuillJSMethod property to indicate which JavaScript method needs to be called during initialization. If you for example want to change the way how links are sanitized you can use the following logic. Default all user typed url's are relative to your pages base url. So when a user types google.com this will result in something like https://baseurl/google.com, but if you would probably like https://google.com then use the following configuration routine.

<RichTextEdit ConfigureQuillJsMethod="myComponent.configureQuillJs" />

@* Define this configuration in a javascript file
    window.myComponent = {
        configureQuillJs: () => {
            var link = Quill.import("formats/link");

            link.sanitize = url => {
                let newUrl = window.decodeURIComponent(url);
                newUrl = newUrl.trim().replace(/\s/g, "");

                if (/^(:\/\/)/.test(newUrl)) {
                    return `http${newUrl}`;
                }

                if (!/^(f|ht)tps?:\/\//i.test(newUrl)) {
                    return `http://${newUrl}`;
                }

                return newUrl;
            }
        }
    }
*@

API

Parameters

RichTextEdit

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When 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. Remarks When 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`
`Classes`	Custom CSS class names for component elements.	`TClasses`	`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`
`Styles`	Custom inline styles for component elements.	`TStyles`	`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:`Snow`, `Bubble`	`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:`Top`, `Bottom`, `Start`, `End`	`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. Remarks 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.	`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. Remarks This 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
`SetHtmlAsync`	Sets the editor content as HTML asynchronously. Remarks 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.	`ValueTask`	`string html`
`GetHtmlAsync`	Gets the editor content as HTML asynchronously.	`ValueTask<string>`	`RichTextEditHtmlOptions htmlOptions`
`SetDeltaAsync`	Sets the editor content as a Quill Delta JSON asynchronously. Remarks The 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`
`GetDeltaAsync`	Gets the editor content as a Quill Delta JSON asynchronously.	`ValueTask<string>`
`SetTextAsync`	Sets the editor content as plain text asynchronously.	`ValueTask`	`string text`
`GetTextAsync`	Gets the editor content as plain text asynchronously.	`ValueTask<string>`
`ClearAsync`	Clears the editor content asynchronously.	`ValueTask`
`OnContentChanged`	Javascript callback for when content changes.	`Task`	`string html, string text`
`OnEnter`	Javascript callback for when enter is pressed.	`Task`
`OnEditorFocus`	Javascript callback for when editor get focus.	`Task`
`OnEditorBlur`	Javascript callback for when editor lost focus.	`Task`
`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`

Blazorise RichTextEdit component

Installation

NuGet

Imports

Configuration

Options

Examples

Basic

Validation

With Tables

With Resize

Editor customization

Theming

Toolbar

QuillJS Configuration

API

Parameters

RichTextEdit

RichTextEditToolbarGroup

RichTextEditToolbarButton

RichTextEditToolbarSelect

Events

RichTextEdit

Methods

RichTextEdit

On this page