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
<PackageReference Include="Spillgebees.Blazor.RichTextEditor" Version="1.3.0" />
paket add Spillgebees.Blazor.RichTextEditor --version 1.3.0
#r "nuget: Spillgebees.Blazor.RichTextEditor, 1.3.0"
// 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:
- chrissainty's
Blazored.TextEditor
, the original implementation. - vixys' fork of
Blazored.TextEditor
, mainly theOnTextChanged
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: 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 | Versions 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. |
-
net7.0
- BlazorComponentUtilities (>= 1.8.0)
- Microsoft.AspNetCore.Components.Web (>= 7.0.14)
-
net8.0
- BlazorComponentUtilities (>= 1.8.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.