Blazor Rich Text Editor Example - IFrame Mode
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 complete feature set of the Rich Text Editor, including all available tools and functionalities in iframe mode.
The Blazor Rich Text Editor supports iframe editing with customized iframe attributes. Iframe editing can be enabled by setting the Enable property of RichTextEditorIFrameSettings.