syncfusion-maui-rich-text-editor

$npx mdskill add syncfusion/maui-ui-components-skills/syncfusion-maui-rich-text-editor

Implements WYSIWYG rich text editing with formatting, images, tables, and hyperlinks.

  • Enables formatted text input for email composers, blog editors, and messaging apps.
  • Depends on Syncfusion .NET MAUI Rich Text Editor (SfRichTextEditor) NuGet package.
  • Configures toolbar, formatting options, and HTML output based on application needs.
  • Returns valid HTML markup for storage or display in web views.

SKILL.md

.github/skills/syncfusion-maui-rich-text-editorView on GitHub ↗
---
name: syncfusion-maui-rich-text-editor
description: Implements Syncfusion .NET MAUI Rich Text Editor (SfRichTextEditor) for WYSIWYG text editing with formatting, images, tables, and hyperlinks. Use when building rich text editors, document editors, email composers, blog post editors, or messaging apps with formatting. Covers text styling, toolbar formatting, images, tables, hyperlinks, and HTML output.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
---

# Implementing Syncfusion .NET MAUI Rich Text Editors

The Syncfusion .NET MAUI Rich Text Editor (SfRichTextEditor) provides a powerful WYSIWYG editing experience for creating richly formatted text content. It offers comprehensive formatting tools, customizable toolbar, image and table insertion, hyperlink management, and returns valid HTML markup. This skill guides you through implementing rich text editors for messaging apps, email composers, blog editors, note-taking applications, and any scenario requiring formatted text input.

## When to Use This Skill

Use this skill when you need to:

- **Implement WYSIWYG text editors** in .NET MAUI applications with formatting capabilities
- **Create email composers or messaging apps** that support rich text formatting (bold, italic, lists, etc.)
- **Build blog editors, CMS interfaces, or forum post editors** with HTML output
- **Add note-taking or document editing features** with formatting toolbar
- **Enable feedback forms, review sections, or comment areas** with rich content support
- **Implement text editors with images, tables, and hyperlinks** embedded in content
- **Customize toolbar items and appearance** for specific editing scenarios
- **Handle formatted text programmatically** with methods for bold, italic, alignment, colors, etc.
- **Manage user interactions** through events (text changes, hyperlink clicks, format changes)
- **Apply advanced features** like auto-sizing or Liquid Glass Effect for modern UI

## Component Overview

- **WYSIWYG Editing** - What-you-see-is-what-you-get interface for formatted text
- **Comprehensive Formatting** - Bold, italic, underline, strikethrough, fonts, colors, alignment, lists, indentation
- **Customizable Toolbar** - Rich, configurable toolbar with show/hide/custom items
- **Images & Tables** - Seamless insertion and formatting of images and tables
- **Hyperlink Support** - Insert, edit, and remove hyperlinks with click events
- **Programmatic Control** - Methods for applying formatting, managing content, and controlling editor state
- **Events** - FormatChanged, TextChanged, HyperlinkClicked, Focused/Unfocused for reactive UI
- **HTML Output** - Returns valid HTML markup for storage or transmission
- **AutoSize** - Dynamic height adjustment based on content
- **Liquid Glass Effect** - Modern Cupertino-style visual effects (iOS/macOS)

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installing the Syncfusion.Maui.RichTextEditor NuGet package
- Adding SfRichTextEditor to XAML and C#
- Namespace registration and basic setup
- Enabling the toolbar (ShowToolbar property)
- Customizing toolbar items with ToolbarItems collection
- First working example with formatted text

### Toolbar Configuration
📄 **Read:** [references/toolbar.md](references/toolbar.md)
- Positioning toolbar (top or bottom) with ToolbarPosition property
- Available toolbar items (Bold, Italic, FontFamily, FontSize, lists, images, tables, etc.)
- Adding or removing specific toolbar items
- Separator items for visual grouping
- Inline link tooltip functionality
- Customizing toolbar appearance with ToolbarSettings
- Background color, text color, separator styling
- Scroll button visibility and icon customization
- Platform-specific toolbar behaviors

### Formatting and Customization
📄 **Read:** [references/formatting-and-customization.md](references/formatting-and-customization.md)
- Customizing editor appearance (background, border, word wrap)
- Programmatic formatting methods (ToggleBold, ToggleItalic, ToggleUnderline, etc.)
- Character formatting (bold, italic, underline, strikethrough, subscript, superscript)
- List formatting (bullet and numbered lists)
- Text alignment (left, right, center, justify)
- Applying font family, font size, text color, and highlight color
- Paragraph formatting and heading styles
- Indentation control (increase/decrease)
- Default text styles for new content

