Tizzani.MudBlazor.HtmlEditor 2.3.0

Tizzani.MudBlazor.HtmlEditor

A customizable HTML editor component for MudBlazor, powered by QuillJS.

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 your Startup.cs or Program.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.