RichTextEditor

The simplest usage: a single tag gives you a fully functional editor - the default toolbar, a contenteditable surface, undo/redo, and the built-in keyboard shortcuts.

Placeholder is shown while the editor is empty, and is announced as the field's placeholder rather than only drawn. Height sets the minimum height of the editing surface and MaxHeight caps it, so long content scrolls inside the editor instead of growing the page; both accept any CSS length (300px, 20rem, or auto to fit the content). Resizable adds a drag handle on the bottom edge so the reader can pick the height themselves. AutoFocus puts the caret in the editor on load, and SpellCheck (on by default) toggles the browser's own spell checking.

Set ReadOnly to lock editing while keeping the content selectable and copyable - handy for displaying stored content. A read-only editor keeps a tab stop, so its text can still be reached, scrolled and read out from the keyboard. Combine it with ShowToolbar set to false to hide the toolbar entirely and Height set to auto to fit the content. IsEnabled set to false goes further: the editor is dimmed, drops out of the tab order, stops responding to the pointer, and refuses every edit path - typing, pasting, dropping and shortcuts alike.

The content is a plain string you own. @bind-Value keeps it in sync both ways: edits flow out to your field, and programmatic changes (the buttons below) flow back into the editor without disturbing an in-progress caret when the value is unchanged. What flows out is always the sanitized markup, so the bound string can never hold something the editor refused to render - and an editor the user has emptied reports an empty string, not the <br> the browser leaves behind, so a required check or a dirty comparison reads it the way it looks.

Bound value:

<p>The bound value is just a <strong>string</strong> you own.</p>

While typing, change notifications are debounced. Tune the window with DebounceMs (default 200). A larger value raises fewer change events; a smaller value updates the bound value more eagerly. Leaving the editor always flushes the pending notification, so a blur never loses the last keystrokes.

<p>Type and watch the value update after the debounce window.</p>

OnFocus and OnBlur fire when the editing surface gains or loses keyboard focus.

Editor is currently: blurred

The default toolbar covers the everyday essentials: bold, italic, underline, strikethrough and inline code; paragraph, H1-H6, quote and code block; bullet, numbered and task lists; alignment including justify; undo/redo; and clear formatting. Toolbar buttons light up to reflect the formatting at the cursor, and checklist items are toggled by clicking their box.

The extended Indent and Script groups add increase/decrease indent and subscript/superscript. Inside a list, Tab and Shift+Tab indent and outdent too - outside one they keep their normal meaning, so the editor never traps the keyboard.

The Toolbar parameter is a Flags enum. Combine groups with bitwise OR to show only what you need - here just the inline and lists groups.

Use the AllExtended preset to enable every available group, including images, tables, color, fonts, media, direction, source view, find, full screen and more.

Enable the Link group to insert, edit, and remove hyperlinks (Ctrl/Cmd+K opens the panel). With nothing selected you can supply the link text; "New tab" adds target="_blank" together with rel="noopener noreferrer", and opening the panel on an existing link fills in both its URL and whether it opens in a new tab, so editing one never quietly changes the other. A bare host such as example.com is completed to https, and invalid or disallowed URLs raise OnError with a stable code such as invalid-url while the content is left unchanged. Pasting a URL works the way it does everywhere else: dropped onto selected text it links that text, and pasted on its own it arrives as a link.

Insert images by URL - with alternative text for screen readers - or by drag-and-drop and clipboard paste. Provide an OnImageUpload callback to persist the bytes and return a hosted URL, or return null to cancel. Without the callback, images are embedded as inline data URLs. Files are checked for type and size (10 MB) on both sides of the bridge. Click an image to select it: it can then be resized by dragging its handle - with a mouse, a pen or a finger - and floated left, centered, or floated right from the toolbar (clicking the active alignment again puts it back inline). Reopening the image panel while an image is selected edits that image instead of adding one, so its source and its alternative text can be corrected after the fact rather than only at the moment it was inserted.

The Color group adds foreground (text) and background (highlight) color pickers. Each picker shows the color already applied at the cursor, because the active colors are reported back in the selection state. Beside each one is a button that takes that color back off the selection, so removing a color does not mean clearing every other style with it.

The Font group adds family and size selectors that reflect what is applied at the cursor. Provide your own options with FontFamilies and FontSizes, or leave them empty to use the built-in defaults.

