Syncfusion Blazor Smart Rich Text Editor

Syncfusion Blazor Smart Rich Text Editor

A comprehensive skill for implementing and configuring the Syncfusion Blazor Smart Rich Text Editor (SfSmartRichTextEditor) — an AI-powered WYSIWYG editor that extends the full-featured SfRichTextEditor with intelligent content assistance. Supports OpenAI, Azure OpenAI, Ollama, and custom AI backends. Provides a Smart Action dropdown toolbar, an AI query dialog (Alt+Enter), and a fully customizable AI Assistant popup via AssistViewSettings.

When to Use This Skill

Use this skill when the user needs to:

• Install and set up SfSmartRichTextEditor in a Blazor Server or Web App project
• Configure an AI backend: OpenAI, Azure OpenAI, Ollama, or a custom IChatClient
• Register IChatInferenceService / SyncfusionAIService in Program.cs
• Use the Smart Action dropdown toolbar for AI commands (summarize, expand, adjust tone)
• Add Name = "AI Commands" and Name = "AI Query" to ToolbarItemModel list to render AI toolbar buttons
• Open the AI Query dialog with Alt+Enter for free-form AI prompts
• Configure AssistViewSettings: Commands, Suggestions, Prompts, Placeholder, MaxPromptHistory, popup sizing
• Customize the AI Assistant popup (BannerTemplate, HeaderToolbarSettings, PromptToolbarSettings, ResponseToolbarSettings)
• Handle AI events: AIPromptRequested, AIResponseStopped, AIToolbarItemClicked, AIPopupOpening, AIPopupClosing
• Use AI Assistant methods: ShowAIPopupAsync, HideAIPopupAsync, ExecuteAIPromptAsync, UpdateAIResponseAsync, GetAIPromptHistoryAsync, ClearAIPromptHistoryAsync
• Style or animate the AI Assistant popup (.e-rte-aiquery-dialog)
• Use all inherited SfRichTextEditor features: toolbar, images, tables, events, methods, data binding, paste cleanup, import/export, accessibility

Quick Start

1. Install NuGet packages:

dotnet add package Syncfusion.Blazor.SmartRichTextEditor
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI

2. Register services in Program.cs:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_API_KEY";
string openAIModel = "gpt-4";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

3. Add to _Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

4. Add CSS/JS in App.razor (Server) or index.html (WASM):

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

5. Add the component:

@rendermode InteractiveServer

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Select text and use the Smart Action toolbar, or press Alt+Enter to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

Navigation Guide

Getting Started & AI Service Setup

📄 Read: references/getting-started.md

• NuGet installation: Syncfusion.Blazor.SmartRichTextEditor + Syncfusion.Blazor.Themes
• Full setup for Blazor Server App (Visual Studio and VS Code) and Blazor Web App (.NET 8+)
• OpenAI, Azure OpenAI, Ollama, and custom IChatClient configuration in Program.cs
• AddInteractiveServerComponents() registration pattern for Web App
• CSS theme and JS script references (.NET 6 through .NET 10)
• Adding the component with AssistViewSettings
• Content retrieval methods (GetTextAsync, GetCharCountAsync)
• Common setup issues and fixes

AI Backend Configuration

📄 Read: references/ai-backends.md

• OpenAI: API key, supported models (gpt-4-turbo, gpt-4, gpt-3.5-turbo), OpenAIClient setup, environment variables and User Secrets
• Azure OpenAI: resource deployment, AzureOpenAIClient + ApiKeyCredential, appsettings.json config, Managed Identity (production recommended), HIPAA/SOC 2 compliance, monitoring, cost optimization
• Ollama: local model installation (mistral, llama2), OllamaApiClient + OllamaSharp NuGet, Docker Compose, GPU acceleration, model recommendations
• Custom IChatClient: implementing IChatClient for internal/proprietary AI, registering in Program.cs, streaming responses, retry logic, error handling, corporate AI API example

AssistViewSettings — Properties

📄 Read: references/assist-view-settings.md

