Blazor Bootstrap Demos & Examples | Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks

Start with the complete toolbar when authors need the full RichTextEditor feature set in one place. Keep Disabled set to false so every toolbar action remains available, from document styles and text formatting through media, tables, history, printing, and fullscreen mode.

How to use:

Add RichTextEditor to the page and provide an initial Value.
Omit ToolbarItems to render every supported toolbar control.
Keep Disabled set to false, then use toolbar actions to build a complete document.

Sample rich text content

<div class="mb-3">
    <RichTextEditor Value="<p>Sample rich text content</p>"
                    Placeholder="Select text, then use the toolbar command." />
</div>

Article draft #

Use a focused authoring toolbar to turn a rough release-note draft into structured, scannable content. While Disabled is false, each toolbar action can apply headings, emphasis, color, alignment, lists, and quotations.

How to use:

Choose the commands that match the authoring workflow in ToolbarItems.
Place the caret in a paragraph or select text in the draft.
Use each toolbar action needed for a heading, emphasis, list, alignment, or quotation as the document takes shape.

June release notes

This draft needs a clear structure before it is published.

Highlight the most important update, then organize the remaining details for readers.

Improved editor workflow
Updated content guidance

<div class="mb-3">
    <RichTextEditor Value="@content"
                    ToolbarItems="@toolbarItems"
                    Placeholder="Draft the release notes." />
</div>

@code {
    private string content = "<h2>June release notes</h2><p>This draft needs a clear structure before it is published.</p><p>Highlight the most important update, then organize the remaining details for readers.</p><ul><li>Improved editor workflow</li><li>Updated content guidance</li></ul>";

    private readonly RichTextEditorToolbarItem[] toolbarItems =
    {
        RichTextEditorToolbarItem.Heading2,
        RichTextEditorToolbarItem.Bold,
        RichTextEditorToolbarItem.Italic,
        RichTextEditorToolbarItem.TextColor,
        RichTextEditorToolbarItem.AlignLeft,
        RichTextEditorToolbarItem.AlignCenter,
        RichTextEditorToolbarItem.OrderedList,
        RichTextEditorToolbarItem.UnorderedList,
        RichTextEditorToolbarItem.Blockquote
    };
}

Publish rich update #

Give a publishing workflow only the insertion commands it needs to add a link, image, separator, or table to an already-authored announcement. This example does not configure ImageUploadHandler, so its Image dialog intentionally shows only the Image URL tab. Keep Disabled set to false while authors use each toolbar action.

How to use:

Configure the insertion-focused commands in ToolbarItems.
Place the caret where the new content belongs in the announcement.
Use the link, image, horizontal-rule, or table toolbar action and complete its dialog when prompted.

Service update

We have published the latest service update. Add the supporting link, image, or availability table before sharing it.

<div class="mb-3">
    <RichTextEditor Value="@content"
                    ToolbarItems="@toolbarItems"
                    Placeholder="Publish the announcement." />
</div>

@code {
    private string content = "<h2>Service update</h2><p>We have published the latest service update. Add the supporting link, image, or availability table before sharing it.</p>";

    private readonly RichTextEditorToolbarItem[] toolbarItems =
    {
        RichTextEditorToolbarItem.Link,
        RichTextEditorToolbarItem.Image,
        RichTextEditorToolbarItem.HorizontalRule,
        RichTextEditorToolbarItem.Table,
        RichTextEditorToolbarItem.Fullscreen
    };
}

Host-controlled image upload #

Configure ImageUploadHandler in the host application instead of configuring a browser endpoint. The Upload image tab is conditional: editors without this callback intentionally show only Image URL. This shared demo supplies the callback, accepts JPEG, PNG, WebP, and GIF files up to 5 MB, returns a trusted temporary HTTPS preview URL, and exposes callback counts so rejected files can be distinguished from host-handler failures. The selectable outcomes also demonstrate cancellation and domain policy rejection.

How to use:

Set ImageUploadHandler, the allowed raster types, size limit, and optional HTTPS domain allow-list.
Open the Image dialog, choose Upload image, and select a valid local raster image.
Review the preview and accessibility options before insertion; use the simulated outcomes to observe host failure, cancellation, and URL-policy feedback.

