Tizzani.MudBlazor.HtmlEditor
2.2.1
dotnet add package Tizzani.MudBlazor.HtmlEditor --version 2.2.1
NuGet\Install-Package Tizzani.MudBlazor.HtmlEditor -Version 2.2.1
<PackageReference Include="Tizzani.MudBlazor.HtmlEditor" Version="2.2.1" />
paket add Tizzani.MudBlazor.HtmlEditor --version 2.2.1
#r "nuget: Tizzani.MudBlazor.HtmlEditor, 2.2.1"
// Install Tizzani.MudBlazor.HtmlEditor as a Cake Addin #addin nuget:?package=Tizzani.MudBlazor.HtmlEditor&version=2.2.1 // Install Tizzani.MudBlazor.HtmlEditor as a Cake Tool #tool nuget:?package=Tizzani.MudBlazor.HtmlEditor&version=2.2.1
<h1 align="center">Tizzani.MudBlazor.HtmlEditor</h1>
<p align="center"> A customizable HTML editor component for <a href="https://mudblazor.com/">MudBlazor</a>, powered by <a href="https://quilljs.com/">QuillJS</a>.</p>
<p align="center"> <img alt="NuGet Version" src="https://img.shields.io/nuget/v/Tizzani.MudBlazor.HtmlEditor"> <img alt="NuGet Downloads" src="https://img.shields.io/nuget/dt/Tizzani.MudBlazor.HtmlEditor"> <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/erinnmclaughlin/MudBlazor.HtmlEditor"> <img alt="GitHub License" src="https://img.shields.io/github/license/erinnmclaughlin/MudBlazor.HtmlEditor"> </p>
<p align="center"> <strong><small><a href="https://erinnmclaughlin.github.io/MudBlazor.HtmlEditor/">Try out the demo!</a></small></strong> </p>
<br>
Works in dark mode, too!
Installation
Download the latest release from NuGet:
dotnet add package Tizzani.MudBlazor.HtmlEditor
Add references to the required CSS and JS to your main HTML file (e.g. App.razor
, index.html
, or Page.cshtml
depending on your Blazor setup):
<link href="_content/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script src="_content/Tizzani.MudBlazor.HtmlEditor/quill-blot-formatter.min.js"></script>
Finally, add the following to your _Imports.razor
:
@using Tizzani.MudBlazor.HtmlEditor
Configuring Toolbar Options (available since v2.1)
There are several options available for customizing the HTML editor toolbar.
To customize options for a specific editor instance, define a <MudHtmlToolbarOptions>
inside the <MudHtmlEditor>
:
<MudHtmlEditor>
<MudHtmlToolbarOptions InsertImage="false" />
</MudHtmlEditor>
For all available options, see here.
Configuring Default Options
To configure default options for all instances of the HTML editor, you can wrap your razor content with <CascadingMudHtmlToolbarOptions>
.
App.razor or Routes.razor
<CascadingMudHtmlToolbarOptions InsertImage="false">
<Router AppAssembly="@typeof(Program).Assembly">
</Router>
</CascadingMudHtmlToolbarOptions>
Child components will inherit the default options, unless they override them with their own <MudHtmlToolbarOptions>
instance.
Advanced Customization
For more advanced customization, you can define your own toolbar options inside of an individual <MudHtmlEditor>
component:
<MudHtmlEditor>
<span class="ql-formats">
<button class="ql-bold" type="button"></button>
<button class="ql-italic" type="button"></button>
<button class="ql-underline" type="button"></button>
<button class="ql-strike" type="button"></button>
</span>
</MudHtmlEditor>
See the QuillJS documentation for more information on customizing the toolbar.
Migrating from v1.0 to v2.0
- Remove the
services.AddMudBlazorHtmlEditor();
call from yourStartup.cs
orProgram.cs
file. - Remove the
<script src="_content/Tizzani.MudBlazor.HtmlEditor/HtmlEditor.js">
tag from the document body. The required JS is now included by default.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. 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. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.33)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.20)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.8)
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 |
---|---|---|
2.2.1 | 1,792 | 9/9/2024 |
2.2.0 | 102 | 9/9/2024 |
2.1.0 | 2,569 | 5/22/2024 |
2.0.0 | 129 | 5/22/2024 |
1.2.4 | 354 | 4/10/2024 |
1.2.3 | 94 | 4/10/2024 |
1.2.2 | 88 | 4/10/2024 |
1.2.1 | 92 | 4/10/2024 |
1.2.0 | 111 | 4/9/2024 |
1.1.2 | 107 | 4/9/2024 |
1.1.1 | 113 | 4/9/2024 |
1.1.0 | 183 | 1/6/2024 |
1.0.2 | 196 | 11/6/2023 |
1.0.1 | 124 | 11/6/2023 |
1.0.0 | 111 | 11/6/2023 |