Blazor HtmlEditor
The Blazor HTML Editor is a rich text (WYSIWYG) editor with a full toolbar of formatting tools, image and link support, and HTML output.
Get and set the value link
As all Radzen Blazor input components the HtmlEditor has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.
Console log
All tools link
The Radzen HtmlEditor supports the following tools:
- RadzenHtmlEditorUndo - allows the user to undo the last action (result of other tool, typing or pasting).
- RadzenHtmlEditorRedo - allows the user to redo the last undone action.
- RadzenHtmlEditorSeparator - displays a vertical separator used to delimit group of similar tools.
- RadzenHtmlEditorBold - toggles the bold style of the selected text.
- RadzenHtmlEditorItalic - toggles the italic style of the selected text.
- RadzenHtmlEditorUnderline - toggles the underline style of the selected text.
- RadzenHtmlEditorStrikeThrough - toggles the strikethrough style of the selected text.
- RadzenHtmlEditorAlignLeft - toggles left text alignment.
- RadzenHtmlEditorAlignCenter - toggles center text alignment.
- RadzenHtmlEditorAlignRight - toggles right text alignment.
- RadzenHtmlEditorJustify - toggles justified text alignment.
- RadzenHtmlEditorIndent - indents the selected text.
- RadzenHtmlEditorOutdent - outdents the selected text.
- RadzenHtmlEditorUnorderedList - inserts unordered (bullet) list.
- RadzenHtmlEditorOrderedList - inserts ordered (numbered) list.
- RadzenHtmlEditorColor - sets the foreground color of the selected text.
- RadzenHtmlEditorBackground - sets the background color of the selected text.
- RadzenHtmlEditorRemoveFormat - removes the visual styling of the selected text.
- RadzenHtmlEditorSubscript - converts the selected text to subscript.
- RadzenHtmlEditorSource - edit the HTML source as text.
- RadzenHtmlEditorSuperscript - converts the selected text to superscript
- RadzenHtmlEditorLink - inserts a hyperlink.
- RadzenHtmlEditorUnlink - removes a hyperlink.
- RadzenHtmlEditorImage - allows the user to insert an image by either uploading a file or selecting a URL. Requires File upload to be implemented and the UploadUrl property of the HtmlEditor to be set.
- RadzenHtmlEditorTable - inserts and edits HTML tables including rows, columns, merge/split, styling, copy/paste, resizing and context menu actions.
- RadzenHtmlEditorFontName - set the font of the selected text.
- RadzenHtmlEditorFontSize - set the font size of the selected text.
- RadzenHtmlEditorFormatBlock - allows the user to format the selected text as heading or paragraph.
- RadzenHtmlEditorCustomTool - allows the developer to implement a custom tool.
Custom set of tools (text-editing only) link
Here is how to specify a custom set of tools.
Upload images link
You can insert images by pasting them or using the RadzenHtmlEditorImage tool. By default images are inserted as base64 encoded strings.
To upload images to the server you need to implement a file upload endpoint and set the UploadUrl property of the RadzenHtmlEditor component:
<RadzenHtmlEditor @bind-Value=@htmlValue UploadUrl="api/upload/image" />.
For a sample implementation check the UploadController.cs tab.
Focus link
Programmatically set focus to the HTML editor using the FocusAsync() method.
Table editor link
The built-in table editor supports inserting tables, adding and removing rows or columns, merge and split operations, keyboard navigation, copy and paste for cell ranges, column resizing and a property panel for cell styling.
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor HTMLEditor component.
| Press this key | To do this | |
|---|---|---|
| Windows, Chrome OS | Mac | |
| Tab | Tab | Navigate to a HTMLEditor component. |
| Ctrl + A | ⌘ + A | Select all text. |
| Ctrl + C | ⌘ + C | Copy. Copies selected table cells when the caret is inside a table. |
| Ctrl + V | ⌘ + V | Paste. Pastes copied table cells into a rectangular range when the caret is inside a table. |
| Shift + Click | Shift + Click | Select a rectangular table cell range. |
| Ctrl + B | ⌘ + B | Bold. |
| Ctrl + I | ⌘ + I | Italic. |
| Ctrl + U | ⌘ + U | Underline. |
| Ctrl + K | ⌘ + K | Insert or edit a link. |
| Ctrl + Z | ⌘ + Z | Undo. |
| Ctrl + Shift + Z | ⌘ + Shift + Z | Redo. |
| Tab | Tab | Move to the next table cell. Adds a new row at the end of a table body. |
Frequently asked questions
Is the Blazor HTML Editor a WYSIWYG editor?
Yes. It is a rich text editor where users format content visually using a toolbar, and it produces HTML you can bind to your model.
How do I add custom buttons to the HTML Editor?
Use RadzenHtmlEditorCustomTool to add your own toolbar buttons that run custom commands on the selected content.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT