Syncfusion.Blazor.RichTextEditor 33.1.44

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Syncfusion.Blazor.RichTextEditor --version 33.1.44
                    


                    

                
NuGet\Install-Package Syncfusion.Blazor.RichTextEditor -Version 33.1.44
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Syncfusion.Blazor.RichTextEditor" Version="33.1.44" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Syncfusion.Blazor.RichTextEditor" Version="33.1.44" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Syncfusion.Blazor.RichTextEditor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Syncfusion.Blazor.RichTextEditor --version 33.1.44
                    


                    

                
#r "nuget: Syncfusion.Blazor.RichTextEditor, 33.1.44"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Syncfusion.Blazor.RichTextEditor@33.1.44
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Syncfusion.Blazor.RichTextEditor&version=33.1.44
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Syncfusion.Blazor.RichTextEditor&version=33.1.44
                    


                            Install as a Cake Tool

Syncfusion® Blazor Rich Text Editor

Feature-rich WYSIWYG HTML and Markdown editor for creating and formatting rich content in Blazor applications.

Blazor RichTextEditor

Overview

The Blazor Rich Text Editor is a powerful WYSIWYG editor for creating blogs, forum posts, notes, comments, messaging applications, and support tickets. It provides comprehensive formatting tools, supports both HTML and Markdown modes, and returns valid markup for seamless content integration.

Key Features

  • Dual editing modes - HTML and Markdown (MD) editing with mode switching
  • Rich formatting tools - Text formatting, fonts, colors, alignment, and styles
  • Insert capabilities - Images, links, tables, lists, code blocks, and media
  • Toolbar customization - Configurable toolbar with custom tools and commands
  • Table support - Create and edit tables with cell merging and formatting
  • Image management - Upload, resize, and position images with drag-and-drop
  • Link insertion - Insert hyperlinks and email links with validation
  • Paste cleanup - Smart paste from Word and other sources with formatting cleanup
  • Undo/Redo - Full undo and redo support with history management
  • Full-screen mode - Distraction-free editing experience
  • Character and word count - Track content length in real-time
  • Import/Export - Import Word documents and export content
  • Responsive design - Touch-friendly interface for mobile devices
  • Inline and iframe modes - Flexible rendering options
  • Custom formatting - Apply custom CSS classes and inline styles
  • Accessibility - WCAG 2.2 compliant with keyboard shortcuts and screen reader support
  • RTL support - Right-to-left language compatibility
  • Themes - Multiple built-in themes and custom styling

Supported Platforms

  • Blazor Server (.NET 8.0 and later)
  • Blazor WebAssembly (.NET 8.0 and later)
  • Blazor Hybrid (.NET 8.0 and later)

See System Requirements for detailed compatibility information.

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.RichTextEditor

Package Manager

Install-Package Syncfusion.Blazor.RichTextEditor

Getting Started

1. Register Syncfusion® Blazor Service

Add the Syncfusion® Blazor service in your Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Stylesheet and Script References

For Blazor Web App or Blazor Server, add the references in Components/App.razor or App.razor: For Blazor WebAssembly, add the references in wwwroot/index.html:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

3. Add Rich Text Editor Component

Create a rich text editor:

@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor Placeholder="Start Typing...">
    <RichTextEditorToolbarSettings Items="@tools" />
</SfRichTextEditor>
@code {
    private List<ToolbarItemModel> tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };
}

4. Custom Toolbar Configuration

Configure toolbar with specific tools:

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @bind-Value="@content">
    <RichTextEditorToolbarSettings Items="@tools" />
</SfRichTextEditor>

@code {
    private string content = "<p>Start typing...</p>";
    
    private List<ToolbarItemModel> tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };
}

5. Markdown Mode

Enable Markdown editing:

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@markdownContent">
    <RichTextEditorToolbarSettings Items="@markdownTools" />
</SfRichTextEditor>

@code {
    private string markdownContent = "# Hello Markdown\n\nThis is **bold** and this is *italic*.";
    
    private List<ToolbarItemModel> markdownTools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image }
    };
}

Documentation

Support

License

This is a commercial product and requires a paid license for use.

About Syncfusion®

Syncfusion® is a provider of enterprise software components and frameworks. We offer 1600+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Flutter and JavaScript), and desktop development (WinForms, WPF, WinUI, .NET MAUI, and Flutter).

sales@syncfusion.com | www.syncfusion.com | 1-888-9-DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (8)

Showing the top 5 NuGet packages that depend on Syncfusion.Blazor.RichTextEditor:

Package Downloads
Syncfusion.Blazor.InPlaceEditor

Provides a Syncfusion® Blazor In-Place Editor component for inline and popup editing scenarios. Supports multiple input types including TextBox, Dropdown, DatePicker, and Rich Text Editor. Optimized for seamless integration in both Blazor Server and Blazor WebAssembly applications.
Syncfusion.Blazor.Gantt

This package contains the Syncfusion® Blazor Gantt component.
CyberFrameword10_V2

CyberFrameword10_V2
Recrovit.RecroGridFramework.Client.Blazor.SyncfusionUI

RecroGrid Framework Blazor UI.
IdentitySuite

A ready-to-use OpenId Connect Server based on Openiddict with Microsoft Identity and a comprehensive management shell.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Syncfusion.Blazor.RichTextEditor:

Repository Stars
bhrugen/TangyBlazor
Version Downloads Last Updated
33.1.44 1,660 3/16/2026
32.2.9 2,106 3/9/2026
32.2.8 3,255 3/2/2026
32.2.7 2,957 2/23/2026
32.2.5 2,688 2/16/2026
32.2.4 2,148 2/10/2026
32.2.3 3,790 2/5/2026
32.1.25 4,019 1/26/2026
32.1.24 4,056 1/19/2026
32.1.23 5,010 1/13/2026
32.1.22 3,731 1/5/2026
32.1.21 4,599 12/29/2025
32.1.20 2,645 12/23/2025
32.1.19 7,058 12/16/2025
31.2.18 3,194 12/8/2025
31.2.16 9,956 12/1/2025
31.2.15 4,754 11/25/2025
31.2.12 4,349 11/18/2025
31.2.10 1,912 11/12/2025
31.2.5 6,071 11/3/2025
Loading failed

https://blazor.syncfusion.com/documentation/release-notes/33.1.44?type=all&utm_source=nuget&utm_medium=listing