Blazor Rich Text Editor Example - Overview
Welcome to the Syncfusion Rich Text Editor
The Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Do you know the key features of the editor?
- Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.
- Inline styles include bold, italic, underline, strikethrough, hyperlinks,
InlineCodeand more. - The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.
- Integration with Syncfusion Mention control lets users tag other users. To learn more, check out the documentation and demos.
- Paste from MS Word - helps to reduce the effort while converting the Microsoft Word content to HTML format with format and styles. To learn more, check out the documentation here.
- Other features: placeholder text, character count, form validation, enter key configuration, resizable editor, IFrame rendering, tooltip, source code view, RTL mode, persistence, HTML Sanitizer, autosave, and more.
Auto Formatting - Write Faster, Format Smarter
Boost your productivity with Auto Formatting, a powerful feature that lets you style content instantly using simple, familiar Markdown-style shortcuts. No need to reach for the toolbar - just type and watch your content transform in real time.
Effortless Formatting Shortcuts
| Action | Shortcut |
|---|---|
| Bulleted List | Start a line with * or - followed by a space |
| Numbered List | Start a line with 1. or i. followed by a space |
| Checklist / To-do | Start a line with [ ] or [x] followed by a space |
| Headings (H1 to H6) | Use #, ##, ###, ####, #####, or ###### followed by a space |
| Block Quote | Start a line with > followed by a space |
| Code Block | Start a line with ``` followed by a space |
| Horizontal Line | Start a line with --- followed by a space |
| Bold Text | Type **text** or __text__ |
| Italic Text | Type *text* or _text_ |
| Inline Code | Type `text` |
| Strikethrough | Type ~~text~~ |
Elevating Your Content with Images
Images can be added to the editor by pasting or dragging into the editing area, using the toolbar to insert one as a URL, or uploading directly from the File Browser. Easily manage your images on the server by configuring the insertImageSettings to upload, save, or remove them.
Easily access Audio, Image, Link, Video, and Table operations through the quick toolbar by right-clicking on the corresponding element with your mouse.
Or drop files here
Or drop files here
Or drop files here
This sample demonstrates the comprehensive feature set of the Rich Text Editor, showcasing all available tools and functionalities for advanced content creation and editing.
This sample includes the Mention control integration, which displays a list of items that users can select or tag from the suggested list, enhancing collaboration and reference capabilities.
The quick toolbar provides a convenient way to customize Image, Video, Audio, Table, and Link elements. Simply right-click on the desired element, utilizing the ShowOnRightClick property, and the quick toolbar will appear, providing contextual customization options.
Toolbar Features and Capabilities:
The editor's comprehensive toolbar includes the following formatting and editing tools:
Lists- NumberFormat list and BulletFormat list types for organizing content.Links- Insert hyperlinks into the editor for quick access to related information.Image- Insert and manage images within the content.Table- Insert and manage tables for structured data presentation.Alignment- Align content with left, center, and right margins for proper layout.Undo/Redo- Perform undo and redo operations to manage content changes.Indent/Outdent- Increase or decrease the indent level of content for hierarchical structure.Font- Apply styling to text including font family, size, foreground color, and background color.Lower/Upper Case- Change the casing of selected text between lowercase and uppercase.Subscript/Superscript- Format selected text as subscript (lower) or superscript (upper) for mathematical or scientific notation.FullScreen- Expand the editor to the maximum width and height of the browser window for immersive editing.Format- Format sentences in different ways such as heading levels, quotation blocks, and code snippets.Styles- Apply inline styles to selected content including bold, italic, underline, and strikethrough.Insert Code- Apply code format to selected content with syntax highlighting using the 'pre' tag and custom styling.Audio- Insert and manage audio content within the editor.Video- Insert and manage video content for multimedia-rich documents.Inline Code- Format selected text as inline code, highlighting code snippets within the text flow.Slash Menu- Apply formats and open dialogs by typing "/" in the editor for quick command access.Format Painter- Copy formats from one element and apply them to other content without manual reformatting, saving time and effort.Horizontal Line- Insert a horizontal line into the editor to visually separate and organize sections of content.Code Block- Insert and display code snippets in a preformatted block for easy presentation of programming content.LineHeight- Apply spacing between lines of text to improve readability and visual formatting of documents.