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

API

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