Choose the image command, then use the host-controlled upload flow.

Simulated host outcome

This editor shows Upload image because it supplies ImageUploadHandler; editors without that callback show only Image URL. Invalid, too-large, or unsupported files are rejected before this callback is invoked.

Host callback invocations: 0
No host callback has been invoked yet.

<div class="mb-3">
    <RichTextEditor Value="@content"
                    ToolbarItems="@toolbarItems"
                    ImageUploadHandler="UploadImageAsync"
                    AllowedImageDomains="@allowedImageDomains"
                    AllowedImageFileTypes="@allowedImageFileTypes"
                    MaxImageFileSize="@maxImageFileSize"
                    Placeholder="Add a hosted image to the announcement." />
</div>

<div class="border rounded p-3">
    <label class="form-label" for="image-upload-handler-outcome">Simulated host outcome</label>
    <select id="image-upload-handler-outcome" class="form-select" @bind="selectedOutcome">
        <option value="success">Return a trusted HTTPS preview URL</option>
        <option value="failure">Throw a host-handler failure</option>
        <option value="cancellation">Wait for cancellation</option>
        <option value="off-policy-url">Return an HTTPS URL outside the allow-list</option>
    </select>
    <div class="form-text">This editor shows <strong>Upload image</strong> because it supplies <code>ImageUploadHandler</code>; editors without that callback show only <strong>Image URL</strong>. Invalid, too-large, or unsupported files are rejected before this callback is invoked.</div>
    <div class="alert alert-secondary mt-3 mb-0" role="status">
        <strong>Host callback invocations:</strong> @callbackCount<br />
        @hostStatus
    </div>
</div>

@code {
    private const long maxImageFileSize = 5 * 1024 * 1024;
    private const string successImageUrl = "https://placehold.co/800x450/png?text=Hosted+image";

    private readonly string[] allowedImageDomains = { "placehold.co" };
    private readonly string[] allowedImageFileTypes = { "jpg", "jpeg", "png", "webp", "gif" };
    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Image };

    private int callbackCount;
    private string content = "<p>Choose the image command, then use the host-controlled upload flow.</p>";
    private string hostStatus = "No host callback has been invoked yet.";
    private string selectedOutcome = "success";

    private async Task<RichTextEditorImageUploadResult?> UploadImageAsync(RichTextEditorImageUploadRequest request)
    {
        callbackCount++;
        hostStatus = $"The host received {request.File.Name}. It must authorize, revalidate, scan, and store the upload before returning a temporary HTTPS URL.";
        await InvokeAsync(StateHasChanged);

        request.CancellationToken.ThrowIfCancellationRequested();

        switch (selectedOutcome)
        {
            case "failure":
                throw new InvalidOperationException("Simulated host upload failure.");
            case "cancellation":
                hostStatus = "The host callback is waiting. Close the Image modal or select another file to cancel it.";
                await InvokeAsync(StateHasChanged);
                await Task.Delay(Timeout.InfiniteTimeSpan, request.CancellationToken);
                return null;
            case "off-policy-url":
                return new RichTextEditorImageUploadResult("https://example.com/untrusted-image.png");
            default:
                return new RichTextEditorImageUploadResult(successImageUrl);
        }
    }
}

Disabled #

Use Disabled when rich text should remain visible for review. Editing is disabled: users cannot change the content or invoke a toolbar action.

How to use:

Provide the rich text through Value.
Set Disabled to true when editing is disabled.
Keep the visible content as context; hovering the inactive toolbar explains that editing is disabled, and no toolbar action is available.

This approved announcement is available for review but cannot be changed.

<div class="mb-3">
    <RichTextEditor Value="<p>This approved announcement is available for review but cannot be changed.</p>"
                    Disabled="true"
                    Placeholder="This editor is disabled." />
</div>

Form validation #

Use ValueExpression inside an EditForm to validate the editor's plain-text content while retaining its HTML separately for submission. Keep Disabled set to false while users edit content and use a toolbar action.

How to use:

