Markdown Editor
A rich text editor with markdown support, toolbar formatting, and live preview.
Basic Usage
A simple markdown editor with two-way data binding. Click the Preview tab to see rendered output.
With Label
Associate a label with the editor for better accessibility.
Toolbar Features
The toolbar provides quick access to formatting options. You can also use keyboard shortcuts.
Available Formatting
- Bold - Select text and click B or press Ctrl+B
- Italic - Select text and click I or press Ctrl+I
- Underline - Select text and click U or press Ctrl+U
- Headings - Use the heading dropdown to set H1, H2, H3, or normal text
- Bullet List - Click the bullet list icon to add list items
- Numbered List - Click the numbered list icon for ordered lists
Pre-populated Content
The editor can be initialized with existing markdown content.
Disabled State
The editor can be disabled to prevent user input.
Form Integration
Use the editor within forms for content submission.
Submit Feedback
Share your thoughts with us using markdown formatting.
Usage Notes
Key Features
- Write/Preview tabs for editing and viewing rendered output
- Toolbar with formatting buttons for common markdown syntax
- Keyboard shortcuts for bold, italic, and underline
- Heading dropdown for H1, H2, H3, and normal paragraph
- Bullet and numbered list support
- Two-way data binding with @bind-Value
- Markdown rendering powered by Markdig
Markdown Syntax
**bold**- Bold text*italic*- Italic text<u>underline</u>- Underlined text# Heading 1- Large heading## Heading 2- Medium heading### Heading 3- Small heading- item- Bullet list item1. item- Numbered list item
Accessibility
- Supports ARIA labels and descriptions
- Keyboard navigation for toolbar
- Associate with Label component using Id parameter
- Supports disabled state