在實際應(yīng)用中，富文本隨處可見，如留言板，聊天軟件，文檔編輯，特定格式內(nèi)容等，在WPF開發(fā)中，如何實現(xiàn)富文本編輯呢？本文以一個簡單的小例子，簡述如何通過RichTextBox實現(xiàn)富文本編輯功能，主要實現(xiàn)復(fù)制，剪切，粘貼，撤銷，重做，保存，打開，文本加粗，斜體，下劃線，刪除線，左對齊，居中對齊，右對齊，兩端對齊，縮進，減少縮進，項目符號，數(shù)字符號，上標(biāo)，下標(biāo)，背景色，前景色，圖片，打印等功能，僅供學(xué)習(xí)分享使用，如有不足之處，還請指正。

什么是RichTextBox？

使用RichTextBox可以顯示或編輯流內(nèi)容，如文本，圖片，表格等，TextBox和RichTextBox都可以用于編輯文本，但使用場景不同。如果是單純的無格式的純文本，建議使用TextBox；如果是需要編輯帶格式的文本、圖像、表格或其他多種格式的內(nèi)容時，RichTextBox?是更好的選擇。

什么是流內(nèi)容和流文檔？

通常情況下，所有在富文本編輯器中呈現(xiàn)的內(nèi)容，都是流內(nèi)容(FlowContent)，而為了呈現(xiàn)流內(nèi)容的構(gòu)建塊，稱為流內(nèi)容元素(Element)。不同的流內(nèi)容元素，組成了流文檔(FlowDocument)，RichTextBox是流文檔的托管對象之一。

流文檔旨在根據(jù)窗口大小、設(shè)備分辨率和其他環(huán)境變量來“重排內(nèi)容”。 此外，流文檔還具有很多內(nèi)置功能，包括搜索、能夠優(yōu)化可讀性的查看模式以及更改字體大小和外觀的功能。 當(dāng)易讀性是文檔的主要使用要求時，最適合使用流文檔。

涉及知識點

在通過RichTextBox實現(xiàn)富文本編輯器時，涉及到的知識點如下所示：

根據(jù)流內(nèi)容的用途，可分為兩個重要類別：

1. Block 派生類：也稱為“Block 內(nèi)容元素”，或簡稱為“Block 元素”。 繼承自?Block?的元素可用于將元素分組到一個公用父級下，或?qū)⒐脤傩詰?yīng)用于某個組。

2. Inline 派生類：也稱為“Inline 內(nèi)容元素”，或簡稱為“Inline 元素”。 繼承自?Inline?的元素要么包含在 Block 元素中，要么包含在另一個 Inline 元素中。 Inline 元素通常用作在屏幕上呈現(xiàn)的內(nèi)容的直接容器。 例如，Paragraph（Block 元素）可包含?Run（Inline 元素），而?Run?實際包含在屏幕上呈現(xiàn)的文本。

在實現(xiàn)富文本編輯器時，需要用到圖標(biāo)實現(xiàn)，主要內(nèi)容如下：

1. 在本示例中圖標(biāo)主要通過自定義路徑Path實現(xiàn)，其中Data屬性是Geometry類型，用于接收自定以的圖形。而用到的圖標(biāo)類型數(shù)據(jù)，可以通過iconfont官網(wǎng)進行獲取。
2. 在本示例中，用到很多圖標(biāo)，為了統(tǒng)一管理，創(chuàng)建資源字典，圖標(biāo)數(shù)據(jù)作為一種資源引入。

操作流文檔時，常見使用到的類，如下所示：

創(chuàng)建RichTextBox

RichTextBox托管流文檔對象，流文檔包含流內(nèi)容，包括文本，段落，圖像，表格，等內(nèi)容，創(chuàng)建語法如下所示：

