Articles in this section
Category / Section

How to handle the Theme support in the SfRichTextEditor control

1 min read

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("&#128522;");

  }

 

The sample that explains how to track the Theme support in the Rich Text Editor control can be downloaded sample here.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied