Basic Features in Xamarin Rich Text Editor (SfRichTextEditor)

18 May 20214 minutes to read

Setting Text

The Xamarin Rich Text Editor control displays the text/formatted text(HTML string) that can be set using the Text property.

<richtexteditor:SfRichTextEditor VerticalOptions="FillAndExpand" Text= "The &lt;b&gt; rich text editor &lt;/b&gt; component is WYSIWYG editor that provides the best user experience to create and update the content" />
richtexteditor = new SfRichTextEditor()
{
	VerticalOptions = LayoutOptions.FillAndExpand,			
	Text = "The <b>rich text editor</b> component is WYSIWYG editor that provides the best user experience to create and update the content";
};
this.Content = richtexteditor;

Retrieving HTML text

The formatted text of Rich Text Editor can be retrieved using the HtmlText property of SfRichTextEditor.

string HTMLText = richtexteditor.HtmlText;

InsertHTMLText

Rich Text Editor provides the support to insert the HTML text or raw text at the current cursor position. The following code example explains how to insert a text in the Rich Text Editor.

richtexteditor.InsertHTMLText("New text content");

TextChanged

The TextChanged event will trigger in the Rich Text Editor for every text change action in the content.

<rte:SfRichTextEditor x:Name="richtexteditor" TextChanged="Richtexteditor_TextChanged" VerticalOptions="FillAndExpand"/>
SfRichTextEditor richtexteditor = new SfRichTextEditor();
richtexteditor.TextChanged += Richtexteditor_TextChanged;
this.Content = richtexteditor;
			
private void Richtexteditor_TextChanged(object sender, Syncfusion.XForms.RichTextEditor.TextChangedEventArgs e)
{
	string text = e.Text;
}

FormatChanged

The FormatChanged event will trigger in the Rich Text Editor if any format change occurs in the content such as bold, italic, underline, and other formatting supports provided in the toolbar.

<rte:SfRichTextEditor x:Name="richtexteditor" FormatChanged="Richtexteditor_FormatChanged" VerticalOptions="FillAndExpand"/>
SfRichTextEditor richtexteditor = new SfRichTextEditor();
richtexteditor.FormatChanged += Richtexteditor_FormatChanged;
this.Content = richtexteditor;
			
private void Richtexteditor_FormatChanged(object sender, FormatChangedEventArgs e)
{
	bool isBold = e.bold;
}

Cursor Position

Rich Text Editor provides the support to get or set the current cursor position based on the character count in the rich text editor. The following code example explains how to get or set a cursor position in the Rich Text Editor.

//To get current cursor position
int CurrentPosition = richtexteditor.CursorPosition;

//To set current cursor position
richtexteditor.CursorPosition = 10;

NOTE

Set the CursorPosition based on the character count will not working in the Xamarin RichTextEditor iOS due to the control focus limitation.

Content Height

Rich Text Editor provides the support to get the height of the rendered content. The following code example explains how to get the rendered content height in the Rich Text Editor.

//To get height of the rendered content.
int ContentHeight = richtexteditor.ContentHeightRequest;

NOTE

This is a readonly property.

RichTextEditor scrolls in scroll view layout

RichTextEditor relies on WebView for rendering the HTML content and, as there is a limitation for placing the WebView inside the ScrollView control. As in MSDN, the ScrollViews should not be nested with other controls that provide scrolling like ListView and WebView. So, the scrolling is not working in the SfRichTextEditor, which is inside the ScrollView in Android. This is known as the LimitationOfWebView.

To overcome this issue, you can scroll either parent layout or RichTextEditor but not both. This can be done by enabling the ScrollOrientation property to None (i.e., RichTextEditor will not scroll). The default value is Vertical (i.e., RichTextEditor scrolls vertically).

NOTE

It applies to android only. Since iOS and UWP do not have the limitation in a scroll view. It can scroll either in scroll layout or within the control but not both due to the WebView limitation.

<ScrollView>
    <StackLayout>
        <richtexteditor:SfRichTextEditor ScrollOrientation="None" HeightRequest="500" Text="The rich text editor component is WYSIWYG editor that provides the best user experience to create and update the content." />
        <richtexteditor:SfRichTextEditor ScrollOrientation="None" HeightRequest="500" Text="The rich text editor component allows Applies formatting such as bold, italics, and underline." />
    </StackLayout>
</ScrollView>