<RichTextBox x:Name="richTextBox" AcceptsTab="True" Grid.Row="1" BorderThickness="1" BorderBrush="LightBlue" Margin="2" Padding="2" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto"><RichTextBox.Document><FlowDocument><Paragraph>I am a sunny boy. My name is xxxx. I am from xxxx Primary School. I am over 1.5 meters old when I just turned 12. Alas, I may be a little fat because of eating too much sugar. A pair of pretty big eyes are inlaid under the dark hair and curved eyebrows. There is also a thin mouth.</Paragraph><Paragraph>I like to play computer games. I play online whenever I have time, and my mother scolds me all day. I also like reading. Once, when I went to the library to read, I was fascinated by it. I was immersed in the ocean of knowledge and didn't remember to go home for dinner. I didn't want to leave until the library closed. I also like to play basketball. Every Saturday and Sunday, I will invite some friends to play basketball for a few hours.</Paragraph><Paragraph>My advantage is that I love to move. Every morning I go outside to exercise, run, play the horizontal bar, etc. My math scores are also very good, but my Chinese and English scores are average, so my face is always filled with joy. My shortcoming is that I can't play table tennis, and I don't know what is going on. I just don't like it. This is me. If your hobbies are the same as mine, you can find me.</Paragraph><Paragraph>thank you.</Paragraph></FlowDocument></RichTextBox.Document>
</RichTextBox>

?

編輯命令

為了方便起見，WPF 提供由?ApplicationCommands、MediaCommands、ComponentCommands、NavigationCommands?和?EditingCommands?組成的常用命令庫，你也可以定義自己的命令。在實現(xiàn)富文本編輯器時，用到的命令主要有三種：

1. ApplicationCommands，主要是應(yīng)用程序中常見的命令，如：復(fù)制Copy，剪切Cut，粘貼Paste，重做Redo，撤銷Undo等。
2. EditingCommands 提供了一組常見的編輯相關(guān)的命令，如：加粗Bold，斜體Italic，下劃線UnderLine，左對齊，右對齊，居中對齊，兩端對齊，縮進，減少縮進，項目符號，數(shù)字符號等。
3. 自定義命令，默認(rèn)RichTextBox并沒有提供相應(yīng)的命令，所以需要根據(jù)功能自行定義，如：背景色，前景色，打印，打開，保存，上標(biāo)，下標(biāo)，圖像等。

編輯命令頁面布局和綁定

使用WPF自帶的命令，需要指定Command和CommandTarget兩個屬性，否則將不起作用。其中Command直接使用Commnad="命令名稱"，CommandTarget=“{Binding ElementName=控件名稱}”的格式進行綁定。

自定義命令，需要通過Command="{Binding 命令名稱}"的格式進行綁定。具體如下所示：

<StackPanel Orientation="Horizontal" Grid.Row="0"><Button ToolTip="打開" Command="{Binding OpenCommand}"><Path Data="{StaticResource icon_open}" Stretch="Fill" Fill="#1296db"></Path></Button><Button ToolTip="保存" Command="{Binding SaveCommand}"><Path Data="{StaticResource icon_save}" Stretch="Fill" Fill="#1296db"></Path></Button><GridSplitter Width="1" Margin="3 2 3 2" Background="LightGray" IsEnabled="False"></GridSplitter><Button ToolTip="剪切" Command="ApplicationCommands.Cut" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_cut}" Stretch="Fill" Fill="Black"></Path></Button><Button ToolTip="復(fù)制" Command="ApplicationCommands.Copy" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_copy}" Stretch="Fill" Fill="#1296db"></Path></Button><Button ToolTip="粘貼" Command="ApplicationCommands.Paste" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_paste}" Stretch="Fill" Fill="#1296db"></Path></Button><Button ToolTip="撤銷" Command="ApplicationCommands.Undo" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_undo}" Stretch="Fill" Fill="#8a8a8a"></Path></Button><Button ToolTip="重做" Command="ApplicationCommands.Redo" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_redo}" Stretch="Fill" Fill="#8a8a8a"></Path></Button><GridSplitter Width="1" Margin="3 2 3 2" Background="LightGray" IsEnabled="False"></GridSplitter><Button ToolTip="加粗" Command="EditingCommands.ToggleBold" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_bold}" Stretch="Fill" Fill="Black"></Path></Button><Button ToolTip="斜體" Command="EditingCommands.ToggleItalic" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_italic}" Stretch="Fill" Fill="LightGray"></Path></Button><Button ToolTip="下劃線" Command="EditingCommands.ToggleUnderline" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_underline}" Stretch="Fill" Fill="Gray"></Path></Button><Button ToolTip="刪除線" Command="{Binding SettingCommand}" CommandParameter="StrikeLine"><Path Data="{StaticResource icon_strikeline}" Stretch="Fill" Fill="Black"></Path></Button><Button ToolTip="左對齊" Command="EditingCommands.AlignLeft" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_left}" Stretch="Fill" Fill="Black" Stroke="LimeGreen"></Path></Button><Button ToolTip="居中對齊" Command="EditingCommands.AlignCenter" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_center}" Stretch="Fill" Fill="Black" Stroke="LimeGreen"></Path></Button><Button ToolTip="右對齊" Command="EditingCommands.AlignRight" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_right}" Stretch="Fill" Fill="Black" Stroke="LimeGreen"></Path></Button><Button ToolTip="兩端對齊" Command="EditingCommands.AlignJustify" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_justify}" Stretch="Fill" Fill="Black" Stroke="LimeGreen"></Path></Button><Button ToolTip="縮進" Command="EditingCommands.IncreaseIndentation" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_addident}" Stretch="Fill" Fill="DimGray"></Path></Button><Button ToolTip="減少縮進" Command="EditingCommands.DecreaseIndentation" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_lessident}" Stretch="Fill" Fill="DimGray"></Path></Button><Button ToolTip="項目編號" Command="EditingCommands.ToggleBullets" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_bullets}" Stretch="Fill" Fill="DimGray"></Path></Button><Button ToolTip="數(shù)字編號" Command="EditingCommands.ToggleNumbering" CommandTarget="{Binding ElementName=richTextBox}"><Path Data="{StaticResource icon_numbering}" Stretch="Fill" Fill="DimGray"></Path></Button><Button ToolTip="上標(biāo)" Command="{Binding SettingCommand}" CommandParameter="Super"><Path Data="{StaticResource icon_upper}" Stretch="Fill" Fill="CadetBlue"></Path></Button><Button ToolTip="下標(biāo)" Command="{Binding SettingCommand}" CommandParameter="Sub"><Path Data="{StaticResource icon_down}" Stretch="Fill" Fill="CadetBlue"></Path></Button><GridSplitter Width="1" Margin="3 2 3 2" Background="LightGray" IsEnabled="False"></GridSplitter><Grid Background="White" Width="42" Height="30" Margin="3"><ComboBox Width="42" Height="30" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center" SelectedIndex="0" BorderBrush="White" Background="White" Name="combBackground"><ComboBoxItem Background="#000000" Content="#000000"></ComboBoxItem><ComboBoxItem Background="#FF0000" Content="#FF0000"></ComboBoxItem><ComboBoxItem Background="#00FF00" Content="#00FF00"></ComboBoxItem><ComboBoxItem Background="#0000FF" Content="#0000FF"></ComboBoxItem><ComboBoxItem Background="#00AA00" Content="#00AA00"></ComboBoxItem><ComboBoxItem Background="#AA0000" Content="#AA0000"></ComboBoxItem><ComboBoxItem Background="#0000AA" Content="#0000AA"></ComboBoxItem><ComboBoxItem Background="#AA00CC" Content="#AA00CC"></ComboBoxItem><ComboBoxItem Background="#00BBCC" Content="#00BBCC"></ComboBoxItem><ComboBoxItem Background="#555555" Content="#555555"></ComboBoxItem><ComboBoxItem Background="#AAAAAA" Content="#AAAAAA"></ComboBoxItem><ComboBoxItem Background="#BBBBBB" Content="#BBBBBB"></ComboBoxItem><ComboBoxItem Background="#CCCCCC" Content="#CCCCCC"></ComboBoxItem><ComboBoxItem Background="#DDDDDD" Content="#DDDDDD"></ComboBoxItem><ComboBoxItem Background="#EEEEEE" Content="#EEEEEE"></ComboBoxItem><ComboBoxItem Background="#FFFFFF" Content="#FFFFFF"></ComboBoxItem><i:Interaction.Triggers><i:EventTrigger EventName="SelectionChanged"><i:InvokeCommandAction Command="{Binding BgColorCommand}" CommandParameter="{Binding ElementName=combBackground, Path=SelectedItem}"/></i:EventTrigger></i:Interaction.Triggers></ComboBox><Button ToolTip="背景色" Width="30" Height="30" Padding="0" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Center"><Path Data="{StaticResource icon_background}" Stretch="Fill"  Fill="{Binding ElementName=combBackground, Path=SelectedItem.Background}"  ></Path></Button></Grid><Grid Background="White" Width="42" Height="30" Margin="3"><ComboBox Width="42" Height="30" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center" SelectedIndex="0" BorderBrush="White" Background="White" Name="combForeground"><ComboBoxItem Background="#000000" Content="#000000"></ComboBoxItem><ComboBoxItem Background="#FF0000" Content="#FF0000"></ComboBoxItem><ComboBoxItem Background="#00FF00" Content="#00FF00"></ComboBoxItem><ComboBoxItem Background="#0000FF" Content="#0000FF"></ComboBoxItem><ComboBoxItem Background="#00AA00" Content="#00AA00"></ComboBoxItem><ComboBoxItem Background="#AA0000" Content="#AA0000"></ComboBoxItem><ComboBoxItem Background="#0000AA" Content="#0000AA"></ComboBoxItem><ComboBoxItem Background="#AA00CC" Content="#AA00CC"></ComboBoxItem><ComboBoxItem Background="#00BBCC" Content="#00BBCC"></ComboBoxItem><ComboBoxItem Background="#555555" Content="#555555"></ComboBoxItem><ComboBoxItem Background="#AAAAAA" Content="#AAAAAA"></ComboBoxItem><ComboBoxItem Background="#BBBBBB" Content="#BBBBBB"></ComboBoxItem><ComboBoxItem Background="#CCCCCC" Content="#CCCCCC"></ComboBoxItem><ComboBoxItem Background="#DDDDDD" Content="#DDDDDD"></ComboBoxItem><ComboBoxItem Background="#EEEEEE" Content="#EEEEEE"></ComboBoxItem><ComboBoxItem Background="#FFFFFF" Content="#FFFFFF"></ComboBoxItem><i:Interaction.Triggers><i:EventTrigger EventName="SelectionChanged"><i:InvokeCommandAction Command="{Binding ForeColorCommand}" CommandParameter="{Binding ElementName=combForeground, Path=SelectedItem}"/></i:EventTrigger></i:Interaction.Triggers></ComboBox><Button ToolTip="前景色" Width="30" Height="30" Padding="0" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Center"><Path Data="{StaticResource icon_foreground}" Stretch="Fill"  Fill="{Binding ElementName=combForeground, Path=SelectedItem.Background}"  ></Path></Button></Grid><Button ToolTip="圖像" Command="{Binding SettingCommand}" CommandParameter="Image"><Path Data="{StaticResource icon_img}" Stretch="Fill" Fill="Goldenrod"></Path></Button><Button ToolTip="打印" Command="{Binding SettingCommand}" CommandParameter="Print"><Path Data="{StaticResource icon_print}" Stretch="Fill" Fill="Tomato"></Path></Button></StackPanel>

