Blazor Markdown Editor
The Blazor Markdown Editor component (RadzenMarkdownEditor) edits Markdown with a toolbar and keyboard shortcuts. It defaults to a WYSIWYG Design mode - a contenteditable surface synced with the Markdown - with a Source mode to edit the raw Markdown text.
The Markdown text is the value in both modes. Design mode edits a parsed document and writes it back to Markdown after every edit; blocks you did not touch are kept exactly as written. Text typed in Design mode is inserted literally: characters with a Markdown meaning are escaped.
Custom tools linkLink to this section
Provide your own toolbar by placing tools inside RadzenMarkdownEditor. Use RadzenMarkdownEditorCustomTool to add buttons that run your own commands via the Execute event, or render arbitrary content with its Template.
All tools linkLink to this section
The Radzen MarkdownEditor supports the following tools. Place them inside RadzenMarkdownEditor to compose your own toolbar; without child content the default toolbar is used.
- RadzenMarkdownEditorUndo - undoes the last change.
- RadzenMarkdownEditorRedo - redoes the last undone change.
- RadzenMarkdownEditorSeparator - displays a vertical separator used to delimit groups of similar tools.
- RadzenMarkdownEditorBold - toggles
**bold**on the selected text. - RadzenMarkdownEditorItalic - toggles
*italic*on the selected text. - RadzenMarkdownEditorStrikethrough - toggles
~~strikethrough~~on the selected text. - RadzenMarkdownEditorFormatBlock - makes the selected paragraphs headings of a chosen level (
#to######) or normal text. - RadzenMarkdownEditorQuote - toggles
>block quotes on the selected lines. - RadzenMarkdownEditorCode - toggles inline
`code`on the selected text. - RadzenMarkdownEditorCodeBlock - wraps the selection in a fenced
```code block. - RadzenMarkdownEditorUnorderedList - toggles a bullet list (
-) on the selected lines. - RadzenMarkdownEditorOrderedList - toggles a numbered list (
1.) on the selected lines. - RadzenMarkdownEditorTaskList - toggles a task list (
- [ ]) on the selected lines. - RadzenMarkdownEditorLink - inserts a link; opens a dialog for the URL (and text when nothing is selected).
- RadzenMarkdownEditorImage - inserts an image by URL; opens a dialog for the URL (and alternative text when nothing is selected).
- RadzenMarkdownEditorHorizontalRule - inserts a horizontal rule (
---) on its own line. - RadzenMarkdownEditorSource - switches between the Design and Source views.
- RadzenMarkdownEditorTable - inserts a table; opens a dialog for the number of rows and columns.
- RadzenMarkdownEditorTableTools - the table tool group: insert table, insert row above/below, insert column left/right, delete row/column/table and align the column left, center or right. The editing tools are enabled when the caret is inside a table, and the same commands open as a context menu on right click in a table cell (requires RadzenComponents or RadzenContextMenu on the page).
- RadzenMarkdownEditorTableCommandButton - a single table command button; used by RadzenMarkdownEditorTableTools and available for custom toolbars.
- RadzenMarkdownEditorCustomTool - allows the developer to implement a custom tool (see Custom tools above).
Keyboard Navigation linkLink to this section
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor MarkdownEditor component. Shortcuts work the same in Design and Source mode.
| Press this key | To do this | |
|---|---|---|
| Windows, Chrome OS | Mac | |
| Tab | Tab | Navigate to a MarkdownEditor component. |
| Ctrl + B | ⌘ + B | Toggle bold on the selected text. |
| Ctrl + I | ⌘ + I | Toggle italic on the selected text. |
| Ctrl + K | ⌘ + K | Insert a link (opens the link dialog). |
| Ctrl + Z | ⌘ + Z | Undo the last change, including toolbar actions. |
| Ctrl + Shift + Z | ⌘ + Shift + Z | Redo the last undone change. |
| Ctrl + Y | ⌘ + Y | Redo the last undone change (alternative to Ctrl+Shift+Z). |
Frequently asked questions
How do I edit Markdown in Blazor?
Add RadzenMarkdownEditor and bind its Value property; it opens in a WYSIWYG Design mode - a contenteditable surface kept in sync with the Markdown - with the toolbar and keyboard shortcuts editing the content directly.
Can I edit the raw Markdown instead of the WYSIWYG view?
Yes. Bind the Mode property to MarkdownEditorMode.Source, or let users switch between Design and Source with the built-in mode switcher.
How do I add custom buttons to the Markdown Editor?
Declare RadzenMarkdownEditorCustomTool inside the editor and handle the Execute callback, or use its Template to render any content.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT
On this page