Add DataAnnotationsValidator and a ValidationMessage for the model property.
Set ValueExpression to the validated model property and update that property from ValueChanged.
Keep editing enabled, then delete the editor content and submit to see required validation feedback before entering content and submitting again.

Review this announcement, then submit the form.

@using System.ComponentModel.DataAnnotations

<EditForm Model="@draft" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="mb-3">
        <RichTextEditor Value="@editorInitialHtml"
                        ValueExpression="@(() => draft.Content)"
                        ValueChanged="OnValueChanged"
                        Placeholder="Enter the required announcement content." />
        <ValidationMessage For="@(() => draft.Content)" />
    </div>

    <Button Type="ButtonType.Submit" Color="ButtonColor.Primary">Submit announcement</Button>

    @if (submitted)
    {
        <div class="alert alert-success mt-3 mb-0" role="status">The announcement passed validation.</div>
    }
</EditForm>

@code {
    private const string editorInitialHtml = "<p>Review this announcement, then submit the form.</p>";

    private readonly AnnouncementDraft draft = new()
    {
        Content = "Review this announcement, then submit the form.",
        Html = editorInitialHtml
    };

    private bool submitted;

    private void HandleValidSubmit() => submitted = true;

    private Task OnValueChanged(RichTextEditorChange change)
    {
        draft.Content = change.Text;
        draft.Html = change.Html;
        submitted = false;
        return Task.CompletedTask;
    }

    private sealed class AnnouncementDraft
    {
        [Required(ErrorMessage = "Announcement content is required.")]
        public string Content { get; set; } = string.Empty;

        public string Html { get; set; } = string.Empty;
    }
}

Events #

Use ValueChanged to react to committed content and show its text metrics in surrounding UI. Keep Disabled set to false while observing edits and toolbar actions. This typing-focused example deliberately reports the callback without assigning its HTML back to the editor value.

How to use:

Handle ValueChanged to receive sanitized HTML, plain text, and count metrics after an edit is committed.
Update external UI such as metrics or a save indicator without writing the callback HTML back into the active editor value.
Edit the text or use a toolbar action, then observe the committed word and character counts.

Change this project update and pause briefly to commit the editor value.

Last committed change

No committed change yet.

Committed HTML preview

Change this project update and pause briefly to commit the editor value.

<RichTextEditor Value="@editorInitialContent"
                ToolbarItems="@toolbarItems"
                ValueChanged="OnValueChanged"
                Placeholder="Edit the draft to see callback results." />

<div class="border rounded p-3 mb-3">
    <strong>Last committed change</strong>
    <p class="mb-0">@lastChange</p>
</div>

<div class="border rounded p-3">
    <strong>Committed HTML preview</strong>
    <div class="mb-0">@(new MarkupString(content))</div>
</div>

@code {
    private readonly RichTextEditorToolbarItem[] toolbarItems =
    {
        RichTextEditorToolbarItem.Bold,
        RichTextEditorToolbarItem.Italic,
        RichTextEditorToolbarItem.Link,
        RichTextEditorToolbarItem.OrderedList,
        RichTextEditorToolbarItem.UnorderedList
    };

    private const string editorInitialContent =
        "<p>Change this project update and pause briefly to commit the editor value.</p>";

    private string content = editorInitialContent;
    private string lastChange = "No committed change yet.";

    private Task OnValueChanged(RichTextEditorChange change)
    {
        content = change.Html; // Updates the external preview only.
        lastChange = $"Committed {change.WordCount} words and {change.CharacterCount} characters.";
        return Task.CompletedTask;
    }
}

Blazor RichTextEditor

Article draft #

June release notes

Publish rich update #

Service update

Host-controlled image upload #

Disabled #

Form validation #

Events #

Links

Guides

Community

Other Libraries

Blazor RichTextEditor

Full toolbar #

Insert table

Table actions

Table appearance

Article draft #

Insert table

Table actions

Table appearance

June release notes

Publish rich update #

Insert table

Table actions

Table appearance

Service update

Host-controlled image upload #

Insert table

Table actions

Table appearance

Disabled #

Insert table

Table actions

Table appearance

Form validation #

Insert table

Table actions

Table appearance

Events #

Insert table

Table actions

Table appearance

Links

Guides

Community

Other Libraries