?

自定義命令

在本示例中，后臺命令使用和屬性綁定，使用CommunityToolkit.Mvvm庫實現(xiàn)。后臺實現(xiàn)業(yè)務(wù)主要分為三種：

1. 打開，保存命令

打開，保存主要實現(xiàn)對RichTextBox中的流文檔對象的序列化和反序列化，具體如下所示：

private IRelayCommand saveCommand;public IRelayCommand SaveCommand
{get{if (saveCommand == null){saveCommand = new RelayCommand(Save);}return saveCommand;}
}private void Save()
{SaveFileDialog saveFileDialog = new SaveFileDialog();saveFileDialog.Title = "請選擇要保存的路徑";saveFileDialog.Filter = "富文本格式|*.xaml";bool? flag = saveFileDialog.ShowDialog();if (flag == true){string _fileName=saveFileDialog.FileName;TextRange range;FileStream fStream;range = new TextRange(this.richTextBox.Document.ContentStart, this.richTextBox.Document.ContentEnd);fStream = new FileStream(_fileName, FileMode.Create);range.Save(fStream, DataFormats.XamlPackage);fStream.Close();}
}private IRelayCommand openCommand;public IRelayCommand OpenCommand
{get{if (openCommand == null){openCommand = new RelayCommand(Open);}return openCommand;}
}private void Open()
{TextRange range;FileStream fStream;OpenFileDialog openFileDialog = new OpenFileDialog();openFileDialog.Title = "請選擇要加載的文件";openFileDialog.Filter = "富文本格式|*.xaml";bool? flag = openFileDialog.ShowDialog();if (flag == true){string _fileName = openFileDialog.FileName;if (File.Exists(_fileName)){range = new TextRange(this.richTextBox.Document.ContentStart, this.richTextBox.Document.ContentEnd);fStream = new FileStream(_fileName, FileMode.OpenOrCreate);range.Load(fStream, DataFormats.XamlPackage);fStream.Close();}}
}

