How to handle the Theme support in the SfRichTextEditor control
How to handle Theme support in the SfRichTextEditor control
Thise article explains how to handle the Theme support in the Rich Text Editor.
Step 1:
Create a SfRichTextEditor sample with all the necessary assemblies. Refer to this Getting started documentation to create and configure a simple SfRichTextEditor sample. and configure it.
Step 2:
Use the Theme support in the SfRichTextEditor control.
XAML:
<ContentPage.Resources> <syncCore:SyncfusionThemeDictionary> <syncCore:SyncfusionThemeDictionary.MergedDictionaries> <syncCore:DarkTheme /> </syncCore:SyncfusionThemeDictionary.MergedDictionaries> </syncCore:SyncfusionThemeDictionary> </ContentPage.Resources>
<StackLayout x:Name="stack">
<rte:SfRichTextEditor x:Name="richtexteditor" VerticalOptions="FillAndExpand" Text="The rich text editor component is WYSIWYG editor that provides the best user experience to create and update the content"/>
<StackLayout HorizontalOptions="CenterAndExpand"> <StackLayout Orientation="Horizontal"> <Label x:Name="darkLabel" Text="Dark" /> <Switch Toggled="Handle_Toggled" /> <Label x:Name="lightLabel" Text="Light" /> </StackLayout> </StackLayout> </StackLayout> |
C#:
private void Handle_Toggled(object sender, ToggledEventArgs e) { var pageResources = Resources; var mergedDictionaries = (pageResources as SyncfusionThemeDictionary)?.MergedDictionaries; if (mergedDictionaries != null) { foreach (var item in mergedDictionaries.Reverse<ResourceDictionary>()) { var dictionary = item as ResourceDictionary; if (dictionary.ContainsKey("SyncfusionTheme")) { var themeType = dictionary["SyncfusionTheme"] as string; mergedDictionaries.Remove(item);
//Remove theing dark theme and apply the Light theme. applied if (themeType == "DarkTheme") { mergedDictionaries.Add(new LightTheme()); } //Remove theing light theme and apply the dark theme. applied else { Resources["SfRichTextEditorFontColor"] = Color.FromHex("#FF5722"); mergedDictionaries.Add(new DarkTheme()); } } } } } Button emojiButton = new Button(); emojiButton.BackgroundColor = Color.Transparent; emojiButton.HeightRequest = 50; emojiButton.WidthRequest = 50; emojiButton.Text = "\U0001F642"; collection.Add(emojiButton); emojiButton.Clicked += EmojiButton_Clicked; richTextEditor.ToolbarItems = collection; this.Content = richTextEditor;
private void EmojiButton_Clicked(object sender, EventArgs e) { richTextEditor.InsertHTMLText("😊"); } |
The sample that explains how to track the Theme support in the Rich Text Editor control can be downloaded sample here.