Markdown editor
The Syncfusion React Markdown Editor is the Markdown editing mode of the React Rich Text Editor. The component can be configured for Markdown or HTML editing. Configurable live HTML preview through a Markdown converter, Markdown syntax formatting, customizable toolbars, and support for tables, images, and links make it suitable for blogs, CMS platforms, documentation sites, and note-taking applications.
The component can also be configured as a React MD editor for applications that require Markdown authoring.
Live Markdown preview
Live HTML preview shows changes to Markdown-formatted content when the Syncfusion MarkdownConverter is integrated.
Custom Markdown syntax
Customizable Markdown syntax supports configuring syntax for supported formatting commands. Custom syntax is suitable when specific Markdown conventions are required alongside built-in formatting commands.
Toolbar with a rich set of tools
Toolbar commands support text formatting, image insertion, headings, hyperlinks, lists, and content preview. The same Rich Text Editor component and API can be configured for Markdown or HTML editing. Related commands are grouped together to support different editing tasks.
Multi-row toolbar
The excess toolbar commands are wrapped in the next rows within toolbar in the Markdown text editor.
Expand toolbar
The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon.
Floating the toolbar
The Markdown editor toolbar doesn’t stick with top of the editor, but floats within the editor area while scrolling the editor page.
Custom tools
Users can also add their own commands (tools) with actions to the toolbar along with the built-in commands to enhance the markdown text editor.
Editing experience
Formatting tools support bold, italic, and strikethrough, along with images, tables, and links in Markdown content. Content formatting is suitable when Markdown documents combine styled text, images, and structured elements.
Formatting commands
Users can apply formatting to the selected content, whole paragraphs, or specific words or characters:
- Apply formatting to headings, quotations, code, paragraphs.
- Bold, italicize, or strikethrough selected words.
Insert images
You can insert images in the markdown editor from a local path or server path with image alt text and then link URLs to the images.
Markdown links
Insert or change the hyperlinks with display text in markdown syntax.
Insert markdown table
Users can insert tables with rows and columns in the Markdown editor to display grid-like tabular data.
Adding lists
Create ordered (numbered) or unordered (bulleted) lists to organize content using Markdown syntax.
Markdown to HTML
Integrating third-party Markdown parsers such as marked or remark converts Markdown syntax into formatted HTML for real-time preview in the Rich Text Editor. Live preview is suitable when Markdown input needs to be compared with the rendered HTML output during editing.
@Mention integration
Integration with the Mention component enables @mentions within Markdown content, allowing authors to tag users while editing. User tagging is useful when content requires direct references to specific collaborators or participants.
Localization
Enabling localization in a Markdown editor allows users from different locales to customize text direction, language, and numbering formats based on their preferences.
Adapts across devices
Responsive layouts adapt the editor for desktop, tablet, and mobile screens with touch-friendly controls. Support for different screen sizes is useful when authors create or edit Markdown content across multiple device types.
Built-in and customizable themes
The Markdown editor is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast.
Accessibility
WAI-ARIA roles, states, and properties help assistive technologies interpret the Markdown editing view and its controls. Screen-reader support and keyboard navigation contribute to accessible interaction with Markdown content and editor commands.
Frequently Asked Questions
What is the Syncfusion React Markdown Editor?
- The Markdown Editor is a component that enables users to write content in Markdown, a lightweight markup language. An interface with formatting tools is provided for creating and editing content.
Does the Syncfusion React Markdown Editor support live preview of Markdown content?
- The React Markdown Editor supports live preview functionality. By integrating third-party libraries such as Marked.js, Markdown content can be converted into HTML and displayed in real time, providing an immediate visual representation of the formatted content.
How can the maximum number of characters be limited in the Syncfusion React Markdown Editor?
- The Markdown Editor allows the maximum number of characters in content to be restricted. Limiting the character count can be useful for scenarios where content length needs to be controlled. The limit can be set using the maxLength property.
Does the Syncfusion React Markdown Editor support WYSIWYG editing?
- Yes. The Syncfusion React Markdown Editor supports both Markdown and WYSIWYG HTML editing. The same API can be used to switch between Markdown and HTML modes.
How do I enable Markdown mode in the Syncfusion React Rich Text Editor?
- To enable Markdown mode, set the editorMode property to ‘Markdown’ when initializing the Rich Text Editor. Here’s an example:
<RichTextEditorComponent editorMode={'Markdown'}>
</RichTextEditorComponent>
Can Markdown syntax be customized in the Syncfusion React Markdown Editor?
- Yes. The React Markdown Editor allows customization of the default Markdown syntax. The default syntax can be overridden by configuring the RichTextEditorMarkdownOptions properties.
Which applications is the Syncfusion React Markdown Editor suitable for?
- The Syncfusion React Markdown Editor provides Markdown and HTML editing, configurable live HTML preview through the Syncfusion MarkdownConverter, Markdown formatting, customizable Markdown syntax, and a customizable toolbar, making it suitable for blogs, documentation tools, CMS platforms, and note-taking applications.
Is the Syncfusion React Markdown Editor a library for editing Markdown content?
- If you’re looking for a React Markdown library for creating and editing Markdown content, the Syncfusion React Markdown Editor provides Markdown editing through the Rich Text Editor component. Markdown formatting, toolbar customization, image insertion, tables, and links are supported, along with configurable live HTML preview through the Syncfusion MarkdownConverter. The Rich Text Editor can be configured for either Markdown or HTML editing.
