Extras
RichTextEditor
Bit.BlazorUI.ExtrasWysiwygEditorHtmlEditor
A native WYSIWYG editor whose HTML you two-way bind with Value. Its toolbar is a flags enum of groups you can reorder and extend; every byte in and out passes an allowlist sanitizer; and markdown typing rules, a slash menu, mentions, keyboard chords, counting, localization and EditForm validation are built in. The toolbar, panels and menus follow the keyboard and ARIA patterns of their roles, and Alt+0 lists every shortcut.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
The emitted HTML is untrusted input. The editor sanitizes everything in and out against an allowlist, but in the browser, which is not a trust boundary: always sanitize it again on the server.
The emitted HTML is untrusted input. The editor sanitizes everything in and out against an allowlist, but in the browser, which is not a trust boundary: always sanitize it again on the server.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The default editor: the core toolbar, undo/redo and the built-in keyboard shortcuts.
Placeholder & size
Placeholder shows (and is announced) while the editor is empty. Height is where the surface
starts and MaxHeight where it starts scrolling (any CSS length); Resizable adds a drag
handle and SpellCheck (on by default) toggles the browser's spell checking.
Binding
@bind-Value keeps the HTML in sync both ways, always sanitized, and an emptied editor reports an
empty string. Typing is debounced by DebounceMs (200 by default; leaving the editor flushes it),
and OnChange reports every change.
The bound value is just a string you own.
Changes: 0
<p>The bound value is just a <strong>string</strong> you own.</p>
Toolbar
Toolbar is a flags enum: combine groups with
|, or use All (the default) or
AllExtended for images, tables, colors, fonts, media, emoji, find, source view, full screen and
more. StickyToolbar keeps it in view while the page scrolls past a tall editor. The toolbar is
one tab stop: arrow keys move inside it, Alt+F10 jumps to it from the text and Escape goes back; the
emoji picker is one tab stop too, walked with the arrow keys.
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
Custom toolbar
ToolbarConfig.CustomItems adds your own buttons (an Id, a Label or Icon, and an
OnActivate that receives the editor); IsActive gives one a pressed state read off the
caret, and a throwing one is reported through OnError.
ToolbarConfig.Order pulls the listed ids (BitRichTextEditorToolbarConfig.GroupIds or
yours) to the front.
The inline group comes first, 'Today' inserts the date and 'Callout' toggles a quote.
Read-only & disabled
ReadOnly locks editing but keeps the text selectable and in the tab order; with
ShowToolbar off and Height auto it displays stored content. Disabled dims the
editor, takes it out of the tab order and refuses every edit path.
This instance is read-only.
This instance is disabled.
Links
Ctrl/Cmd+K opens the link panel: text, URL and "open in a new tab" (with a safe
rel); on an
existing link it edits, opens or removes it. A bare host becomes https, and an invalid URL raises OnError
(code invalid-url) without touching the content. A URL pasted over a selection links it.
Images
Insert by URL with alternative text, or drop and paste files. OnImageUpload persists the bytes and
returns the URL (null cancels), the editor showing and announcing the upload meanwhile; without it images
are inlined as data URLs. Types and size
(MaxImageSize, 10 MB by default; 2 MB here) are checked on both sides. A dropped image arrives with
empty alt text (a file name describes nothing) and the editor says so; select it and the panel edits its
source, alt text and width. It also floats left, center or right and resizes by its handle.
Images can sit inline with text.
Colors & fonts
The Color group sets and removes the text and highlight colors: ColorPalette offers your
own swatches (arrow keys walk them, a custom field takes any other color); without it the browser's
picker opens. The Font group sets the family and size from FontFamilies and
FontSizes (or built-in defaults). Both reflect what is applied at the caret.
Make words colorful or highlighted, then pick a typeface.
Tables
Insert a table of any size, optionally with a header row. Inside it you can add and delete rows and
columns, toggle the header row, merge and split cells (merges survive), and drag a border to size a
column. Tab and Shift+Tab walk the cells; Tab in the last one adds a row.
| Feature | Status |
|---|---|
| Tables | Ready |
| Merge & split cells | Ready |
Media & rules
Media embeds a YouTube or Vimeo link as a privacy-friendly iframe and a direct audio/video URL
natively. An iframe only survives on an approved https host (widen it with AllowedIframeHosts).
Rule inserts a horizontal divider.
Add a divider below, then embed a video.
Next section.
Find & replace
Highlights every match and marks the current one, announcing its position. Enter / Shift+Enter step
through them, Enter in the replace box replaces (Ctrl/Cmd+Enter all of them), match case and whole word
narrow the search, and Escape closes the panel back to the text.
The quick brown fox jumps over the lazy dog. The fox is quick, and the foxes are quicker.
Sanitization & paste
A SanitizationPolicy lists the tags, attributes and URI schemes that survive paste, drop,
source view and code; tightening it at runtime re-cleans the loaded content. The Source group
shows the raw HTML and validates it on the way back. Pasted Word and Google Docs markup is normalized
first; PasteAsPlainText (or Ctrl/Cmd+Shift+V once) drops the formatting entirely.
Only allowlisted tags, attributes and URI schemes survive.
Typing aids
Markdown prefixes convert as you type (
#-######, >,
-, 1., [], ```, ---), as do inline
**bold**, *italic*, ~~strike~~ and `code`. / on
an empty line opens a command menu, a finished URL becomes a link (AutoLink), and
SmartTypography curls quotes and turns --, ..., (c),
-> and friends into their symbols. Tab / Shift+Tab nest list items, Ctrl/Cmd+Enter ticks a
task, and Enter on an empty last line leaves a quote or code block. Nothing fires inside code.
Type "quotes" -- an ellipsis... or (c) 2026, and start a new line with / or [] .
Keyboard shortcuts
Built in: Ctrl/Cmd+B, I, U, E (code), K (link), Shift+X (strike), Shift+7/8/9 (lists), Z/Y (history)
and \ (clear formatting). KeyboardShortcuts maps more chords (use "ctrl" for the primary key) to
a command or a paragraph format; what a chord is bound to is what its button announces. Alt+0 (or the
Help group) lists every key the editor answers to, custom chords included, and the surface tells a
screen reader so.
Commands:
bold, italic, underline, strikeThrough,
inlineCode, undo, redo, insertOrderedList,
insertUnorderedList, insertTaskList, justifyLeft,
justifyCenter, justifyRight, justifyFull, indent,
outdent, subscript, superscript, removeFormat,
link, unlink, insertHorizontalRule; formats (toggled):
p, h1-h6, blockquote, pre.
Press Ctrl/Cmd+Shift+S, Ctrl/Cmd+Shift+L or Ctrl/Cmd+Shift+1, and Alt+0 to list them all.
Selection toolbar
ShowQuickToolbar floats a compact formatting bar over the selection; Alt+F10 moves the focus into
it and Escape back. With ShowToolbar off it makes a chrome-free writing surface; Ctrl/Cmd+K
still opens the link panel.
Select any part of this sentence and the formatting bar appears right above it.
Mentions
With OnMentionSearch, @ at the start of a word opens a people picker fed by your lookup
(only the newest result is applied). The inserted span carries your id in
data-mention-id,
and OnMentionSelected reports the pick.
Type @ to bring up the people picker.
Forms & validation
In an EditForm, @bind-Value ties the editor to its field: a failing field gets the error
border and
aria-invalid. Label names the editor (click it to focus), Required
marks it, Description adds helper text, and ShowCount with MaxLength adds a counter
that caps typing, pasting and dropping alike; the surface is described by all of them. Outside a form,
ErrorMessage (or Invalid alone) reports a rejection of your own, announced as it appears.
Comment
Save this to see the server reject it, then edit it to clear the error.
Events
OnFocus and OnBlur follow the text surface; OnSelectionChange reports the state the
toolbar highlights from (styles, block, colors, link, table, image), to build your own chrome on.
Editor is blurred; the caret is in: nothing yet
Localization
An IBitRichTextEditorLocalizer translates every label, tooltip, panel, menu and message by a stable
key; returning null keeps the English text, so a partial dictionary is enough.
Pase el cursor sobre los botones para ver las descripciones traducidas.
Imperative API
Through @ref: focus, run commands, insert text or (sanitized) HTML, set or clear the content,
undo/redo, select all, and read back the HTML, text or selection. CharacterCount,
WordCount and IsEmpty are kept current without a browser round trip.
Drive me from the buttons above.
Result:
Cascading parameters
BitParams with a BitRichTextEditorParams sets defaults - toolbar, localizer, policy,
upload handler, color palette, sizes, styles - for every editor under it. An editor's own value wins (the second keeps
its own placeholder).
0 words · 0 chars
0 words · 0 chars
Style & Class
Style and Class reach the root; Styles and Classes reach each part. The public
--bit-RichTextEditor-* CSS variables restyle the editor here or app-wide from
:root.
Component's Style & Class:
Styles & Classes:
Press Alt+0 for keyboard shortcuts.
CSS variables:
Restyled with the public CSS variables: no class needed.
Even the quote rule.
RTL
Dir lays the whole editor out right-to-left (the toolbar's arrow keys follow). The Direction
group sets the direction of the block at the caret, so one document can mix both.
این ویرایشگر از راست به چپ چیده شده است.
And this block is left-to-right.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitRichTextEditor CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-RichTextEditor-color | var(--bit-clr-fg-pri) | Text color of the editor. |
| --bit-RichTextEditor-background | var(--bit-clr-bg-pri) | Background of the editor and of its floating toolbar and menus. |
| --bit-RichTextEditor-border-color | var(--bit-clr-brd-pri) | Color of the outer border. |
| --bit-RichTextEditor-border-width | var(--bit-shp-brd-width) | Width of the outer border. |
| --bit-RichTextEditor-border-radius | var(--bit-shp-radius-surface) | Corner radius of the editor. |
| --bit-RichTextEditor-divider-color | var(--bit-clr-brd-sec) | Lines between the toolbar, its panels, the surface and the footer, and between the toolbar groups. |
| --bit-RichTextEditor-focus-color | var(--bit-clr-pri-focus) | Every focus indicator of the editor. While it is unset, every focus ring held off its element is the library's own --bit-shd-focus-ring; the ones drawn flush against a cell or a field keep this color. |
| --bit-RichTextEditor-error-color | var(--bit-clr-err) | Border of an invalid editor, the required asterisk, the error message, the inline error and the limit reached. |
| --bit-RichTextEditor-height | spacing(37.5) | Height the editing surface starts at (the Height parameter sets it on the instance). |
| --bit-RichTextEditor-max-height | none | Height past which the surface scrolls (the MaxHeight parameter sets it on the instance). |
| --bit-RichTextEditor-padding | spacing(1.75) spacing(2) | Padding of the editing surface and the source view. |
| --bit-RichTextEditor-font-family | inherit | Font of the content. |
| --bit-RichTextEditor-font-size | inherit | Font size of the content. |
| --bit-RichTextEditor-line-height | 1.6 | Line height of the content and the source view. |
| --bit-RichTextEditor-placeholder-color | var(--bit-clr-fg-sec) | Placeholder text of the editing surface and of the fields of its panels (link, image, media, find and replace, search). |
| --bit-RichTextEditor-link-color | var(--bit-clr-pri) | Links in the content. |
| --bit-RichTextEditor-code-background | var(--bit-clr-bg-sec) | Background of code spans, code blocks and the source view. |
| --bit-RichTextEditor-quote-border-color | var(--bit-clr-brd-pri) | Leading rule of a block quote. |
| --bit-RichTextEditor-table-border-color | var(--bit-clr-brd-pri) | Table cell borders and horizontal rules in the content. |
| --bit-RichTextEditor-mention-color | var(--bit-clr-pri-dark) | Text of a mention chip. |
| --bit-RichTextEditor-mention-background | var(--bit-clr-pri-light) | Background of a mention chip. |
| --bit-RichTextEditor-find-background | var(--bit-clr-wrn-light) | Highlight of every find match (the current one takes the primary color). |
| --bit-RichTextEditor-toolbar-background | var(--bit-clr-bg-sec) | Background of the toolbar and its panels. |
| --bit-RichTextEditor-toolbar-sticky-offset | 0 | Gap between a StickyToolbar and the top of the scrolling area once it is pinned (the height of a fixed header). |
| --bit-RichTextEditor-button-size | var(--bit-siz-ctrl-md) | Height (and minimum width) of a toolbar button and selector. |
| --bit-RichTextEditor-button-color | var(--bit-clr-fg-pri) | Glyph of a toolbar button. |
| --bit-RichTextEditor-button-radius | var(--bit-shp-radius-button) | Corner radius of a toolbar button. |
| --bit-RichTextEditor-button-hover-background | var(--bit-clr-bg-sec-hover) | Background of a toolbar button, an emoji or a menu item under the pointer. |
| --bit-RichTextEditor-button-active-color | var(--bit-clr-pri) | Glyph and border of a pressed button (the format at the caret, an open panel) and of the current menu item. |
| --bit-RichTextEditor-button-active-background | var(--bit-clr-bg-pri-active) | Background of a pressed button and of the current menu item. |
| --bit-RichTextEditor-description-color | var(--bit-clr-fg-sec) | Helper text (Description) in the footer. |
| --bit-RichTextEditor-footer-color | var(--bit-clr-fg-sec) | Text of the counts in the footer. |
| --bit-RichTextEditor-footer-background | var(--bit-clr-bg-sec) | Background of the footer that holds the description and the counts. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitRichTextEditor parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AutoFocus | bool | false | Automatically moves keyboard focus into the editor after the first render. |
| AutoLink | bool | true | Turns a URL typed into the editor into a link as soon as the word is finished. |
| Classes | BitRichTextEditorClassStyles? | null | Custom CSS classes for different parts of the rich text editor. |
| ColorPalette | IReadOnlyList<BitRichTextEditorColor>? | null | The colors the text and highlight color buttons offer as swatches (plus a custom field). Null or empty keeps the browser's color picker. |
| DebounceMs | int | 200 | Debounce window (ms) for content-change notifications while typing. Negative values are treated as 0. |
| Description | string? | null | The helper text shown in the footer of the editor; the editing surface is described by it. |
| ErrorMessage | string? | null | The message shown under the editor when its content was rejected. It marks the editor invalid, describes the surface and is announced as it appears. |
| FontFamilies | IReadOnlyList<string>? | null | Font families offered in the font-family selector. Null/empty uses defaults. |
| FontSizes | IReadOnlyList<string>? | null | Font sizes offered in the font-size selector. Null/empty uses defaults. |
| Height | string? | null | The height the editing surface starts at (any CSS length); it grows with the content up to MaxHeight. Null leaves it to --bit-RichTextEditor-height (300px). |
| Invalid | bool | false | Marks the content as invalid (error border and aria-invalid) for a rejection that does not come from the cascading EditContext. |
| KeyboardShortcuts | IReadOnlyDictionary<string, string>? | null | Custom key-combo to command map, merged over the built-in defaults. |
| Label | string? | null | The visible label of the editor. It names the editing surface for assistive technologies, and clicking it focuses the text. |
| Localizer | IBitRichTextEditorLocalizer? | null | Localized labels/tooltips provider. Null uses built-in English labels. |
| MaxHeight | string? | null | Maximum height of the editing surface (any CSS length); content beyond it scrolls inside the editor. Null leaves it to --bit-RichTextEditor-max-height (unbounded). |
| MaxImageSize | long | 10485760 | The largest image, in bytes, that a drop or a paste may insert (10 MB). Checked in the browser and again before OnImageUpload; zero or less restores the default. |
| MaxLength | int? | null | Maximum plain-text character count. Null means unlimited. |
| OnBlur | EventCallback | Callback for when the editor loses focus. | |
| OnChange | EventCallback<string?> | Callback for when the editor content changes. | |
| OnError | EventCallback<BitRichTextEditorError> | Callback for when the editor encounters a recoverable error. | |
| OnFocus | EventCallback | Callback for when the editor gains focus. | |
| OnMentionSearch | Func<string, Task<IReadOnlyList<BitRichTextEditorMention>>>? | null | Supplies the suggestions shown after the user types "@". Leaving it null disables mentions. |
| OnMentionSelected | EventCallback<BitRichTextEditorMention> | Callback for when a mention is picked from the menu. | |
| OnImageUpload | Func<BitRichTextEditorImageUpload, Task<string?>>? | null | Invoked to persist an image binary, returning the URL to embed. While it runs the editor shows and announces the upload (aria-busy on the surface). When null, dropped or pasted images are embedded as inline data URLs. |
| OnSelectionChange | EventCallback<BitRichTextEditorSelectionState> | Callback for when the selection - or the formatting under it - changes; receives the same snapshot the toolbar highlights itself from. | |
| PasteAsPlainText | bool | false | When true, pasted content is inserted as plain text. |
| Placeholder | string? | null | The placeholder value of the editor shown while it is empty. |
| ReadOnly | bool | false | Makes the editor readonly. |
| Required | bool | false | Marks the editor as required: aria-required on the surface and an asterisk on the Label. |
| Resizable | bool | false | Lets the reader drag the bottom edge of the editing surface to make it taller or shorter. |
| SanitizationPolicy | BitRichTextEditorSanitizationPolicy? | null | Allowlist policy applied to all content. When null a secure default allowlist is applied. |
| ShowCount | bool | false | Show the character/word count footer. |
| ShowQuickToolbar | bool | false | Whether a small formatting toolbar floats next to the current text selection. |
| ShowToolbar | bool | true | Whether the formatting toolbar is shown. |
| SmartTypography | bool | false | Replaces common text patterns with their typographic characters as they are typed: curly quotes, em dash, ellipsis, copyright/registered/trademark signs, fractions, arrows and comparison symbols. |
| SpellCheck | bool | true | Whether the browser's native spell checking runs over the editor content. |
| StickyToolbar | bool | false | Keeps the toolbar in view while the page scrolls past a tall editor, --bit-RichTextEditor-toolbar-sticky-offset below the top. |
| Styles | BitRichTextEditorClassStyles? | null | Custom CSS styles for different parts of the rich text editor. |
| Toolbar | BitRichTextEditorToolbar | BitRichTextEditorToolbar.All | Which toolbar groups to display. |
| ToolbarConfig | BitRichTextEditorToolbarConfig? | null | Custom toolbar items and ordering. Null uses the default group order. |
| Value | string? | null | The two-way bound HTML content of the editor. |
BitRichTextEditor public members
| Name | Type | Default value | Description |
|---|---|---|---|
| CharacterCount | int | The plain-text character count of the current content, as the count footer and MaxLength count it. | |
| ClearAsync | Task | Clears the editor content. | |
| ExecuteCommandAsync | Task | Runs a raw editing command against the editor. | |
| FocusAsync | ValueTask | Moves keyboard focus into the editor. | |
| GetHtmlAsync | ValueTask<string> | Returns the current HTML content of the editor. | |
| GetSelectedTextAsync | ValueTask<string> | Returns the plain text of the current selection, or an empty string when nothing inside the editor is selected. | |
| GetTextAsync | ValueTask<string> | Returns the current content of the editor as plain text, with block boundaries rendered as newlines and all markup removed. | |
| InsertHtmlAsync | Task | Inserts HTML at the current caret position, after running it through the active sanitization policy. | |
| InsertTextAsync | Task | Inserts plain text at the current caret position, honoring MaxLength. | |
| IsEmpty | bool | Whether the editor holds nothing a reader would see - no text and none of the elements that are content without carrying text (images, tables, rules, media). | |
| RedoAsync | Task | Redoes the last undone edit. | |
| SelectionState | BitRichTextEditorSelectionState | The formatting under the current selection, the snapshot the toolbar highlights itself from. | |
| SelectAllAsync | ValueTask | Selects the whole editor content. | |
| SetHtmlAsync | Task | Replaces the whole content with the given HTML (sanitized), or clears it when null/empty. | |
| UndoAsync | Task | Undoes the last edit. | |
| WordCount | int | The word count of the current content. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitRichTextEditorClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root of the BitRichTextEditor. |
| Label | string? | null | Custom CSS classes/styles for the label of the BitRichTextEditor. |
| Toolbar | string? | null | Custom CSS classes/styles for the toolbar of the BitRichTextEditor. |
| Group | string? | null | Custom CSS classes/styles for the toolbar groups of the BitRichTextEditor. |
| Button | string? | null | Custom CSS classes/styles for the toolbar buttons of the BitRichTextEditor. |
| Panel | string? | null | Custom CSS classes/styles for the tool panels (link, image, media, table, find, emoji, color and keyboard help) of the BitRichTextEditor. |
| QuickToolbar | string? | null | Custom CSS classes/styles for the floating selection toolbar of the BitRichTextEditor. |
| Menu | string? | null | Custom CSS classes/styles for the slash command and mention menus of the BitRichTextEditor. |
| Error | string? | null | Custom CSS classes/styles for the inline error banner (a failed command, link or upload) of the BitRichTextEditor. |
| Editor | string? | null | Custom CSS classes/styles for the editor (content) area of the BitRichTextEditor. |
| Source | string? | null | Custom CSS classes/styles for the HTML source view textarea of the BitRichTextEditor. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the error message (the ErrorMessage parameter) of the BitRichTextEditor. |
| Footer | string? | null | Custom CSS classes/styles for the footer row (holding the description and the counts) of the BitRichTextEditor. |
| Description | string? | null | Custom CSS classes/styles for the description (helper text) in the footer of the BitRichTextEditor. |
| Count | string? | null | Custom CSS classes/styles for the character/word counts in the footer of the BitRichTextEditor. |
BitRichTextEditorToolbarConfig properties
Configures toolbar ordering and custom items.
| Name | Type | Default value | Description |
|---|---|---|---|
| Order | IReadOnlyList<string>? | null | Explicit ordering of toolbar entry ids (built-in group ids and custom item ids). Use BitRichTextEditorToolbarConfig.GroupIds for the built-in ids. |
| CustomItems | IReadOnlyList<BitRichTextEditorToolbarItem>? | null | Custom toolbar items (max 50 are rendered). |
BitRichTextEditorToolbarItem properties
A custom toolbar button supplied by the host.
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | Unique id used for ordering and lookup. It must not collide with a built-in group id. | |
| Label | string? | null | Text label shown when no icon is provided. |
| Icon | RenderFragment? | null | Optional icon content. |
| AriaLabel | string? | null | Optional accessible label / tooltip. When omitted, Label is used as the accessible name. |
| IsActive | Func<BitRichTextEditorSelectionState, bool>? | null | Whether the item shows as pressed (and reports aria-pressed) for the formatting at the caret. Null makes a plain action button. |
| OnActivate | Func<BitRichTextEditor, Task> | Action invoked when the item is activated; receives the editor instance. |
BitRichTextEditorSanitizationPolicy properties
An allowlist sanitization policy. Only the listed tags, attributes, and URI schemes are retained; everything else is removed. The static Default property returns a fresh copy of the built-in policy.
| Name | Type | Default value | Description |
|---|---|---|---|
| AllowedTags | ISet<string> | Permitted (lowercase) element/tag names. | |
| AllowedAttributes | IDictionary<string, ISet<string>> | Permitted attributes per tag name. Use the key "*" for attributes allowed on any tag. A permitted style attribute is filtered further, down to presentational CSS properties. | |
| AllowedUriSchemes | ISet<string> | Permitted URI schemes for href/src attributes (e.g. http, https, mailto). | |
| AllowDataImageUris | bool | true | Whether data: image URIs are permitted in image sources. |
| AllowedIframeHosts | IReadOnlyCollection<string>? | null | Hosts an iframe may point at, over https. Null applies the built-in approved embed hosts (YouTube, YouTube-nocookie, Vimeo); an empty collection permits no iframe at all; a single "*" entry lifts the restriction and lets any https source through. |
BitRichTextEditorImageUpload properties
An image to be persisted by the host's OnImageUpload delegate.
| Name | Type | Default value | Description |
|---|---|---|---|
| FileName | string | Original file name, when available. | |
| ContentType | string | MIME type, e.g. "image/png". | |
| Content | byte[] | Raw image bytes. |
BitRichTextEditorSelectionState properties
Snapshot of the formatting under the selection, reported to OnSelectionChange and used to highlight the toolbar.
| Name | Type | Default value | Description |
|---|---|---|---|
| Bold | bool | false | Whether the selection is bold. |
| Italic | bool | false | Whether the selection is italic. |
| Underline | bool | false | Whether the selection is underlined. |
| StrikeThrough | bool | false | Whether the selection is struck through. |
| InlineCode | bool | false | Whether the selection sits inside an inline code span (not a code block). |
| Subscript | bool | false | Whether the selection is subscript. |
| Superscript | bool | false | Whether the selection is superscript. |
| OrderedList | bool | false | Whether the selection sits in a numbered list. |
| UnorderedList | bool | false | Whether the selection sits in a bulleted list. |
| TaskList | bool | false | Whether the selection sits in a checklist item. |
| JustifyLeft | bool | false | Whether the block is aligned left. |
| JustifyCenter | bool | false | Whether the block is centered. |
| JustifyRight | bool | false | Whether the block is aligned right. |
| JustifyFull | bool | false | Whether the block is justified. |
| Block | string | "" | The current block tag ("p", "h1", "blockquote", "pre", ...), lowercase. |
| Direction | string? | null | Text direction of the selected block ("ltr"/"rtl"), or null. |
| ForeColor | string? | null | Active text color of the selection, or null when mixed/none. |
| BackColor | string? | null | Active highlight color of the selection, or null when mixed/none. |
| FontName | string? | null | Active font family, or null when the selection spans several. |
| FontSize | string? | null | Active font size as a CSS length, or null when the selection spans several. |
| InLink | bool | false | Whether the selection sits inside a hyperlink. |
| LinkHref | string? | null | The href of the link under the selection, or null when none/multiple. |
| LinkNewTab | bool | false | Whether that link opens in a new tab (target="_blank"). |
| InTable | bool | false | Whether the selection sits inside a table cell, which is what enables the table operations. |
| ImageSelected | bool | false | Whether an image inside the editor is selected. |
| ImageAlign | string? | null | Alignment of the selected image ("left", "center", "right"), or null when it flows inline. |
| ImageSrc | string? | null | Source of the selected image, or null when no image is selected. |
| ImageAlt | string? | null | Alternative text of the selected image (empty when it has none), or null when no image is selected. |
| ImageWidth | int? | null | Width in pixels the selected image was given, or null when it keeps its natural size or no image is selected. |
| HasSelection | bool | false | Whether a non-empty range inside the editor is selected. |
| SelectionTop | double | 0 | Top of the selection rectangle, in pixels relative to the component root. |
| SelectionLeft | double | 0 | Left edge of the selection rectangle, in pixels relative to the component root. |
| SelectionWidth | double | 0 | Width of the selection rectangle in pixels. |
| SelectionHeight | double | 0 | Height of the selection rectangle in pixels. |
BitRichTextEditorMention properties
A single suggestion offered by the mention menu.
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | Stable identifier written into the inserted markup as data-mention-id. | |
| Display | string | The text shown in the menu and inserted after the trigger character. | |
| Description | string? | null | Optional secondary line shown under the display text in the menu. |
BitRichTextEditorColor properties
A color offered as a swatch by the text and highlight color panels.
| Name | Type | Default value | Description |
|---|---|---|---|
| Value | string | The color applied, as a hex value (#2563eb); a hex value also lets the swatch show it is the color under the caret. | |
| Name | string? | null | The accessible name and tooltip of the swatch ("Brand blue"). Without it the value is read out. |
BitRichTextEditorError properties
An error surfaced by the editor (e.g. invalid URL, failed upload, invalid HTML).
| Name | Type | Default value | Description |
|---|---|---|---|
| Code | string | Stable error code, e.g. "invalid-url". | |
| Message | string | Human-readable description. |
IBitRichTextEditorLocalizer properties
Provides localized labels and tooltips for the editor's controls.
| Name | Type | Default value | Description |
|---|---|---|---|
| this[string key] | string? | Returns the localized string for the given key, or null to use the built-in English default. |
BitRichTextEditorToolbar enum
| Name | Value | Description |
|---|---|---|
| None | 0 | |
| History | 1 | |
| BlockFormat | 2 | |
| Inline | 4 | |
| Lists | 8 | |
| Blocks | 16 | |
| Link | 32 | |
| Alignment | 64 | |
| Clear | 128 | |
| Image | 256 | |
| Color | 512 | |
| Font | 1024 | |
| Indent | 2048 | |
| Script | 4096 | |
| Source | 8192 | |
| Table | 16384 | |
| Media | 32768 | |
| Rule | 65536 | |
| Emoji | 131072 | |
| Find | 262144 | |
| FullScreen | 524288 | |
| Direction | 1048576 | |
| Help | 2097152 | |
| All | 255 | |
| AllExtended | 4194303 |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.