Spillgebees.Blazor.RichTextEditor 2.0.0

Spillgebees.Blazor.RichTextEditor is a WYSIWYG Blazor component enabling rich text content editing. It is powered by Quill.

This component is based on a mix of the following repos:

• chrissainty's Blazored.TextEditor, the original implementation.
• vixys' fork of Blazored.TextEditor, mainly the OnTextChanged implementation logic.
• somegenericdev's WYSIWYGTextEditor, mainly the more convenient usage/component structure.

Registering the component

This component comes with a JS initializer, as such it is bootstrapped when Blazor launches.

The only thing you need to do is to add Quill's CSS files for styling.

This package comes with a .css file that includes both Quill themes' CSS files for convenience, so you can either add it as an import to your main CSS file:

/* relative to `wwwroot` */
@import "../_content/Spillgebees.Blazor.RichTextEditor/Spillgebees.Blazor.RichTextEditor.lib.module.css";

h1:focus {
    outline: none;
}

...

Or include it in the head tag directly:

<link href="_content/Spillgebees.Blazor.RichTextEditor/Spillgebees.Blazor.RichTextEditor.lib.module.css"
      rel="stylesheet" />

You could also just pass CDN links or your custom CSS using the latter.

Usage

You can take a look at the demo pages for a few general usage examples: net8.0, net9.0

This package comes with two components: RichTextEditor and PassiveRichTextEditor

The only difference between these two is that RichTextEditor will immediately react to changes (i.e. by updating its Content, IsTouched, ... properties), while PassiveRichTextEditor requires you to manually request updates through its public interface. The passive version handles larger content better as it doesn't have to deal with receiving new data via JS until you request it.

RichTextEditor example:

@using Spillgebees.Blazor.RichTextEditor.Components
@using Spillgebees.Blazor.RichTextEditor.Components.Toolbar

<RichTextEditor @bind-Content="@_content"
                @bind-Text="@_text"
                @bind-Selection="@_selection"
                IsTouched="@_isTouched"
                ToolbarOptions="@ToolbarOptions.FullToolbarOptions"
                Theme="@QuillTheme.Snow"
                ... />

PassiveRichTextEditor example:

@using Spillgebees.Blazor.RichTextEditor.Components
@using Spillgebees.Blazor.RichTextEditor.Components.Toolbar

<PassiveRichTextEditor @bind-Content="@_content"
                       ToolbarOptions="ToolbarOptions.FullToolbarOptions"
                       @ref="@_editorReference" />
<button @onclick="@(() => _editorReference?.UpdateContentAsync() ?? Task.CompletedTask)">
    Update content
</button>

Note that in the previous example the displayed content for the user is instant, but the value in @_content won't be updated until requested.

You can completely customize the toolbar:

@using Spillgebees.Blazor.RichTextEditor.Components
@using Spillgebees.Blazor.RichTextEditor.Components.Toolbar
@using Spillgebees.Blazor.RichTextEditor.Components.Toolbar.Controls

<RichTextEditor @bind-Content="@_content"
                ToolbarOptions="@(ToolbarOptions.FullToolbarOptions with { Fonts = new List<string> { "Sans Serif", "RobotoMono" } })">
    <ToolbarContent>
        <div style="float: left;">
            <FontControls />
            <SizeControls />
            <ColorControls />
        </div>
        <div style="float: right;">
            <InsertImageControls />
            <EmbedVideoControls />
        </div>
    </ToolbarContent>
</RichTextEditor>