• Commands (List<AICommands>): Smart Action dropdown with nested sub-commands and icon CSS
• PopupMaxHeight / PopupWidth: control popup dimensions (CSS values or pixel numbers)
• Placeholder: placeholder text in the AI prompt textarea
• Prompts (List<AssistViewPrompt>): predefined prompt/response templates loaded into the popup
• Suggestions (List<string>): quick suggestion chips shown in the AI popup
• MaxPromptHistory: maximum conversation entries retained (default: 20)
• BannerTemplate: custom branding/header RenderFragment for the AI popup
• HeaderToolbarSettings / PromptToolbarSettings / ResponseToolbarSettings: toolbar customization with AssistViewToolbarItem

AssistViewSettings — Events

📄 Read: references/ai-events.md

• AIPromptRequested (AssistViewPromptRequestedEventArgs): intercept/modify prompt before AI call; set Cancel=true to prevent; modify Response, PromptSuggestions, ResponseToolbarItems
• AIResponseStopped (ResponseStoppedEventArgs): user clicked "Stop Responding"; provides DataIndex and Prompt
• AIToolbarItemClicked (AssistViewToolbarItemClickedEventArgs): handle custom toolbar button clicks; access Item, DataIndex, Event; set Cancel=true
• AIPopupOpening (BeforeOpenEventArgs): cancel popup opening with args.Cancel = true; access Element reference
• AIPopupClosing (BeforeCloseEventArgs): cancel popup closing; access ClosedBy, IsInteracted, PreventFocus

AssistViewSettings — Methods

📄 Read: references/ai-methods.md

• ShowAIPopupAsync(): open the AI Assistant popup programmatically
• HideAIPopupAsync(): close the AI Assistant popup
• ExecuteAIPromptAsync(string prompt): send a prompt programmatically (as if user typed it)
• UpdateAIResponseAsync(string response, bool isFinalUpdate): stream or inject AI response; set isFinalUpdate=true to hide Stop button
• GetAIPromptHistoryAsync(): retrieve all saved prompts/responses as AssistViewPrompt[] (chronological, limited to MaxPromptHistory)
• ClearAIPromptHistoryAsync(): reset all conversation history
• Complete example combining all six methods with @ref

AI Popup Appearance & CSS

📄 Read: references/ai-appearance.md

• CSS selectors for the AI popup: .e-rte-aiquery-dialog, .e-aiassistview
• Customizing popup background, border, box-shadow
• Targeting .e-view-header, .e-view-content .e-toolbar, .e-footer sub-sections for fine-grained control
• Full custom popup styling example

Toolbar Configuration

📄 Read: references/toolbar.md

• Enabling or disabling the toolbar with RichTextEditorToolbarSettings.Enable
• Toolbar types: Expand, MultiRow, Scrollable, Popup
• Floating toolbar and offset configuration
• Toolbar position (top or bottom)
• Configuring toolbar items with ToolbarItemModel
• Custom toolbar items (template-based)

Built-in Toolbar Tools Reference

📄 Read: references/built-in-tools.md

• Default toolbar items for SfSmartRichTextEditor
• AI-specific toolbar items — Name = "AI Commands" (Smart Action dropdown) and Name = "AI Query" (Ask AI button); must use Name property, NOT ToolbarCommand enum
• Complete list of all ToolbarCommand enum values
• Text formatting, font & styling, alignment, lists, hyperlinks
• Image/table/link quick toolbar item commands using SfSmartRichTextEditor
• Undo/redo, fullscreen, print, source code, preview tools
• Removing or reordering default toolbar items

Text Formatting

📄 Read: references/text-formatting.md

• Bold, italic, underline, strikethrough, subscript, superscript, inline code
• Text alignment (left, center, right, justify)
• Ordered/unordered lists with custom number and bullet styles
• Heading formats (H1–H6, paragraph, blockquote, code)
• Line height configuration
• Horizontal line, format painter, clear format
• Markdown auto-format (inline and block shortcuts)

Images, Video & Audio

📄 Read: references/images-and-media.md

