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 => { ... } );

Configuration 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
QuillJSVersion The QuillJS version to load. string 1.3.7
DynamicLoadReferences Load the RichTextEdit scripts and stylesheets on demand. bool true

Basic example

<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();
    }
}

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

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
ContentChanged Occurs when the content changes. EventCallback
EnterPressed Occurs when ENTER key is pressed and SubmitOnEnter. EventCallback
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 Default
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