The Table group inserts a table of the size you pick, optionally with a header row. Once the cursor is inside one, the structural buttons come alive: insert a row above or below, a column before or after, delete a row, a column or the whole table, toggle the header row, and merge or split cells - all of which keep existing merges intact. Tab and Shift+Tab walk from cell to cell, and a Tab in the last cell appends a row, so a table can be filled in without leaving the keyboard. Column widths are adjusted by dragging a cell border.

The Media group embeds a YouTube or Vimeo link as a privacy-friendly iframe and a direct audio/video URL as a native audio/video element. Embeds are the one place the sanitizer restricts by host as well as by tag: an iframe survives only when its source is an https URL on an approved embed host, so pasted or stored markup cannot smuggle an arbitrary frame in. Every policy is held to that rule - widen it deliberately with AllowedIframeHosts rather than by listing the tag. The Rule group inserts a horizontal divider.

The Source group toggles a raw HTML editor. While it is open the formatting controls are disabled so the two views cannot diverge, and on exit the HTML is validated - unbalanced or misnested markup is refused with an error, while a < that is plainly text ("5 < 10") is left alone - and run through the active sanitization policy before returning to the WYSIWYG surface.

Sanitization is allowlist-based: only the listed tags, attributes, and URI schemes are kept and everything else is stripped on paste, drag-drop, source-view exit, and programmatic changes. A surviving style attribute is filtered further, down to presentational CSS properties, and an iframe is held to the embed hosts of AllowedIframeHosts whatever the tag list says. Tightening the policy at runtime also re-cleans the content already loaded. The browser pass is a first line of defense only - always sanitize the emitted HTML on the server too.

Set PasteAsPlainText to strip all formatting from pasted content and insert it as plain text. Left off, pasted markup is normalized first - the wrappers Word and Google Docs add are removed - and then sanitized, and a single paste can still be stripped on demand with Ctrl/Cmd+Shift+V. Whichever way the content arrives, it is budgeted against MaxLength before it lands.

The Find group adds a search panel that highlights every match and marks the current one. Step through the hits with the arrows or Enter and Shift+Enter, narrow the search with the match-case and whole-word toggles, and replace either the current match or all of them. The readout says which match you are on, and Escape closes the panel.

The FullScreen group adds a toggle that expands the editor to fill the viewport for distraction-free writing, and collapses it back. Leaving full screen from outside the component - the Escape key or the browser's own chrome - keeps the toggle in sync. Where the browser's Fullscreen API is unavailable or refused (an embedded frame, for instance) the editor fills the viewport by itself instead, and Escape still leaves.

Markdown-style prefixes are converted as you type: # through ###### for headings, > for a quote, -, * or + for a bulleted list, 1. for a numbered one, [] or [x] for a task, ``` for a code block, and --- for a divider. Inline markdown closes on its own delimiter: **bold** or __bold__, *italic* or _italic_, ~~strikethrough~~ and `code`. None of these rules - nor autolinking, nor the slash and mention triggers - fire inside a code block or a code span, where those characters are the content being written. Enter on the empty last line of a quote or a code block leaves it for a fresh paragraph, so a block entered by typing can be left by typing. A typed or pasted URL becomes a link as soon as the word is finished (turn that off with AutoLink). Typing / on an empty line opens a command menu you can filter by name or keyword and drive entirely from the keyboard.

Common chords work out of the box: Ctrl/Cmd+B, I and U for bold, italic and underline, Shift+X for strikethrough, Ctrl/Cmd+E for inline code, Ctrl/Cmd+K for a link, Shift+7/8/9 for numbered, bulleted and task lists, Ctrl/Cmd+Z and Y for history, Ctrl/Cmd+Shift+V to paste without formatting, and Alt+F10 to move focus into the toolbar (Escape returns it to the text). Whichever chord ends up bound to a command is what the matching toolbar button announces to a screen reader. Override or extend them with KeyboardShortcuts - a map of chords to command names. Use "ctrl" for the primary modifier on all platforms.

The command strings that can be mapped in KeyboardShortcuts are:

• Inline: bold, italic, underline, strikeThrough, inlineCode
• History: undo, redo
• Lists: insertOrderedList, insertUnorderedList, insertTaskList
• Alignment: justifyLeft, justifyCenter, justifyRight, justifyFull
• Indentation: indent, outdent
• Script: subscript, superscript
• Other: removeFormat, link, unlink, insertHorizontalRule
• Paragraph formats: p, h1-h6, blockquote, pre - these toggle, so the chord that applies a format also takes it back off