• Image insertion from local machine or URL
• RichTextEditorImageSettings: SaveUrl, Path, AllowedTypes, EnableResize
• Base64 vs server-side upload
• Image quick toolbar configuration
• Video and audio insertion and settings

Tables

📄 Read: references/tables.md

• Creating tables with CreateTable toolbar item
• RichTextEditorTableSettings: width, resize, custom styles
• Table quick toolbar: add/remove rows & columns, merge cells, properties
• Advanced table manipulation (cell selection, split, custom borders)

Editor Modes

📄 Read: references/editor-modes.md

• HTML editor mode (default WYSIWYG)
• Markdown editor mode (EditorMode.Markdown)
• IFrame vs DIV rendering mode
• Source code view toggling

Inline Mode

📄 Read: references/inline-mode.md

• Enabling inline toolbar (InlineMode)
• Inline toolbar display on text selection
• Use cases: comment editors, in-place content editing

Custom Tools & Exec Commands

📄 Read: references/custom-tools.md

• Adding custom toolbar buttons with ToolbarItemModel and templates
• Executing commands programmatically with ExecuteCommandAsync
• Slash commands (/ trigger menu) configuration
• Format painter advanced settings (RichTextEditorFormatPainterSettings)

Events (RTE)

📄 Read: references/events.md

• RichTextEditorEvents child component usage and wiring pattern
• Lifecycle events: Created, Destroyed
• Focus/interaction: Focus, Blur, OnToolbarClick, SelectionChanged
• Content events: ValueChange, BeforePasteCleanup, AfterPasteCleanup
• Toolbar lifecycle: OnActionBegin, OnActionComplete
• Dialog events: OnDialogOpen, DialogOpened, OnDialogClose, DialogClosed
• Quick toolbar: OnQuickToolbarOpen, QuickToolbarOpened, QuickToolbarClosed
• Image events: OnImageSelected, BeforeUploadImage, OnImageUploadSuccess, OnImageUploadFailed, ImageUploadChange, OnImageDrop, ImageDelete
• Media events: FileSelected, FileUploading, FileUploadSuccess, FileUploadFailed, FileUploadChange, OnMediaDrop, MediaDeleted
• Resize events: OnResizeStart, OnResizeStop
• Toolbar status: UpdatedToolbarStatus
• Export events: OnExport, OnExportFailure
• Slash menu: SlashMenuItemSelecting
• Complete EventArgs class reference with all properties

Methods (RTE)

📄 Read: references/methods.md

• Focus & selection: FocusAsync, FocusOutAsync, SaveSelectionAsync, RestoreSelectionAsync, SelectAllAsync, GetSelectionAsync
• Content retrieval: GetTextAsync, GetSelectedHtmlAsync, GetCharCountAsync, GetXhtmlAsync
• Command execution: all ExecuteCommandAsync overloads with typed args (image, link, table, video, audio, code block, format painter)
• Toolbar control: EnableToolbarItem, DisableToolbarItem, RemoveToolbarItem
• Dialog & UI control: ShowDialogAsync, CloseDialogAsync, ShowFullScreenAsync, PrintAsync, RefreshUIAsync, ShowSourceCodeAsync
• Undo/redo: ClearUndoRedoAsync
• Full CommandName, ToolbarCommand, and DialogType enum references

Properties (RTE)

📄 Read: references/properties.md

• Content & value: Value, Placeholder, Readonly, Enabled, MaxLength, ShowCharCount
• Editor behaviour: EditorMode, EnterKey, ShiftEnterKey, EnableTabKey, EnableAutoUrl, EnableMarkdownAutoFormat, EnableClipboardCleanup, EnableXhtml, EnableHtmlEncode, EnableResize
• Appearance & layout: Height, Width, CssClass, ShowTooltip, FloatingToolbarOffset
• IFrame mode: RichTextEditorIFrameSettings child component with Enable, Attributes, Resources
• Security & sanitization: EnableHtmlSanitizer, AdditionalSanitizeAttributes, AdditionalSanitizeTags, DeniedSanitizeSelectors
• Keyboard & shortcuts: KeyConfigure with full ShortcutKeys default bindings table
• Persistence & auto-save: EnablePersistence, SaveInterval, AutoSaveOnIdle
• Undo/redo config: UndoRedoSteps, UndoRedoTimer
• HTTP integration: HttpClientInstance
• Full 38-property summary table

