Blazor Rich Text Editor Documentation Overview

Introduction to Syncfusion Blazor Rich Text Editor

The Blazor Rich Text Editor is a powerful and feature-rich UI component designed for creating and editing rich text content with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including HTML and Markdown editing modes, extensive formatting tools, image, audio, and video embedding, table manipulation, and import-export across HTML, RTF, PDF, and Word formats. Built for scalability, it enables developers to create responsive content editing experiences for emails, CMS editors, and form-heavy applications with ease.

Common use cases

The Blazor Rich Text Editor is ideal for a wide range of business scenarios:

Use Case Description Key Features
Email & Messaging Composers Draft formatted emails with rich text, images, and links Toolbar, Insert Image, Link Manipulation
CMS Content Authoring Create and edit articles, blogs, and landing pages Editor Modes, Formatting, Import/Export
Customer Support Tickets Capture detailed issue descriptions with attachments Image Upload, Form Validation
Document Management Import, edit, and export documents in standard formats Import/Export, Paste Cleanup
Mail Merge Workflows Populate templates with dynamic fields for bulk sending Mail Merge Integration, Mentions
Collaborative Notes & Wikis Build internal knowledge bases with rich formatting Code Blocks, Tables, Slash Commands

Editor modes & layouts

The Blazor Rich Text Editor supports multiple editing modes and layout configurations to fit different application needs:

Feature Purpose Key Benefit
HTML editor Edit content as rich HTML with a live WYSIWYG view Familiar word processor experience
Markdown editor Edit content in Markdown syntax Lightweight, developer-friendly writing
Iframe Editor Isolate the content area in an iframe Contained, secure editing
Inline Editor Edit content in place without a framed container Natural in context editing
Resizable Editor Drag to resize the editor in real time Custom dimensions on demand
Configuring the toolbar position Place the toolbar at the top or bottom Flexible layouts

Toolbars & tools

The toolbar is the central hub of the editing experience and is fully configurable:

Toolbar types

Feature Purpose Key Benefit
Expand toolbar Show all tools in rows that wrap All tools at one click
Multi-row toolbar Fixed tools arranged across multiple rows Predictable tool layout
Scrollable toolbar Scroll horizontally to reach all tools Compact width usage
Popup toolbar Show tools in a popup on demand Minimal footprint
Configuring a Floating toolbar Dock the toolbar on scroll Persistent tool access

Quick toolbars

Feature Purpose Key Benefit
Image quick toolbar Show image actions on selection Fast image edits
Link quick toolbar Show link actions on selection Fast link edits
Table quick toolbar Show table actions on selection Fast table edits
Text quick toolbar Show text actions on selection Fast formatting

Formatting & content tools

Feature Purpose Key Benefit
Built-in Tools Use the complete set of predefined editing tools Out-of-the-box productivity
Text Formatting Apply headings, paragraphs, quotes, and lists Structured documents
Font Styling Control font family, size, color, and background Branded content
Format Painter Copy formatting from one selection to another Efficient formatting
Custom Toolbar Items Add application specific tools Tailored experiences
Code Blocks Insert highlighted code snippets Technical documentation
Fullscreen Mode Expand the editor to the full screen Distraction-free writing
Execute Command Run editor commands programmatically Automation-friendly API

Rich media content

The Blazor Rich Text Editor enables comprehensive media embedding so content can include rich assets:

Feature Purpose Key Benefit
Insert Images Upload and embed images in content Visual content
Insert audio Embed audio players in content Audio content and notes
Insert video Embed video players in content Rich media storytelling
Links Insert and edit hyperlinks Connected content
Table Manipulation Create and edit data tables Structured data in documents
Upload options Configure how images upload to servers Controlled asset handling

Productivity integrations

The Blazor Rich Text Editor integrates with supporting features that speed up content creation:

Feature Purpose Key Benefit
Mentions Tag users with @mention suggestions Person-aware content
Enabling the slash menu Insert blocks by typing (/) Rapid block insertion
Mail Merge Merge dynamic fields into templates Bulk personalized content
Paste cleanup settings Control how pasted content is sanitized Clean, consistent content
Clipboard Clean-up Sanitize content copied from external sources Safe cross-app pasting
Undo and Redo Configure undo/redo history behavior Forgiving editing
Enter key customization Control line and paragraph breaks Predictable typing flow

Content management

The Blazor Rich Text Editor provides comprehensive capabilities for controlling, validating, and moving content:

Value handling

Feature Purpose Key Benefit
Auto-save Persist edited content automatically No lost work
Get editor content Retrieve formatted content programmatically Integration ready
Character count and limit enforcement Display and cap content length Bounded input
Large HTML Content Processing Handle very large content efficiently Performance at scale

Import & Export

Feature Purpose Key Benefit
Import to HTML file Load HTML content into the editor Web content reuse
Import to RTF file Load RTF documents Desktop document reuse
Importing content from Microsoft Word Load Word documents Office interop
Export to RTF file Produce RTF documents Word-compatible sharing
Export to HTML file Produce HTML files Web publishing
Export to PDF / Microsoft Word Produce PDF and Word documents Professional document output

Validation & access control

Feature Purpose Key Benefit
Forms Support Use the editor inside Blazor EditForms with validation Integrated form workflows
Validation attributes Enforce content rules with Data Annotations Required content enforcement
Validating attributes and Validating HTML elements Sanitize content for XHTML safety Secure output
Read-only mode Display content without editing Safe display mode

Globalization & accessibility

The Blazor Rich Text Editor is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:

Performance & advanced features

The Blazor Rich Text Editor includes sophisticated capabilities designed for complex enterprise scenarios:

Feature Purpose Use Case Key Benefit
WebAssembly Performance Rendering optimization guidance Optimized WASM responsiveness Faster Blazor WASM apps
Style and Appearance Style placeholder, content area, and borders Themed editors Complete visual control
Style Encapsulation Control how styles apply to editor content CSS isolation in Blazor Predictable styling
HttpClientInstance Reuse a shared HttpClient for server actions Upload and save operations Efficient networking
Events Handle toolbar, dialog, upload, and focus events Custom workflows Deep integration points
Render Blazor Rich Text Editor in Dialog Host the editor inside a Dialog component Modal editing flows Flexible hosting

System requirements

The Blazor Rich Text Editor works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & Resources