The Emoji group adds a searchable picker, grouped into smileys, gestures, nature, objects and symbols - the last of which covers the typographic and mathematical characters that are awkward to type (arrows, dashes, currency, fractions, Greek letters). Search matches both the name and its everyday keywords.

Set ShowCount to display a count footer, announced to screen readers as it changes. Add MaxLength to cap the plain-text character count: typing, pasting, dropping, replacing and emoji insertion are all budgeted against it, so the limit holds however the content arrives.

The editor participates in EditForm like any input. Bind a model property with @bind-Value and the component picks up the EditContext, so DataAnnotationsValidator and ValidationMessage work as expected.

Add your own buttons with ToolbarConfig.CustomItems. Each item needs an Id and either an AriaLabel or a Label, plus an OnActivate callback that receives the editor instance - so it can call the imperative API. For display, supply a Label or an Icon. A callback that throws is reported through OnError instead of breaking the editor. The custom "Today" button appears at the end of the toolbar below.

Set ToolbarConfig.Order to a list of entry ids - use BitRichTextEditorToolbarConfig.GroupIds rather than raw strings. Listed ids appear first in that order; any enabled-but-omitted groups are appended in their default order, and unknown ids are skipped.

Supply an IBitRichTextEditorLocalizer to translate every label, tooltip, panel caption, slash-menu entry and error message. The indexer receives a stable key and returns null to keep the built-in English text, so a partial dictionary is enough.

Capture the component with @ref to drive it from code: FocusAsync moves keyboard focus, ExecuteCommandAsync runs a raw editing command, InsertTextAsync and InsertHtmlAsync write at the caret (the HTML is sanitized first), SetHtmlAsync and ClearAsync replace the whole content, UndoAsync, RedoAsync and SelectAllAsync drive the selection and history, and GetHtmlAsync, GetTextAsync and GetSelectedTextAsync read it back. CharacterCount, WordCount and IsEmpty are plain properties kept current by the editor, so a submit button or a counter can read them without a round trip to the browser.

result:

Set ShowQuickToolbar to float a compact formatting bar next to the text as soon as something is selected, so the common actions are under the cursor instead of at the top of the editor. It tracks the selection as the surface scrolls, disappears when the selection collapses, and steps aside for the slash menu and the tool panels. It complements the main toolbar rather than replacing it - pair it with ShowToolbar set to false for a chrome-free writing surface, where the link panel still opens from the bar or from Ctrl/Cmd+K.

Supply OnMentionSearch and typing @ at the start of a word opens a people picker: the callback receives what is typed into the menu and returns the matches, which are navigated with the arrow keys and picked with Enter. Only the newest lookup is applied, so a slow response cannot overwrite a later one. The inserted mention is a span carrying your own id in data-mention-id - part of the default allowlist, so it survives a save-and-reload round trip - and OnMentionSelected tells you which record was chosen.

Set SmartTypography and the everyday typing shorthands become the characters they stand for: straight quotes curl into “ ” and ‘ ’ as you type them (opening or closing, decided by what precedes them), -- becomes an em dash, ... an ellipsis, (c), (r) and (tm) their symbols, 1/2, 1/4 and 3/4 real fractions, and ->, <-, !=, <=, >= and +/- their arrows and math signs. Everything but the quotes is applied when the space finishes the word, so it is always one undo away, and nothing is rewritten inside code spans or code blocks. It is off by default: a document full of code or measurements wants exactly what was typed.

OnSelectionChange reports the same snapshot the toolbar highlights itself from - the active inline styles, the block tag, colors and font at the caret, the link, image or table cell it sits in - every time the selection or the formatting under it changes. It is what a host builds its own chrome from: a custom toolbar outside the component, a status bar, or a panel that only appears inside a table.

Caret is in: nothing yet

Use the Styles parameter to apply custom inline styles to individual parts of the editor (root, toolbar, group, button, editor, source, and count). The Classes parameter works the same way for CSS classes.

Set Dir to BitDir.Rtl to lay the whole editor out right-to-left. The Direction toolbar group is independent of it: it sets the direction of the block at the cursor, so a single document can mix paragraphs of both directions.