?

2. 顏色設(shè)置命令

顏色設(shè)置，主要用于將用戶選擇的顏色，賦值給用于選擇的流內(nèi)容元素對象。如下所示：

private IRelayCommand<object> bgColorCommand;public IRelayCommand<object> BgColorCommand
{get{if(bgColorCommand == null){bgColorCommand = new RelayCommand<object>(BgColor);}return bgColorCommand;}
}private void BgColor(object obj)
{if (obj == null){return;}var item = obj as ComboBoxItem;if (item != null){var color = item.Background;var buttonType = "Background";SetColor(buttonType, color);}
}private IRelayCommand<object> foreColorCommand;public IRelayCommand<object> ForeColorCommand
{get{if (foreColorCommand == null){foreColorCommand = new RelayCommand<object>(ForeColor);}return foreColorCommand;}
}private void ForeColor(object obj)
{if (obj == null){return;}var item = obj as ComboBoxItem;if (item != null){var color = item.Background;var buttonType = "Foreground";SetColor(buttonType, color);}
}private void SetColor(string buttonType, Brush brush)
{var textSelection = this.richTextBox.Selection;if (textSelection == null){return;}if (buttonType == "Background"){var propertyValue = textSelection.GetPropertyValue(TextElement.BackgroundProperty);var bgBrush = (Brush)propertyValue;if (bgBrush == brush){textSelection.ApplyPropertyValue(TextElement.BackgroundProperty, Colors.White);}else{textSelection.ApplyPropertyValue(TextElement.BackgroundProperty, brush);}}if (buttonType == "Foreground"){var propertyValue = textSelection.GetPropertyValue(TextElement.ForegroundProperty);var foreground = (Brush)propertyValue;if (foreground == brush){textSelection.ApplyPropertyValue(TextElement.ForegroundProperty, Colors.Black);}else{textSelection.ApplyPropertyValue(TextElement.ForegroundProperty, brush);}}
}

?

3. 其他設(shè)置命令

其他設(shè)置命令，如刪除線，上標(biāo)，下標(biāo)，圖像插入，打印等命令，如下所示：

