Markup Builder Component
The Markup Builder component allows you to create and edit formatted content with a rich text editor interface. It supports common formatting options like bold, italic, headings, lists, links, images, and text sizing.
Example Usage
Markup Builder Demo
Saved Content Preview
Component Usage
<BosuiMarkupBuilder @bind-Value="markupContent" ShowPreview="true" />
Component Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string | null | Gets or sets the HTML content of the editor. |
| ShowPreview | bool | true | Shows or hides the live preview panel. |
| Placeholder | string | "Type your content here..." | Placeholder text to show when the editor is empty. |
| OnContentChanged | EventCallback<string> | - | Event triggered when content changes. |
Features
Text Formatting
Apply bold, italic, and underline formatting to text.
Text Sizes
Choose from a variety of text sizes (X-Small to 4X-Large) to format your content.
X-Small | Small | Medium | Large | X-Large | 2X-Large | 3X-Large | 4X-Large
Headings
Insert H1, H2, and H3 headings.
Lists
Create bulleted and numbered lists.
Links and Images
Insert hyperlinks and images with customizable attributes.
Code Blocks
Insert formatted code blocks with proper syntax highlighting.