Stilo.Editor 1.0.1

Stilo.Editor

A full-featured, Microsoft Word–style WYSIWYG editor for Blazor. Ribbon toolbar, page layout view, DOCX/PDF/Markdown import & export, spell checking, and dozens of insertable content types — all in pure C#/Blazor, no JavaScript framework dependency, no native binaries.

Works in Blazor Server and Blazor WebAssembly.

Installation

dotnet add package Stilo.Editor

Stilo.Editor depends on Stilo.Documents (document conversion engine) and Stilo.Maestro (spell checker) — both are pulled in automatically as package dependencies.

Quick start

1. Register services

// Program.cs
builder.Services.AddStiloEditor();
builder.Services.AddStiloMaestro(); // required for the spell-check ribbon group to appear

2. Drop the component on a page

@page "/editor"
@using Stilo.Editor.Components

<StiloEditor @bind-Value="_html" Options="_options" />

@code {
    private string _html = "<p>Start writing...</p>";

    private EditorOptions _options = new()
    {
        MinHeight = 500,
        MaxHeight = 800,
        ShowStatusBar = true,
        ShowSourceMode = true,
    };
}

That's it — no <link> or <script> tags to add anywhere. StiloEditor is fully self-contained: its CSS and JavaScript are embedded resources that the component injects into the page itself at runtime (minified, scoped, and cleaned up on dispose). You don't need a <HeadOutlet>, a static-assets base path, or any manual wiring — just register the services and use the component.

Integrating open/save and PDF/DOCX conversion

The editor never touches the filesystem or a server API by itself — it raises events and lets the host decide what "Save", "Export", and "Open" mean (download a file, call your API, write to disk, etc.). To enable the DOCX/PDF import and export buttons, inject the converters from Stilo.Documents and pass them to the component; without them, the corresponding ribbon actions stay disabled.

@using Stilo.Editor.Components
@using Stilo.Editor.Models
@using Stilo.Documents.Converters
@inject IDocxToHtmlConverter DocxToHtml
@inject IHtmlToDocxConverter HtmlToDocx
@inject IHtmlToPdfConverter HtmlToPdf
@inject IPdfToHtmlConverter PdfToHtml
@inject IJSRuntime JS

<StiloEditor @bind-Value="_html"
             Options="_options"
             PreferredSaveFormat="SaveFormat.Docx"
             DocxConverter="DocxToHtml"
             HtmlToDocxConverter="HtmlToDocx"
             HtmlToPdfConverter="HtmlToPdf"
             PdfConverter="PdfToHtml"
             OnSave="HandleSaveAsync"
             OnExportPdf="HandleExportPdfAsync"
             OnExportDocx="HandleExportDocxAsync"
             OnOpenDocxFile="HandleOpenDocxAsync"
             OnOpenPdfFile="HandleOpenPdfAsync" />

@code {
    private string _html = "<p>Start writing...</p>";
    private EditorOptions _options = new();

    private async Task HandleSaveAsync(StiloSaveArgs args)
    {
        // args.Format is Html, Docx or Pdf; args.HtmlContent is the current editor content.
        // Persist it however your app needs to (API call, browser download, ...).
    }

    private async Task HandleExportPdfAsync(StiloExportArgs args) { /* args.HtmlContent, args.Format == ExportFormat.Pdf */ }
    private async Task HandleExportDocxAsync(StiloExportArgs args) { /* args.Format == ExportFormat.Docx */ }

    private async Task HandleOpenDocxAsync(IBrowserFile file) { /* read file.OpenReadStream(), convert with DocxConverter, assign result to _html */ }
    private async Task HandleOpenPdfAsync(IBrowserFile file) { /* same idea, via PdfConverter */ }
}

Register the Stilo.Documents converter implementations in DI as you would normally do for that package (see the Stilo.Documents documentation) — StiloEditor only needs an instance of each interface it uses; you can inject them from DI as shown above, or construct/pass them explicitly.

Features

Ribbon — Home tab

• Clipboard: Undo, Redo, Cut, Copy, Paste.
• Style/Font: paragraph & heading (H1–H6) / blockquote / code format-block picker, style presets, font family and font size selectors (fully configurable via EditorOptions.FontFamilies/FontSizes), Bold, Italic, Underline, Strikethrough, Subscript, Superscript, text/background color pickers, remove formatting, per-selection text direction (LTR/RTL).
• Paragraph: bullet and numbered lists, indent/outdent, align left/center/right/justify, horizontal rule, whole-document text direction toggle.
• Insert: hyperlinks, images (upload or URL, with live preview), tables (visual grid picker with style presets), emoji picker, special-characters picker, iframe embeds, a reusable document-templates gallery, barcode/QR code generator (see below), raw HTML embed (with live preview), Find & Replace, code snippets, LaTeX formulas, bookmarks, page breaks.
• Page: portrait/landscape orientation, paper format picker.
• View: zoom (25%–200%), pages mode (A4 sheet view with millimeter rulers), toggle formatting marks, print preview, fullscreen, dark mode, minimap.
• Spell check (only shown once Stilo.Maestro is registered and its dictionaries have loaded): enable/disable, dictionary language selector, inline suggestion popup with "ignore" and "add to personal dictionary" actions.
• Restricted editing: lock/unlock the current selection, toggle visibility of locked regions — useful for template documents where only certain areas should be editable.

Barcode / QR code generator

Insert a barcode or QR code as a regular image, generated on the fly (no external service): choose a symbology, type the value, and insert. Backed by Stilo.Documents.Bars — supported symbologies at the time of writing are QR Code, Code128, EAN-13, and Code39 (Stilo.Documents.Bars.BarcodeImageWriter.SupportedTypes).

Contextual object toolbar

Selecting an image or a table cell surfaces a floating toolbar:

• Image: positioning (inline/left/right float), quick resize presets, filters (grayscale, sepia, brightness, contrast, background removal, rotate, flip), alt text, caption, replace source, link.
• Table: insert/delete row or column, merge/split cells, delete table, cell background color, borders, table alignment.

Source & Markdown modes

• HTML source mode (EditorOptions.ShowSourceMode): switch to a raw HTML editor and apply changes back to the visual view.
• Markdown mode: always available, independent of ShowSourceMode — edit the document as Markdown and apply it back.

Status bar (EditorOptions.ShowStatusBar)

Current format block, font name/size, paper format, orientation, zoom level, live word count, optional autosave status (see AutoSaveCallback), an accessibility/keyboard-shortcuts panel, and a UI language selector.

Accessibility & internationalization

Keyboard-shortcut reference dialog, and a built-in UI language switcher (the ribbon, dialogs and status bar are localized — see Locales/*.pkl in the package for the shipped languages).

StiloEditor component parameters

EditorOptions properties

Note: "Pages mode" (A4 view with rulers) is a ribbon toggle the user controls interactively — there is no EditorOptions property to force it on programmatically.

Spell checking

Spell checking is provided by the companion Stilo.Maestro package. Register it alongside Stilo.Editor:

builder.Services.AddStiloEditor();
builder.Services.AddStiloMaestro();

The spell-check ribbon group only appears once Stilo.Maestro's dictionaries have finished loading. The editor initializes it with Italian ("it") as the startup dictionary; users can switch language from the ribbon at any time.

Dependencies

• Stilo.Maestro — spell checking engine and dictionaries.
• Stilo.Documents — DOCX/PDF/Markdown conversion engine (only used if you wire up the converter parameters above).
• Microsoft.AspNetCore.Components.Web 9.x.

License

Proprietary — commercial use requires written authorization from Francesco Paolo Passaro — info@digitalsolutions.it