Avalonia怎么实现一个富文本编辑器 Avalonia RichTextBox

来源：这里教程网时间：2026-02-21 17:34:55 作者：

Avalonia 官方目前没有内置的

RichTextBox

控件（类似 WPF 的

RichTextBox

），因此要实现富文本编辑功能，需借助第三方库或自建方案。最成熟、推荐的方式是使用 AvaloniaEdit（专为 Avalonia 适配的开源代码编辑器组件），但它更偏向“代码编辑”，不原生支持图文混排、字体样式实时切换等传统富文本特性；若需完整富文本（如加粗/斜体/颜色/图片/段落对齐等），则需组合其他技术或采用 WebView2 渲染 HTML 编辑器。

用 AvaloniaEdit 实现轻量级富文本（适合代码/标记类场景）

AvaloniaEdit 是 SharpDevelop 团队为 Avalonia 移植的高性能文本编辑器，支持语法高亮、行号、撤销重做、查找替换等。虽然它默认处理纯文本，但可通过

TextFormatter

和

VisualLineElementGenerator

扩展实现简单样式（如关键词高亮、链接下划线）。它不支持鼠标选中后直接点击按钮加粗，但可配合 Toolbar + 命令逻辑模拟基础富文本操作（例如：选中文本 → 执行

InsertText("**text**")

插入 Markdown 标记）。

安装 NuGet 包：
AvaloniaEdit
在 XAML 中引用命名空间并添加控件：
通过
Editor.Document.Text
获取内容，用正则或 Markdown 解析器转为带样式的 HTML 或渲染结果 适合需求：日志查看、配置编辑、Markdown 实时预览、简易文档注释

用 WebView2 嵌入 HTML 富文本编辑器（推荐用于完整富文本）

因 Avalonia 对复杂文本布局和跨平台富文本渲染支持有限，生产级应用常采用 WebView2（Chromium 内核）加载基于

contenteditable

的 HTML 编辑器（如 Quill、TinyMCE、CKEditor 5 或原生

document.execCommand

封装方案）。Avalonia 11+ 已原生支持 WebView2（需安装

Avalonia.WebView2

包及系统 WebView2 运行时）。

添加 NuGet：
Avalonia.WebView2
XAML 中嵌入：
在
editor.html
中初始化 Quill：

自定义控件 + TextBlock + Inline 风格（仅限只读/简单编辑）

Avalonia 的

TextBlock

支持

Inlines

集合（含

Run

、

Span

、

LineBreak

），可手动构建带样式的只读富文本显示。但该方式无法响应用户编辑（无光标、不能选中修改），仅适用于展示已解析好的富文本内容（如从 HTML 转换而来）。

创建
TextBlock
，动态添加
Run
元素：
var run = new Run("Hello") { Foreground = Brushes.Blue, FontWeight = FontWeight.Bold }; 配合
StackPanel
+ 多个
TextBlock
实现段落分隔 不适合编辑场景，适合消息气泡、帮助文档、日志详情页等静态富文本展示