Blazorise RichTextEdit component

The RichTextEdit component allows you to add and use a ‘WYSIWYG’ rich text editor.

The Blazorise RichTextEdit is based on the QuillJS JavaScript library.

RichTextEdit the root editor component
- Editor (Optional) the editor part with displayed html content
- 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

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.RichTextEdit

Imports

In your main _Imports.razor add:

@using Blazorise.RichTextEdit

Configuration

In your Blazor StartUp add the following statement

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

Options

Name	Description	Type	Default
`UseShowTheme`	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"
              ContentChanged="@OnContentChanged"
              PlaceHolder="Type your post here..."
              ReadOnly="@readOnly"
              SubmitOnEnter="false"
              EnterPressed="@OnSave"
              ToolbarPosition="Placement.Bottom">
    <Editor>My example content</Editor>
    <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;
    protected string contentAsDeltaJson;
    protected string contentAsText;
    protected string savedContent;

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

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

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>
    <Editor>My example content</Editor>
    <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>

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

Events

Name	Description	Type
`ContentChanged`	Occurs when the content within the editor changes.	`EventCallback`
`EnterPressed`	Occurs when the ENTER key is pressed within the editor. This event is triggered only when `SubmitOnEnter` is enabled.	`EventCallback`
`EditorFocus`	Occurs when the editor gains focus.	`EventCallback`
`EditorBlur`	Occurs when the editor loses focus.	`EventCallback`

Methods

Name	Description	Return	Parameters
`SetHtmlAsync`	Sets the editor content as HTML asynchronously.	`ValueTask`	`string html`
`GetHtmlAsync`	Gets the editor content as HTML asynchronously.	`ValueTask<string>`
`SetDeltaAsync`	Sets the editor content as a Quill Delta JSON asynchronously.	`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`

Attributes

RichTextEdit

Name	Description	Type	Default
`Toolbar`	The custom toolbar definition.	`markup`
`Editor`	The editor content.	`markup`
`ReadOnly`	Editor read-only flag.	`bool`	`false`
`Theme`	The editor theme.	`RichTextEditTheme`	`Snow`
`PlaceHolder`	Placeholder text for empty editor.	`string`
`ToolbarPosition`	Toolbar position (top or bottom).	`Placement`	`Top`
`SubmitOnEnter`	Call EnterPressed event when pressing ENTER key.	`bool`	`false`
`ConfigureQuillJSMethod`	The JavaScript method to call to configure additional QuillJS modules and or add custom bindings.	`string`

RichTextEditToolbarGroup

Name	Description	Type	Default
`Float`	The float position on the toolbar.	`float`
`ChildContent`	The group content.	`markup`

RichTextEditToolbarButton

Name	Description	Type
`Action`	The QuillJS action associated with the select.	`RichTextEditAction?`
`Value`	The QuillJS action selected value.	`string`
`ChildContent`	The custom markup/text to display.	`markup`

RichTextEditToolbarSelect

Name	Description	Type	Default
`Action`	The QuillJS action associated with the select.	`RichTextEditAction?`
`ChildContent`	The RichTextEditToolbarSelectItem items.	`markup`

RichTextEditToolbarSelectItem

Name	Description	Type	Default
`Value`	The QuillJS action selected value.	`string`
`Selected`	Is the select item selected.	`bool`	`false`
`ChildContent`	The custom markup/text to display.	`markup`