### Content Management
📄 **Read:** [references/content-management.md](references/content-management.md)
- Setting plain text with Text property
- Setting HTML formatted text with HtmlText property
- Getting selected HTML content (GetSelectedText method)
- Configuring placeholder text and styling
- Programmatic cursor control (MoveCursorToStart, MoveCursorToEnd)
- Focus and unfocus methods
- Undo and redo functionality
- Content manipulation patterns and best practices

### Images and Tables
📄 **Read:** [references/images-and-tables.md](references/images-and-tables.md)
- Image insertion overview and ImageRequested event
- Inserting images from gallery, file picker, stream, or URI
- RichTextEditorImageSource configuration (format, size, source)
- Platform-specific permissions (MacCatalyst file access)
- Table insertion from toolbar with row/column dialog
- Programmatic table insertion with InsertTable method
- Specifying table dimensions
- Examples for both images and tables

### Hyperlinks
📄 **Read:** [references/hyperlinks.md](references/hyperlinks.md)
- Inserting hyperlinks with InsertHyperlink method
- Display text and URL parameters
- Editing existing hyperlinks with EditHyperlink method
- Removing hyperlinks while preserving text (RemoveHyperlink)
- Link quick tooltip behavior
- HyperlinkClicked event for handling link interactions
- Extracting link URL and display text from events
- Use cases and patterns for hyperlink management

### Events and Interactions
📄 **Read:** [references/events-and-interactions.md](references/events-and-interactions.md)
- FormatChanged event for tracking formatting state
- TextChanged event with old and new HTML content
- HyperlinkClicked event with URL and display text
- Focused and Unfocused events for input state
- Event subscription patterns in XAML and C#
- Using events for contextual UI updates
- Combining events with programmatic formatting
- Real-world event handling scenarios

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- AutoSize functionality with EnableAutoSize property
- Dynamic height adjustment based on content
- Layout considerations for auto-sizing editors
- Liquid Glass Effect with EnableLiquidGlassEffect (iOS/macOS)
- Platform requirements (.NET 10, iOS/macOS 26+)
- Cupertino theme integration and transparent backgrounds
- Customizing toolbar and editor corner radius
- Theme keys for visual customization
- Combining advanced features for modern UI

More from syncfusion/maui-ui-components-skills

SkillDescription
syncfusion-maui-accordionImplements Syncfusion .NET MAUI Accordion (SfAccordion) - a vertically collapsible panel with stacked headers for expanding/collapsing content. Use when working with accordions, collapsible panels, expandable lists, employee lists with details, or FAQ sections in .NET MAUI applications. Covers AccordionItem configuration, expand modes, and grouped content display.
syncfusion-maui-ai-assistviewImplements Syncfusion .NET MAUI AI AssistView (SfAIAssistView) for AI-powered interactive chat interfaces. Use when working with AI chat interfaces, AI AssistView, SfAIAssistView, conversational UI, or chat with AI responses. Covers integrating AI services, creating chat UIs, implementing conversation flows, managing AI requests/responses, and displaying AI suggestions.
syncfusion-maui-autocompleteImplements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.
syncfusion-maui-avatar-viewImplements Syncfusion .NET MAUI Avatar View (SfAvatarView) for displaying user profile pictures, initials, or group avatars. Use when working with avatar views, profile pictures, user images, initials display, profile icons, or contact images. Ideal for implementing user profile displays, contact lists, chat interfaces, or social feeds.
syncfusion-maui-backdropImplements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.
syncfusion-maui-badge-viewImplements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
syncfusion-maui-barcode-generatorImplements Syncfusion .NET MAUI Barcode Generator (SfBarcodeGenerator) for generating machine-readable barcodes. Use when working with barcodes, barcode generation, QR codes, data matrix, EAN codes, UPC codes, Code128, or Code39. This skill covers both one-dimensional (linear) and two-dimensional (matrix) barcode symbologies with extensive customization options.
syncfusion-maui-busy-indicatorImplements Syncfusion .NET MAUI Busy Indicator (SfBusyIndicator) for showing loading states, data processing, and app activity indicators. Use when displaying loading indicators, busy animations, activity spinners, or processing feedback in .NET MAUI apps. Covers busy indicator setup, animations, and visual feedback during long-running operations.
syncfusion-maui-buttonImplements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.
syncfusion-maui-calendarImplements and customize Syncfusion .NET MAUI Calendar (SfCalendar) control. Use when implementing calendar functionality, date selection (single, multiple, range), or calendar views (month, year, decade, century). Covers date restrictions (min/max dates, EnablePastDates, SelectableDayPredicate), calendar customization, events (ViewChanged, SelectionChanged, Tapped), and header/footer customization.