Data Binding & Value Management

📄 Read: references/data-binding.md

• Two-way binding with @bind-Value
• One-way binding and programmatic value updates
• ValueChange event for detecting edits
• Read-only mode (Readonly property)
• Max length enforcement and character count display

Paste Cleanup

📄 Read: references/paste-and-cleanup.md

• RichTextEditorPasteCleanupSettings configuration
• Stripping/keeping specific HTML attributes and styles on paste
• Forcing plain text paste
• Enter key behavior (EnterKey, ShiftEnterKey)
• Undo/redo manager configuration

Import & Export

📄 Read: references/import-export.md

• Importing Word documents into the editor
• Exporting content to Word (.docx) and PDF
• HTTP client configuration for import/export services
• Mail merge with dynamic data
• WebAssembly performance optimizations for large documents

Accessibility & Globalization

📄 Read: references/accessibility-globalization.md

• WCAG 2.1 compliance details
• Keyboard shortcuts and navigation reference
• ARIA roles and screen reader support
• RTL layout (EnableRtl)
• Localization and culture configuration
• XHTML validation

Common Patterns

Basic Smart Rich Text Editor with AI

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start editing...</p>";
}

AI with custom Smart Action commands

<SfSmartRichTextEditor>
    <AssistViewSettings Commands="@MyCommands" Suggestions="@QuickSuggestions" />
</SfSmartRichTextEditor>

@code {
    private List<AICommands> MyCommands = new()
    {
        new AICommands { Text = "Summarize", Prompt = "Summarize this content concisely" },
        new AICommands { Text = "Expand", Prompt = "Add more details and examples" },
        new AICommands
        {
            Text = "Translate",
            Items = new List<AICommands>
            {
                new AICommands { Text = "To French", Prompt = "Translate to French" },
                new AICommands { Text = "To Spanish", Prompt = "Translate to Spanish" }
            }
        }
    };

    private List<string> QuickSuggestions = new()
    {
        "Fix grammar", "Make shorter", "More formal", "Simplify"
    };
}

Programmatic AI popup control

<SfSmartRichTextEditor>
    <AssistViewSettings @ref="AssistViewRef" MaxPromptHistory="10" />
</SfSmartRichTextEditor>
<button @onclick="OpenAI">Open AI</button>
<button @onclick="RunPrompt">Run Prompt</button>

@code {
    private AssistViewSettings AssistViewRef;

    private async Task OpenAI() =>
        await AssistViewRef.ShowAIPopupAsync();

    private async Task RunPrompt() =>
        await AssistViewRef.ExecuteAIPromptAsync("Improve the clarity of this text");
}

Two-way bound editor with character count

<SfSmartRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
    <AssistViewSettings Placeholder="Ask AI for writing help." />
</SfSmartRichTextEditor>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

Read-only display

<SfSmartRichTextEditor Value="@HtmlContent" Readonly="true">
    <RichTextEditorToolbarSettings Enable="false" />
</SfSmartRichTextEditor>

Markdown editor mode

<SfSmartRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
    <AssistViewSettings Placeholder="Ask AI to help with your Markdown content." />
</SfSmartRichTextEditor>

@code {
    private string MarkdownContent { get; set; } = "**Hello** world!";
}

Handle AI prompt event to intercept requests

<SfSmartRichTextEditor>
    <AssistViewSettings AIPromptRequested="OnAIPrompt" />
</SfSmartRichTextEditor>

@code {
    private async Task OnAIPrompt(AssistViewPromptRequestedEventArgs args)
    {
        // Log, validate, or modify args.Prompt before it is sent to AI
        Console.WriteLine($"Prompt: {args.Prompt}");
        // To cancel: args.Cancel = true;
    }
}