Blazor Rich Text Editor - Markdown Editor Component
- Edit WYSIWYG HTML with rich tools for web and mobile apps.
- Integrate into blogs, messaging apps, email composers, and forums.
- Use as an inline editor for in-place editing of any editable element.
- Enjoy a cutting-edge UI and toolbar customization.
Quick Overview Video
Trusted by the world’s leading companies
Overview
The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor. It is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has various of tools to edit and format rich content and returns valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architecture.
Why choose the Syncfusion Essential Studio® Blazor Rich Text Editor?
WYSIWYG editor
The Blazor Rich Text Editor component can be used as a WYSIWYG HTML editor or a Markdown editor, and it also supports iframe editing with configurable iframe characteristics.
Easy interaction
Users can easily format the text and paragraphs. Set the foreground and background colors, font type, italicization, underlining, strikethrough, and bolding. You can also add ordered (numbered) or unordered (bulleted) lists and change the editor’s size.
Flexible editing
For a better editing experience, the Blazor Rich Text Editor component offers a variety of tools and choices. Users can quickly insert images, videos, hyperlinks, and tables; merge table cells; and configure keys.
Preview the HTML code
Examine and edit the HTML code directly in the source code and view the preview result in the (HTML live editor).
Toolbar with rich set of tools
The WYSIWYG Rich Text Editor for Blazor offers a variety of toolbar options that are fully customizable, such as multirow, expanding, quick, and floating toolbars. The tool commands are grouped based on related functionality.
Adapts to any resolution
The Rich Text Editor has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS.
Integrate with third-party libraries
It’s easy to integrate third-party libraries like a spell checker, code mirror, etc., with the Rich Text Editor to improve the content.
Globalization and localization
Enable users from different locales to use the Rich Text Editor by formatting dates, currency, and numbering to suit preferences.
Smart Rich Text Editor with AI integration
Empower your writing with the AI-enhanced Blazor Rich Text Editor. Correct grammar, rephrase sentences, translate languages, and summarize content instantly, all within your app.
Blazor Rich Text Editor code example
Get started with the Blazor Rich Text Editor using a few simple lines of C# code, as demonstrated below. Also, explore this Blazor Rich Text Editor example, which shows how to render and configure the editor in Blazor.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor @bind-Value="rteValue">
<RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
@code {
private string rteValue { get; set; } = @"<p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
</ul>";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
new ToolbarItemModel() { Command = ToolbarCommand.Image },
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
};
}HTML editor toolbar
The Blazor WYSIWYG text editor toolbar provides a variety of commands for editing and formatting the content. You can format text and paragraphs and insert images, hyperlinks, tables, and lists, etc. The tool commands are grouped based on related functionality.
Multi-row toolbar
The overflow toolbar commands are wrapped into following rows within the toolbar.
Expand toolbar
The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon.
Quick toolbar
This toolbar contains frequently used commands related to text, images, tables, and links. It helps access and format these elements quickly. You can customize the toolbar itself.
Floating toolbar
The HTML WYSIWYG editor toolbar does not stick to the top of the editor, but floats within the editor area while scrolling the editor page.
Fully customizable
The toolbar buttons of the Blazor Rich Text Editor component are fully customizable. Add or remove buttons and group commands into categories. Users can design the toolbar based on application needs, like an HTML blog editor or HTML email composer.
Custom tool
Add your own commands (tools) with actions to the toolbar alongside the built-in commands.
Inline mode
Make the editor show up when you click or select the content in an editable area.
Mention and hashtag
When composing content in the Blazor Rich Text Editor, users or groups can be tagged or selected from the suggestion list.
Editing experience
The Blazor Rich Text Editor provides a wide range of tools and options for a better editing experience.
Insert images
You can insert images in your content from a local path or server path with image captions and then link URLs to the images. You can upload images to a server with drag-and-drop or file upload. Additionally, the editor offers options to insert images in BLOB or Base64 formats.
Insert hyperlinks
You can insert or change hyperlinks with customization options such as display text, tooltip, and links to be opened in a new window.
Insert tables
You can insert and edit HTML tables to display grid-like tabular data in the Rich Text Editor. Manipulate a table and its elements dynamically: insert or remove rows and columns, resize the whole table or specific rows or columns, remove a table.
Table cell merge and split
Merge two or more row or column cells into a single cell with their contents. Also, a single cell can be split both horizontally and vertically.
Text alignment
Align your content to the left, center, or right, or justify it.
Enter and Shift+Enter key configuration
The Rich Text Editor allows users to customize the tag inserted when pressing the Enter key and Shift+Enter keys. The following tags can be configured:
- P: When ‘P’ is configured, pressing Enter or Shift+Enter will create a ‘p’ tag.
- DIV: When ‘DIV’ is configured, pressing Enter or Shift+Enter will create a ‘div’ tag.
- BR: When ‘BR’ is configured, pressing Enter or Shift+Enter will create a ‘br’ tag.
Formatting text
- Format the selected content, whole paragraphs, or specific words or characters.
- Format headings, quotations, code, paragraphs, etc.
- Bold, italicize, underline, strikethrough, or capitalize letters and words.
- Change paragraph indentation and spacing.
- Select fonts and sizes.
- Use subscripts and superscripts.
- Select font color and the background color for the content.
Auto formatting for Markdown syntax
Autoformat enables quick content formatting using Markdown-like shortcodes. This eliminates the need for toolbar buttons or dropdowns for common formatting. As Markdown syntax such as # for headings, ** for bold, and * for italics are typed, the editor automatically converts it into HTML elements.
Checklists
Checklists (to-do lists) can be created directly within the Rich Text Editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents.
Adding custom lists
Create ordered (numbered) or unordered (bulleted) lists to organize the content in the Blazor Rich Text Editor. Change the bullet appearance for the unordered lists to circles or squares. Use different numbering formats for ordered lists such as lowercase Greek or uppercase Roman.
Quick insert for table rows and columns
Users can insert rows and columns into a table quickly. When hovering the mouse near the table edges, a “+” icon appears, enabling users to add rows or columns with a single click.
Line height
Users can adjust vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout.
Full screen text editor
This built-in option makes the WYSIWYG HTML editor full screen (a full-page editor) for editing the content.
Paste from Microsoft Word and Excel
The Blazor Rich Text Editor offers built-in options to paste content with images from Microsoft Word, Microsoft Outlook, and Microsoft Excel by filtering out tags, attributes, and styles. Additionally, choose whether the content should be pasted as plain text, with cleaned styles, or with source formatting.
Auto hyperlink to URL
The control turns text into a hyperlink automatically when a user types a URL as plain text.
Form validations
The RTE seamlessly supports forms and obtains values on form submission. The two types of validation are:
- Required validation
- Maximum length validation
Limit content length
Users can restrict the number of characters in a particular section.
Resizable editor
The Blazor Rich Text Editor can be resized, allowing users to widen or shrink the content area.
Format painter
Use the format painter to copy formatting and apply it to your content, eliminating the need for tedious reformatting. Access the format painter through the toolbar or keyboard shortcuts for quick and easy application. Take advantage of the sticky mode by double-clicking the toolbar button, which allows you to apply formats to multiple locations.
Additional features
Cut, copy, and paste
The Blazor Rich Text Editor component supports clipboard operations (cut, copy, and paste).
Undo redo manager
The Blazor Rich Text Editor manages the history of undo and redo actions, enabling users to experiment with editing.
Print the text editor content
Print the WYSIWYG Rich Text Editor content either by using the print option from the toolbar or programmatically with applied formats.
Touch-friendly and responsive WYSIWYG editor
The Blazor Rich Text Editor (mobile HTML editor) recognizes touch gestures, allowing users to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobiles, tablets, and desktop form factors.
Built-in and customizable themes
The Blazor Rich Text Editor is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast.
Developer-friendly APIs
There are sufficient client-side APIs available to enhance the process of content editing.
HTML editor accessibility
Keyboard navigation
The RTE ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.
Screen reader
The editor view has complete WAI-ARIA accessibility support. The Rich Text Editor UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Right to left (RTL)
The RTE supports right-to-left rendering, allowing the text and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew.
Edit HTML with WYSIWYG tools
25+ interactive demos
860K+ downloads
Other supported frameworks
The Rich Text Editor is also available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Blazor Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
Not sure how to create your first Blazor Rich Text Editor? Our documentation can help.
Get started with the Blazor server-side Rich Text Editor Start with Blazor WebAssembly Rich Text Editor Get started with the Blazor WebAssembly Rich Text EditorBlazor Components – 145+ UI and DataViz Components
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
FILE VIEWERS & EDITORS
DROPDOWNS
NAVIGATION
INPUTS
BUTTONS
INTERACTIVE CHAT
Frequently Asked Questions
Why should you choose the Syncfusion® Essential Studio Blazor Rich Text Editor?
The Syncfusion Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor that offers the following features:
Best WYSIWYG editing experience with both HTML and Markdown editors.
- Integration with third-party libraries.
An inline-mode editor to display commands on demand.
- One of the best Blazor Rich Text Editors in the market that offers a feature-rich UI to interact with the software.
Simple configuration and APIs.
- Support for all modern browsers.
- Touch-friendly and responsive UI.
Extensive demos, documentation and videos let you get started quickly with the Blazor Rich Text Editor.
Where can I find the Syncfusion Blazor Rich Text Editor demo?
You can find our Blazor Rich Text Editor demo here. It demonstrates how to render and configure the Rich Text Editor.
Can I insert images and links in the Rich Text Editor?
Yes, it supports inserting images, hyperlinks, tables, and other media.
Can I download and utilize the Syncfusion Blazor Rich Text Editor for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with the Syncfusion Blazor Rich Text Editor?
A good place to start would be our comprehensive getting started documentation.
How can I customize the toolbar in the Rich Text Editor?
You can customize the toolbar by configuring the toolbarSettings property and adding or removing items.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional-fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D.
Chief Executive Officer
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion Blazor Rich Text Editor resources
UI Kits
Figma download
Figma download
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
Recent activities in Blazor Rich Text Editor blogs and tutorials
These Blazor Rich Text Editor blog and tutorial videos posts will guide you in building your first app with this Blazor component. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Rich Text Editor updates.
