Back to Details

syncfusion-maui-rich-text-editor

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion .NET MAUI Rich Text Editors

实现Syncfusion .NET MAUI富文本编辑器

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.
Syncfusion .NET MAUI富文本编辑器（SfRichTextEditor）提供强大的所见即所得（WYSIWYG）编辑体验，用于创建格式丰富的文本内容。它具备全面的格式化工具、可自定义工具栏、图片与表格插入、超链接管理功能，并能返回有效的HTML标记。本技能将指导你在消息应用、邮件撰写器、博客编辑器、笔记应用及任何需要格式化文本输入的场景中实现富文本编辑器。

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
当你需要以下功能时，可使用本技能：
  • 在.NET MAUI应用中实现具备格式化功能的所见即所得（WYSIWYG）文本编辑器
  • 创建支持富文本格式（粗体、斜体、列表等）的邮件撰写器或消息应用
  • 构建带有HTML输出的博客编辑器、CMS界面或论坛帖子编辑器
  • 添加带格式化工具栏的笔记或文档编辑功能
  • 在反馈表单、评论区或审核部分启用富内容支持
  • 实现可嵌入图片、表格和超链接的文本编辑器
  • 针对特定编辑场景自定义工具栏项和外观
  • 通过粗体、斜体、对齐、颜色等方法以编程方式处理格式化文本
  • 通过事件（文本更改、超链接点击、格式更改）管理用户交互
  • 应用高级功能，如自动调整大小或Liquid Glass Effect（液态玻璃效果）以打造现代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)
  • 所见即所得（WYSIWYG）编辑 - 格式化文本的“所见即所得”界面
  • 全面的格式化功能 - 粗体、斜体、下划线、删除线、字体、颜色、对齐方式、列表、缩进
  • 可自定义工具栏 - 丰富的可配置工具栏，支持显示/隐藏/自定义项
  • 图片与表格 - 无缝插入和格式化图片与表格
  • 超链接支持 - 插入、编辑和删除超链接，并支持点击事件
  • 编程控制 - 应用格式、管理内容和控制编辑器状态的方法
  • 事件 - FormatChanged、TextChanged、HyperlinkClicked、Focused/Unfocused，用于响应式UI
  • HTML输出 - 返回有效的HTML标记，用于存储或传输
  • 自动调整大小 - 根据内容动态调整高度
  • Liquid Glass Effect - 现代Cupertino风格视觉效果（iOS/macOS）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: 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
📄 阅读： references/getting-started.md
  • 安装Syncfusion.Maui.RichTextEditor NuGet包
  • 在XAML和C#中添加SfRichTextEditor
  • 命名空间注册和基础设置
  • 启用工具栏（ShowToolbar属性）
  • 使用ToolbarItems集合自定义工具栏项
  • 第一个带格式化文本的工作示例

Toolbar Configuration

工具栏配置

📄 Read: 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
📄 阅读： references/toolbar.md
  • 使用ToolbarPosition属性设置工具栏位置（顶部或底部）
  • 可用工具栏项（粗体、斜体、FontFamily、FontSize、列表、图片、表格等）
  • 添加或移除特定工具栏项
  • 用于视觉分组的分隔符项
  • 内联链接提示功能
  • 使用ToolbarSettings自定义工具栏外观
  • 背景颜色、文本颜色、分隔符样式
  • 滚动按钮可见性和图标自定义
  • 平台特定的工具栏行为

Formatting and Customization

格式化与自定义

📄 Read: 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
📄 阅读： references/formatting-and-customization.md
  • 自定义编辑器外观（背景、边框、自动换行）
  • 编程格式化方法（ToggleBold、ToggleItalic、ToggleUnderline等）
  • 字符格式化（粗体、斜体、下划线、删除线、下标、上标）
  • 列表格式化（项目符号和编号列表）
  • 文本对齐（左对齐、右对齐、居中、两端对齐）
  • 应用字体族、字体大小、文本颜色和高亮颜色
  • 段落格式化和标题样式
  • 缩进控制（增加/减少）
  • 新内容的默认文本样式

Content Management

内容管理

📄 Read: 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
📄 阅读： references/content-management.md
  • 使用Text属性设置纯文本
  • 使用HtmlText属性设置HTML格式化文本
  • 获取选中的HTML内容（GetSelectedText方法）
  • 配置占位符文本和样式
  • 编程控制光标（MoveCursorToStart、MoveCursorToEnd）
  • 聚焦和失焦方法
  • 撤销和重做功能
  • 内容操作模式和最佳实践

Images and Tables

图片与表格

📄 Read: 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
📄 阅读： references/images-and-tables.md
  • 图片插入概述和ImageRequested事件
  • 从图库、文件选择器、流或URI插入图片
  • RichTextEditorImageSource配置（格式、大小、源）
  • 平台特定权限（MacCatalyst文件访问）
  • 通过工具栏插入表格，带行/列对话框
  • 使用InsertTable方法以编程方式插入表格
  • 指定表格尺寸
  • 图片和表格的示例

Hyperlinks

超链接

📄 Read: 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
📄 阅读： references/hyperlinks.md
  • 使用InsertHyperlink方法插入超链接
  • 显示文本和URL参数
  • 使用EditHyperlink方法编辑现有超链接
  • 移除超链接同时保留文本（RemoveHyperlink）
  • 链接快速提示行为
  • HyperlinkClicked事件，用于处理链接交互
  • 从事件中提取链接URL和显示文本
  • 超链接管理的用例和模式

Events and Interactions

事件与交互

📄 Read: 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
📄 阅读： references/events-and-interactions.md
  • FormatChanged事件，用于跟踪格式化状态
  • TextChanged事件，包含旧和新的HTML内容
  • HyperlinkClicked事件，包含URL和显示文本
  • Focused和Unfocused事件，用于输入状态
  • 在XAML和C#中订阅事件的模式
  • 使用事件进行上下文UI更新
  • 结合事件与编程格式化
  • 实际事件处理场景

Advanced Features

高级功能

📄 Read: 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
📄 阅读： references/advanced-features.md
  • 使用EnableAutoSize属性实现自动调整大小功能
  • 根据内容动态调整高度
  • 自动调整大小编辑器的布局注意事项
  • 使用EnableLiquidGlassEffect实现Liquid Glass Effect（iOS/macOS）
  • 平台要求（.NET 10、iOS/macOS 26+）
  • Cupertino主题集成和透明背景
  • 自定义工具栏和编辑器圆角
  • 用于视觉自定义的主题键
  • 结合高级功能打造现代UI