private IRelayCommand<string> settingCommand;public IRelayCommand<string> SettingCommand
{get{if(settingCommand == null){settingCommand = new RelayCommand<string>(Setting);}return settingCommand;}
}private void Setting(string buttonType)
{var textSelection = this.richTextBox.Selection;if (textSelection == null){return;}if (buttonType == "StrikeLine"){var propertyValue = textSelection.GetPropertyValue(Inline.TextDecorationsProperty);var textDecorationCollection = (TextDecorationCollection)propertyValue;if (textDecorationCollection == TextDecorations.Strikethrough){textSelection.ApplyPropertyValue(Inline.TextDecorationsProperty, null);}else{textSelection.ApplyPropertyValue(Inline.TextDecorationsProperty, TextDecorations.Strikethrough);}}else if (buttonType == "Super"){var propertyValue = textSelection.GetPropertyValue(Inline.BaselineAlignmentProperty);var supper = (BaselineAlignment)propertyValue;if (supper == BaselineAlignment.Superscript){textSelection.ApplyPropertyValue(Inline.BaselineAlignmentProperty, BaselineAlignment.Top);}else{textSelection.ApplyPropertyValue(Inline.BaselineAlignmentProperty, BaselineAlignment.Superscript);}}else if(buttonType == "Sub"){var propertyValue = textSelection.GetPropertyValue(Inline.BaselineAlignmentProperty);var sub = (BaselineAlignment)propertyValue;if (sub == BaselineAlignment.Subscript){textSelection.ApplyPropertyValue(Inline.BaselineAlignmentProperty, BaselineAlignment.Top);}else{textSelection.ApplyPropertyValue(Inline.BaselineAlignmentProperty, BaselineAlignment.Subscript);}}else if (buttonType == "Image"){OpenFileDialog openFileDialog = new OpenFileDialog();openFileDialog.Title = "請選擇需要插入的圖片";openFileDialog.Filter = "圖片文件|*.png";bool? flag = openFileDialog.ShowDialog();if (flag ==true){var fileName = openFileDialog.FileName;var img = new Image() { Source = new BitmapImage(new Uri(fileName)), Stretch = Stretch.Uniform, Width = this.richTextBox.ActualWidth - 50 };var imgContainer = new BlockUIContainer(img);this.richTextBox.CaretPosition.InsertParagraphBreak();this.richTextBox.Document.Blocks.InsertBefore(this.richTextBox.CaretPosition.Paragraph, imgContainer);}}else if(buttonType == "Print"){PrintDialog pd = new PrintDialog();if ((pd.ShowDialog() == true)){//use either one of the belowpd.PrintVisual(this.richTextBox as Visual, "打印富文本1");pd.PrintDocument((((IDocumentPaginatorSource)this.richTextBox.Document).DocumentPaginator), "打印富文本2");}}
}

?

示例截圖

主要實現(xiàn)復(fù)制，剪切，粘貼，撤銷，重做，保存，打開，文本加粗，斜體，下劃線，刪除線，左對齊，居中對齊，右對齊，兩端對齊，縮進，減少縮進，項目符號，數(shù)字符號，上標(biāo)，下標(biāo)，背景色，前景色，圖片，打印等功能，效果如下：

源碼下載

關(guān)于源碼下載，可關(guān)注公眾號，回復(fù)WPFRICH進行下載，如下所示：

參考文獻

流文檔介紹：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/advanced/flow-document-overview?view=netframeworkdesktop-4.8

RichTextBox介紹：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/richtextbox-overview?view=netframeworkdesktop-4.8

ApplicationCommands介紹：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.input.applicationcommands?view=windowsdesktop-8.0

EditingCommands介紹：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.documents.editingcommands?view=windowsdesktop-8.0

以上就是【淺談WPF之利用RichTextBox實現(xiàn)富文本編輯器】的全部內(nèi)容。