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. 
dotnet add 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 TypeDefault
UseSnowTheme Load the QuillJS snow theme related resources. booltrue
UseBubbleTheme Load the QuillJS bubble theme related resources. boolfalse
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. boolfalse
QuillJSVersion The QuillJS version to load. string2.0.0
DynamicLoadReferences Load the RichTextEdit scripts and stylesheets on demand. booltrue

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. 

<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 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:

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. 
<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;
            }
        }
    }
*@

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.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page