Changes: @changeCount

@bindingHtml

``` ```csharp private string? bindingHtml = "

The bound value is just a string you own.

"; private int changeCount; ``` \n**Toolbar**: ```razor ``` ```csharp private string? toolbarHtml = "

Every group

Scroll the page while this editor is in view: the toolbar stays pinned to the top.

Try the table, emoji and find buttons
Toggle full screen

"; ``` \n**Custom toolbar**: ```razor ``` ```csharp private string? customHtml = "

The inline group comes first, 'Today' inserts the date and 'Callout' toggles a quote.

"; private readonly BitRichTextEditorToolbarConfig customConfig = new() { Order = [BitRichTextEditorToolbarConfig.GroupIds.Inline, "insert-date", "callout"], CustomItems = [ new() { Id = "insert-date", Label = "Today", AriaLabel = "Insert today's date", OnActivate = editor => editor.InsertTextAsync(DateTime.Now.ToString("yyyy-MM-dd")) }, new() { Id = "callout", Label = "Callout", IsActive = state => state.Block == "blockquote", OnActivate = editor => editor.ExecuteCommandAsync("formatBlock", editor.SelectionState.Block == "blockquote" ? "p" : "blockquote") } ] }; ``` \n**Read-only & disabled**: ```razor ``` \n**Links**: ```razor @if (linkError is not null) { @linkError } ``` ```csharp private string? linkHtml = "

Read the Blazor docs to learn more.

"; private string? linkError; private void HandleLinkHtmlChanged(string? value) { linkHtml = value; // A successful content update means the previous error no longer applies. linkError = null; } ``` \n**Images**: ```razor @if (lastUpload is not null) {

Last upload: @lastUpload

} ``` ```csharp private string? imageHtml = "

Images can sit inline with text.

"; private string? lastUpload; private async Task HandleImageUpload(BitRichTextEditorImageUpload image) { lastUpload = $"{image.FileName} ({image.ContentType}, {image.Content.Length:N0} bytes)"; // Upload the bytes to your storage here and return the public URL (or null to cancel); // the delay stands in for that round trip, while the editor shows it is uploading. await Task.Delay(1500); return $"data:{image.ContentType};base64,{Convert.ToBase64String(image.Content)}"; } ``` \n**Colors & fonts**: ```razor ``` ```csharp private string? colorHtml = "

Make words colorful or highlighted, then pick a typeface.

"; private readonly string[] fonts = ["Segoe UI", "Georgia", "Courier New", "Comic Sans MS"]; private readonly string[] sizes = ["12px", "16px", "20px", "28px"]; private readonly BitRichTextEditorColor[] palette = [ new("#1f2937", "Ink"), new("#5b3df5", "Brand violet"), new("#2563eb", "Blue"), new("#059669", "Green"), new("#d97706", "Amber"), new("#dc2626", "Red"), new("#fff3a3", "Soft yellow"), new("#dbeafe", "Soft blue"), ]; ``` \n**Tables**: ```razor ``` \n**Media & rules**: ```razor ``` \n**Find & replace**: ```razor ``` \n**Sanitization & paste**: ```razor ``` ```csharp private string? sanitizationHtml = "

Only allowlisted tags, attributes and URI schemes survive.

"; private string? plainPasteHtml; private readonly BitRichTextEditorSanitizationPolicy sanitizationPolicy = new() { AllowedTags = new HashSet(StringComparer.OrdinalIgnoreCase) { "p", "br", "strong", "em", "a", "ul", "ol", "li" }, AllowedAttributes = new Dictionary>(StringComparer.OrdinalIgnoreCase) { ["*"] = new HashSet(StringComparer.OrdinalIgnoreCase) { "class" }, ["a"] = new HashSet(StringComparer.OrdinalIgnoreCase) { "href", "title" }, }, AllowedUriSchemes = new HashSet(StringComparer.OrdinalIgnoreCase) { "http", "https", "mailto" }, AllowDataImageUris = false, }; ``` \n**Typing aids**: ```razor ``` \n**Keyboard shortcuts**: ```razor ``` ```csharp private string? shortcutHtml = "

Press Ctrl/Cmd+Shift+S, Ctrl/Cmd+Shift+L or Ctrl/Cmd+Shift+1, and Alt+0 to list them all.

"; private readonly Dictionary shortcuts = new() { ["ctrl+shift+s"] = "strikeThrough", ["ctrl+shift+l"] = "insertUnorderedList", ["ctrl+shift+1"] = "h1", }; ``` \n**Selection toolbar**: ```razor ``` \n**Mentions**: ```razor @if (lastMention is not null) {

Last mention: @lastMention

} ``` ```csharp private string? mentionHtml = "

Type @ to bring up the people picker.

"; private string? lastMention; private static readonly BitRichTextEditorMention[] people = [ new("1", "Ada Lovelace", "Analytical engine"), new("2", "Alan Turing", "Computing machinery"), new("3", "Grace Hopper", "Compilers"), new("4", "Katherine Johnson", "Orbital mechanics"), new("5", "Margaret Hamilton", "Flight software"), ]; private Task> SearchMentions(string term) { IReadOnlyList matches = string.IsNullOrWhiteSpace(term) ? people : people.Where(p => p.Display.Contains(term, StringComparison.OrdinalIgnoreCase)).ToArray(); return Task.FromResult(matches); } ``` \n**Forms & validation**: ```razor Submit @if (formSubmitted) { Submitted successfully! } Save comment ``` ```csharp private readonly FormModel formModel = new(); private bool formSubmitted; private void HandleValidSubmit() { formSubmitted = true; } public class FormModel : IValidatableObject { [Required(ErrorMessage = "The description is required.")] public string? Body { get; set; } public IEnumerable Validate(ValidationContext validationContext) { // The value is HTML, so measure its visible text: markup with no text passes [Required]. var stripped = System.Text.RegularExpressions.Regex.Replace(Body ?? "", "<[^>]+>", ""); var text = System.Net.WebUtility.HtmlDecode(stripped).Trim(); if (string.IsNullOrWhiteSpace(Body) is false && text.Length == 0) { yield return new ValidationResult("The description is required.", [nameof(Body)]); } else if (text.Length > 0 && text.Length < 20) { yield return new ValidationResult("Add a bit more detail (min 20 characters).", [nameof(Body)]); } } } private string? commentHtml = "

