Tizzani.MudBlazor.HtmlEditor 2.1.0

Tizzani.MudBlazor.HtmlEditor

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

Works in dark mode, too!

Demo

Try out the demo on GitHub Pages!

Download from NuGet

dotnet add package Tizzani.MudBlazor.HtmlEditor

Setup

Add the following 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> 

Then 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.