Advanced-Features.md

layout	post
title	Basic Features in .NET MAUI Rich Text Editor | Syncfusion®
description	Learn about the basic features of the .NET MAUI Rich Text Editor (SfRichTextEditor) such as handling content, events, and other core functionalities.
platform	maui
control	Rich Text Editor
documentation	ug

Advanced Features in .NET MAUI Rich Text Editor (SfRichTextEditor)

This section covers the essential properties, methods, and events of the .NET MAUI SfRichTextEditor for handling content and user interactions.

Setting Plain Text

The Rich Text Editor control displays the plain text that can be set using the Text property.

{% tabs %}

{% highlight xaml %}

<richtexteditor:SfRichTextEditor Text="The rich text editor component is WYSIWYG editor that provides the best user experience to create and update the content" />

{% endhighlight %}

{% highlight C# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor(); richTextEditor.Text = "The rich text editor component is WYSIWYG editor that provides the best user experience to create and update the content";

{% endhighlight %}

{% endtabs %}

Setting HTML Formatted Text

The HtmlText property of the SfRichTextEditor control is used to set HTML formatted text.

{% tabs %}

{% highlight xaml %}

<richtexteditor:SfRichTextEditor HtmlText= "The <b> rich text editor </b> component is WYSIWYG editor that provides the best user experience to create and update the content" />

{% endhighlight %}

{% highlight C# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor(); richTextEditor.HtmlText = "The rich text editor component is WYSIWYG editor that provides the best user experience to create and update the content";

{% endhighlight %}

{% endtabs %}

Getting Selected HTML

To retrieve the HTML representation of the currently selected content, use the GetSelectedText method.

{% tabs %}

{% highlight c# %}

string selectedText = await rte.GetSelectedText();

{% endhighlight %}

{% endtabs %}

Default Text Style

You can define the default appearance for any new text typed into the editor. These settings apply to text that does not have any other specific formatting applied.

• DefaultFontFamily: Sets the default font family for the content.
• DefaultFontSize: Sets the default font size.
• DefaultTextColor: Sets the default color of the text.

{% tabs %} {% highlight xaml %}

<rte:SfRichTextEditor DefaultFontFamily="Impact" DefaultFontSize="14" DefaultTextColor="DarkGreen" />

{% endhighlight %} {% highlight c# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor(); richTextEditor.DefaultFontFamily = "Impact"; richTextEditor.DefaultFontSize = 14; richTextEditor.DefaultTextColor = Colors.DarkGreen;

{% endhighlight %} {% endtabs %}

Placeholder

The editor can display a placeholder text when the content is empty. This is useful for prompting the user. The placeholder is cleared as soon as the user starts typing.

• PlaceholderFontFamily : Sets the font family of the placeholder text.
• PlaceholderFontSize: Sets the font size of the placeholder text.
• PlaceholderColor: Sets the color of the placeholder text.

{% tabs %}

{% highlight xaml %}

<rte:SfRichTextEditor Placeholder="Type your content here..." PlaceholderFontFamily="Impact" PlaceholderFontSize="24" PlaceholderColor="Green"> </rte:SfRichTextEditor>

{% endhighlight %}

{% highlight c# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor(); richTextEditor.Placeholder = "Type your content here..."; richTextEditor.PlaceholderFontFamily = "Impact"; richTextEditor.PlaceholderFontSize = 24; richTextEditor.PlaceholderColor = Colors.Green;

{% endhighlight %} {% endtabs %}

Programmatic Control

The SfRichTextEditor provides several methods to programmatically control its behavior, such as managing focus, history, and cursor position.

Move Cursor to Start

Moves the cursor to the very beginning of the content in the editor.

{% tabs %}

{% highlight c# %}

richTextEditor.MoveCursorToStart();

{% endhighlight %}

{% endtabs %}

Move Cursor to End

Moves the cursor to the very end of the content in the editor.

{% tabs %}

{% highlight c# %}

richTextEditor.MoveCursorToEnd();

{% endhighlight %}

{% endtabs %}

Increase Indent

Increases the indentation of the current paragraph or selected paragraphs.

{% tabs %}

{% highlight c# %}

richTextEditor.IncreaseIndent();

{% endhighlight %}

{% endtabs %}

Decrease Indent

Decreases the indentation of the current paragraph or selected paragraphs.

{% tabs %}

{% highlight c# %}

richTextEditor.DecreaseIndent();

{% endhighlight %}

{% endtabs %}

Set Focus

Programmatically sets the input focus to the rich text editor.

{% tabs %}

{% highlight c# %}

richTextEditor.Focus();

{% endhighlight %}

{% endtabs %}

Remove Focus

Programmatically removes the input focus from the rich text editor.

{% tabs %}

{% highlight c# %}

richTextEditor.Unfocus();

{% endhighlight %}

{% endtabs %}

Undo Last Action

Reverts the last action performed in the editor.

{% tabs %}

{% highlight c# %}

richTextEditor.Undo();

{% endhighlight %}

{% endtabs %}

Redo Last Action

Re-applies the last action that was undone.

{% tabs %}

{% highlight c# %}

richTextEditor.Redo();

{% endhighlight %}

{% endtabs %}

Events

The SfRichTextEditor provides a variety of events to notify the changes and user interactions within the control. You can subscribe to these events to execute custom logic in response to actions like text changes, focus shifts, or hyperlink clicks.

FormatChanged Event

The FormatChanged event is occurs when the formatting status changes. This is useful for implementing contextual formatting options.

{% tabs %}

{% highlight xaml %}

<rte:SfRichTextEditor FormatChanged="OnFormatChanged" />

{% endhighlight %}

{% highlight c# %}

private void OnFormatChanged(object sender, RichTextEditorFormatChangedEventArgs e) { // Handle when format changed }

{% endhighlight %}

{% endtabs %}

HyperlinkClicked Event

The HyperlinkClicked event is fired when a user taps on a hyperlink within the content. The event arguments contain the URL and the text of the clicked link.

{% tabs %}

{% highlight xaml %}

<rte:SfRichTextEditor HyperlinkClicked="OnHyperlinkClicked"/>

{% endhighlight %}

{% highlight c# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor(); richTextEditor.HtmlText = "

Visit the Syncfusion website.

"; richTextEditorHyperlinkClicked += OnHyperlinkClicked

private void OnHyperlinkClicked(object sender, RichTextEditorHyperlinkClickedEventArgs e) { string url = e.URL; string text = e.DisplayText; // Handle when hyperlink clicked }

{% endhighlight %}

{% endtabs %}

TextChanged Event

The TextChanged event is fired whenever the content in the editor is changed. The event arguments provide the old and new HTML content.

{% tabs %}

{% highlight xaml %}

<rte:SfRichTextEditor TextChanged="OnTextChanged" />

{% endhighlight %}

{% highlight c# %}

private void OnTextChanged(object sender, RichTextEditorTextChangedEventArgs e) { string oldHtml = e.OldText; string newHtml = e.NewText; // Handle when Text changed }

{% endhighlight %}

{% endtabs %}

Focused Event

The Focused event occurs when the Rich Text Editor receives input focus.

{% tabs %}

{% highlight xaml %} <rte:SfRichTextEditor Focused="OnEditorFocused" /> {% endhighlight %}

{% highlight c# %} richTextEditor.Focused += OnEditorFocused;

private void OnEditorFocused(object sender, EventArgs e) { // Handle when editor focused } {% endhighlight %} {% endtabs %}

Unfocused Event

The Unfocused event occurs when the Rich Text Editor loses input focus.

{% tabs %}

{% highlight xaml %} <rte:SfRichTextEditor Unfocused="OnEditorUnfocused" /> {% endhighlight %}

{% highlight c# %} richTextEditor.Unfocused += OnEditorUnfocused;

private void OnEditorUnfocused(object sender, EventArgs e) { // Handle when editor loses focus } {% endhighlight %} {% endtabs %}

N> Looking for the full .NET MAUI Rich Text Editor component overview, features, pricing, and documentation? Visit the .NET MAUI Rich Text Editor page.