DEV Community

Cover image for Blazor Rich Text Editor Gets Smarter – Explore What’s New in 2025 Volume 3
Zahra Sandra Nasaka for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Blazor Rich Text Editor Gets Smarter – Explore What’s New in 2025 Volume 3

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.

Quickly add rows and columns in the Blazor Rich Text Editor


Quickly add rows and columns in the Blazor Rich Text Editor

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.

Restructured source code view in Blazor Rich Text Editor


Restructured source code view in Blazor Rich Text Editor

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>
Enter fullscreen mode Exit fullscreen mode

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.

Word file import in Blazor Rich Text Editor


Word file import in Blazor Rich Text Editor

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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

This article was originally published at Syncfusion.com.

Top comments (0)