Spillgebees.Blazor.RichTextEditor 1.3.0

dotnet add package Spillgebees.Blazor.RichTextEditor --version 1.3.0                
NuGet\Install-Package Spillgebees.Blazor.RichTextEditor -Version 1.3.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Spillgebees.Blazor.RichTextEditor" Version="1.3.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Spillgebees.Blazor.RichTextEditor --version 1.3.0                
#r "nuget: Spillgebees.Blazor.RichTextEditor, 1.3.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Spillgebees.Blazor.RichTextEditor as a Cake Addin
#addin nuget:?package=Spillgebees.Blazor.RichTextEditor&version=1.3.0

// Install Spillgebees.Blazor.RichTextEditor as a Cake Tool
#tool nuget:?package=Spillgebees.Blazor.RichTextEditor&version=1.3.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:

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: net7.0, net8.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:

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

PassiveRichTextEditor example:

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

<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>
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.3.0 172 4/11/2024
1.2.4 209 1/8/2024
1.2.3 154 12/29/2023
1.2.2 152 12/22/2023
1.2.1 125 12/22/2023
1.2.0 124 12/22/2023
1.1.0 139 12/21/2023
1.0.0 151 12/19/2023
0.0.0-alpha.0 75 12/19/2023