TL;DR: The Blazor Rich Text Editor gets a major upgrade in the 2025 Volume 3 release! Discover new features like quick table editing, drag-and-drop Word file import, smarter autosave with DOM change detection, and real-time text selection tracking, all designed to boost performance, usability, and developer flexibility.
The Blazor Rich Text Editor just got a major upgrade! If you’re crafting rich content experiences in Blazor, this update is for you . Packed with smart editing features, performance boosts, and a smoother user experience, the 2025 Volume 3 release is designed to help developers build faster, cleaner, and more interactive content workflows.
Here’s a quick look at the standout features in this release.
Quick insert for table rows and columns
Table editing is now faster and more interactive than ever. When users hover near the edges of a table, a + icon appears, allowing them to insert rows or columns instantly with a single click. This eliminates the need to open context menus or use toolbar buttons for basic table modifications.
Key benefits:
- Faster table editing: Add rows or columns without breaking editing flow.
- Improved usability: Visual cues make the feature discoverable and intuitive.
- Reduces clicks: No need to navigate menus for simple table changes.
Want to see it in action? Explore the demo
Restructured source code view
The source code view has been redesigned to offer a cleaner and more readable layout. HTML content is now displayed with consistent indentation and structured formatting, making it easier for users to inspect and edit the underlying markup.
Key benefits:
- Improved readability: Clean indentation helps users understand the structure.
- Better editing experience: Easier to locate and modify specific tags or attributes.
- Reduces errors: Clear formatting helps prevent mistakes during manual code edits.
Word file import with drag and drop
Users can import .docx files directly into the text editor using a simple drag-and-drop interface. This enhancement simplifies the process of bringing external content into your application, making it especially useful for users who frequently work with structured documents.
You can now control the size of imported Word files to prevent performance issues. If a file exceeds the limit, the editor displays a clear message, keeping the experience smooth and predictable.
This feature enforces the maximum file size limit to ensure uploads remain within allowed boundaries.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorImportWord MaxFileSize="50000" />
</SfRichTextEditor>
Key benefits:
- Streamlined workflow: Quickly bring Word content into the editor.
- User-friendly interface: Drag-and-drop support simplifies the import process.
- Robust validation: Prevents performance issues with large files and provides clear error messages.
Experience the feature live: Explore the demo
Save interval optimization with smarter change detection
In this release, the Blazor WYSIWYG Editor introduces a more intelligent way to detect content changes using a browser-native mechanism. Previously, the editor relied on fixed time intervals or manual triggers to initiate save operations, which could result in unnecessary processing or missed updates during rapid editing.
Now, the editor listens for real-time DOM changes such as text input, formatting updates, or element insertions and responds only when actual modifications occur. This leads to a more efficient and responsive autosave experience.
This enhancement is powered by the DOM MutationObserver API and works in conjunction with the AutoSaveOnIdle property.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor
ID="AutoSave"
SaveInterval="saveInterval"
AutoSaveOnIdle="true"
Value="@Value">
<p>Type or edit the content to be saved automatically in the editor</p>
<RichTextEditorEvents ValueChange="UpdateStatus" />
</SfRichTextEditor>
@code {
private string Value { get; set; } = "<p>Start to type a content to save</p>";
private int saveInterval { get; set; } = 5000;
private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
{
// Place the codes here, which save the Rich Text Editor value into database.
this.Value = args.Value;
}
}
Key benefits:
- Improved performance: Reduces CPU usage during frequent edits.
- Reliable autosave: Ensures changes are captured accurately.
- Scalable: Ideal for large documents or high-frequency editing environments.
See how it works in real time: Explore the demo
Detect and react to text selection changes
The Blazor HTML Editor now supports detecting changes in text selection, allowing developers to respond when users highlight or modify content. This capability enables more dynamic and interactive editing experiences, such as showing context-aware toolbars or triggering custom actions.
This functionality is triggered when the selection within the component changes.
With this capability, developers can implement contextual toolbars, inline formatting options, custom popups, or analytics tracking based on user selection. It’s a powerful tool for enhancing the editor’s responsiveness and tailoring the UI to user behavior.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents SelectionChanged="@SelectionChanged" />
</SfRichTextEditor>
@code {
private void SelectionChanged(SelectionChangedEventArgs args)
{
// Capture the selected text and selection details
}
}
Key benefits:
- Real-time interactivity: React to user actions instantly.
- Custom UI behavior: Tailor the editor experience based on selection.
- Enhanced extensibility: Ideal for building advanced editing features.
Check out the interactive demo here: Explore the demo
Conclusion
Ready to build smarter content editing experiences? The 2025 Volume 3 update for the Blazor Rich Text Editor delivers powerful new features and thoughtful enhancements that improve both user experience and developer flexibility.
From smarter table editing to seamless Word file import and performance optimizations, this release is designed to help you build better content editing solutions.
For timely updates on the release, we invite you to stay connected through our official YouTube, Twitter, Facebook, and LinkedIn channels. You can also share your insights or suggestions in the comments section below.
You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!
Related Blogs
- Create Visually Rich Content Easily with Blazor Rich Text Editor! No HTML
- Discover the Best Blazor Rich Text Editor for Effortless Content Creation
- Step-by-Step Guide: Adding Mail Merge to Blazor Rich Text Editor
- Seamlessly Import and Export in Blazor Rich Text Editor
This article was originally published at Syncfusion.com.
Top comments (0)