Save this to see the server reject it, then edit it to clear the error.

"; private string? commentError; // Stands in for a server round trip that refuses the content. private void SaveComment() => commentError = "The server refused the comment: it reads like spam."; ``` \n**Events**: ```razor

Editor is @focusState; the caret is in: @selectionSummary

``` ```csharp private string? eventsHtml = "

A heading

Some bold text with a link in it.

"; private string focusState = "blurred"; private string selectionSummary = "nothing yet"; private void HandleSelectionChange(BitRichTextEditorSelectionState state) { var parts = new List(); if (string.IsNullOrEmpty(state.Block) is false) parts.Add(state.Block); if (state.Bold) parts.Add("bold"); if (state.Italic) parts.Add("italic"); if (state.InLink) parts.Add("a link"); if (state.InTable) parts.Add("a table cell"); if (state.ImageSelected) parts.Add("an image"); selectionSummary = parts.Count > 0 ? string.Join(", ", parts) : "nothing yet"; } ``` \n**Localization**: ```razor ``` ```csharp private string? localizedHtml = "

Pase el cursor sobre los botones para ver las descripciones traducidas.

"; private readonly SpanishEditorLocalizer localizer = new(); // Only the keys present here are translated; every other key keeps the built-in English text. public class SpanishEditorLocalizer : IBitRichTextEditorLocalizer { private static readonly Dictionary Labels = new() { ["toolbar"] = "Formato", ["editor"] = "Editor de texto enriquecido", ["undo"] = "Deshacer (Ctrl+Z)", ["undo-label"] = "Deshacer", ["redo"] = "Rehacer (Ctrl+Y)", ["redo-label"] = "Rehacer", ["bold"] = "Negrita (Ctrl+B)", ["bold-label"] = "Negrita", ["italic"] = "Cursiva (Ctrl+I)", ["italic-label"] = "Cursiva", ["underline"] = "Subrayado (Ctrl+U)", ["underline-label"] = "Subrayado", ["strikethrough"] = "Tachado", ["paragraph-format"] = "Formato de párrafo", ["block-normal"] = "Normal", ["heading-1"] = "Título 1", ["heading-2"] = "Título 2", ["heading-3"] = "Título 3", ["bullet-list"] = "Lista con viñetas", ["numbered-list"] = "Lista numerada", ["task-list"] = "Lista de tareas", ["quote"] = "Cita", ["code-block"] = "Bloque de código", ["link"] = "Insertar o editar enlace", ["link-label"] = "Insertar o editar enlace", ["find-replace"] = "Buscar y reemplazar", ["find-replace-label"] = "Buscar y reemplazar", ["find"] = "Buscar", ["replace"] = "Reemplazar", ["no-matches"] = "Sin coincidencias", ["clear-formatting"] = "Borrar formato", }; public string? this[string key] => Labels.TryGetValue(key, out var value) ? value : null; } ``` \n**Imperative API**: ```razor FocusAsync ExecuteCommand("bold") InsertTextAsync InsertHtmlAsync SelectAllAsync UndoAsync GetHtmlAsync GetTextAsync GetSelectedTextAsync Counts ClearAsync

Result:

@apiResult

``` ```csharp private BitRichTextEditor apiEditor = default!; private string? apiHtml = "

Drive me from the buttons above.

"; private string? apiResult; private async Task FocusEditor() => await apiEditor.FocusAsync(); private async Task GetEditorHtml() => apiResult = await apiEditor.GetHtmlAsync(); private async Task GetEditorText() => apiResult = await apiEditor.GetTextAsync(); private async Task GetEditorSelection() => apiResult = await apiEditor.GetSelectedTextAsync(); private void ShowEditorFacts() => apiResult = $"{apiEditor.WordCount} words, {apiEditor.CharacterCount} chars, empty: {apiEditor.IsEmpty}"; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitRichTextEditorParams[] richTextEditorParams = [ new() { Height = "6rem", ShowCount = true, StickyToolbar = true, Toolbar = BitRichTextEditorToolbar.Inline | BitRichTextEditorToolbar.Lists | BitRichTextEditorToolbar.Link, Placeholder = "Defaults come from BitParams...", } ]; ``` \n**Style & Class**: ```razor ``` ```csharp private string? cssVariablesHtml = "

Restyled with the public CSS variables: no class needed.

Even the quote rule.

"; private const string cssVariablesStyle = "--bit-RichTextEditor-border-radius:1rem;" + "--bit-RichTextEditor-border-color:var(--bit-clr-pri);" + "--bit-RichTextEditor-toolbar-background:color-mix(in srgb, var(--bit-clr-pri) 12%, transparent);" + "--bit-RichTextEditor-footer-background:color-mix(in srgb, var(--bit-clr-pri) 12%, transparent);" + "--bit-RichTextEditor-button-radius:999px;" + "--bit-RichTextEditor-quote-border-color:var(--bit-clr-pri);" + "--bit-RichTextEditor-font-family:Georgia, serif;" + "--bit-RichTextEditor-line-height:1.8;"; ``` \n**RTL**: ```razor ``` ```csharp private string? rtlHtml = "

این ویرایشگر از راست به چپ چیده شده است.

And this block is left-to-right.

"; ```