BlazorQuillEditor 0.1.8

BlazorQuillEditor

A reusable Quill.js rich-text editor component for Blazor Server and WebAssembly applications, with optional secure image upload support.

✨ Features

• Rich text editing with full Quill toolbar
• Image upload support with automatic server-side handling
• Secure uploads with optional role-based policy enforcement
• Easy integration and configuration

🚀 Getting Started

1. Install the NuGet Package

   dotnet add package BlazorQuillEditor

2. Register the Upload Endpoint (in Program.cs)

   using BiffLabs.Packages.BlazorQuillEditor.Configuration; using BiffLabs.Packages.BlazorQuillEditor.Endpoints;

   builder.Services.Configure<QuillEditorOptions>(options ⇒ { options.UploadRoute = "/upload-image"; // Optional override options.AuthorizationPolicy = "AdminOnly"; // Optional, default: any authenticated user });

   app.UseAuthentication(); app.UseAuthorization();

   app.MapQuillImageUploadEndpoint();

3. Use the Component in a Razor Page

   <QuillEditor @ref="editorRef" Content="@Content" ContentChanged="@OnContentChanged" ToolbarOptions="@FullToolbar" EnableImageUpload="true" ImageUploadUrl="/upload-image" />

4. app.razor

Within the Head <link href="_content/BlazorQuillEditor/css/quill.snow.css" rel="stylesheet" />

At end of Body <script src="_content/BlazorQuillEditor/js/quill.js"></script> <script src="_content/BlazorQuillEditor/js/quillInterop.js"></script>

Within Page or Component

                    <QuillEditor @ref="editorRef"
                                 Content="@_newArtefact.Content"
                                 ToolbarOptions="@FullToolbar"
                                 EnableImageUpload="true"
                                 ImageUploadUrl="/uploads" />

@code{ private QuillEditor? editorRef;

private object[] FullToolbar => new object[]
{
    new[] { "bold", "italic", "underline", "strike" },
    new[] { "blockquote", "code-block" },
    new object[] { new { header = new object[] { 1, 2, 3, 4, false } } },
    new object[] { new { list = "ordered" }, new { list = "bullet" } },
    new object[] { new { script = "sub" }, new { script = "super" } },
    new object[] { new { indent = "-1" }, new { indent = "+1" } },
    new object[] { new { direction = "rtl" } },
    new object[] { new { color = new string[] { } }, new { background = new string[] { } } },
    new object[] { new { font = new string[] { } } },
    new object[] { new { align = new string[] { } } },
    new[] { "link", "image", "video" },
    new[] { "clean" }
};

} 🛡️ Security

The upload endpoint is protected by ASP.NET Core's RequireAuthorization():

• Defaults to authenticated users only
• Optional policy enforcement (e.g., "AdminOnly")
• You must call UseAuthentication() and UseAuthorization() in your app

📂 Saved Files

Uploaded images are saved to:
wwwroot/uploads/

Returned as public URLs:
/uploads/{filename}

📄 Example Policy (Optional)

builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("AdminOnly", policy =>
        policy.RequireRole("Admin"));
});

📦 Configuration via DI (QuillEditorOptions)

📜 License

MIT © Phil Larner (https://github.com/Billybiff)