Customization in Xamarin Rich Text Editor (SfRichTextEditor)

18 May 20218 minutes to read

The Xamarin Rich Text Editor control provides support for customizing the toolbar items and toolbar appearance.

ToolbarOptions

The ToolbarOptions property of SfRichTextEditor is used to change the toolbar items presented in the toolbar. The following different toolbar items are available in SfRichTextEditor:

  • Alignment
  • Bold
  • BulletList
  • ClearFormat
  • DecreaseIndent
  • Font
  • FontColor
  • FontSize
  • HighlightColor
  • Hyperlink
  • IncreaseIndent
  • Italic
  • NumberList
  • ParagraphFormat
  • Redo
  • SubScript
  • SuperScript
  • Underline
  • Undo
  • All - default
<richtexteditor:SfRichTextEditor x:Name="richtexteditor" VerticalOptions="FillAndExpand" ToolbarOptions="Bold,FontColor,NumberList" Text= "The Xamarin Rich Text Editor control is a WYSIWYG editor that provides a great user experience for composing or editing rich text content from your Xamarin.Forms applications." />
richtexteditor = new SfRichTextEditor()
{
	VerticalOptions = LayoutOptions.FillAndExpand,
	ToolbarOptions = ToolbarOptions.Bold| ToolbarOptions.FontColor| ToolbarOptions.NumberList,
	Text = "The Xamarin Rich Text Editor control is a WYSIWYG editor that provides a great user experience for composing or editing rich text content from your Xamarin.Forms applications.",
};
this.Content = richtexteditor;

Customizing toolbar

The appearance of the toolbar can be customized. The BackgroundColor, TextColor, and ToolbarBackgroundColor properties helps to change the background color, text color of toolbar item, and background color of toolbar respectively. The following code example explains how to customize the toolbar appearance.

<richtexteditor:SfRichTextEditor x:Name="richtexteditor" VerticalOptions="FillAndExpand">
    <richtexteditor:SfRichTextEditor.ToolbarSettings>
        <richtexteditor:ToolbarSettings BackgroundColor="Orange" ToolbarBackgroundColor="DarkBlue" TextColor="DarkBlue"/>
    </richtexteditor:SfRichTextEditor.ToolbarSettings>
</richtexteditor:SfRichTextEditor>
richtexteditor = new SfRichTextEditor();
richtexteditor.VerticalOptions = LayoutOptions.FillAndExpand;
richtexteditor.ToolbarSettings.BackgroundColor = Color.Orange;
richtexteditor.ToolbarSettings.TextColor = Color.DarkBlue;
richtexteditor.ToolbarSettings.ToolbarBackgroundColor = Color.DarkBlue;
this.Content = richtexteditor;

Placeholder

Specifies the placeholder for the RichTextEditor’s content, which is displayed when the RichTextEditor text is empty. The following code example explains how to set a placeholder for Rich Text Editor.

<StackLayout>
	<richtexteditor:SfRichTextEditor VerticalOptions="FillAndExpand" PlaceHolder="Type something"/>
</StackLayout>
richtexteditor = new SfRichTextEditor();
richtexteditor.VerticalOptions = LayoutOptions.FillAndExpand;
richtexteditor.PlaceHolder="Type something";
this.Content = richtexteditor;

Placeholder in Rich Text Editor

Placeholder Customization

The placeholder style can be customized using the properties PlaceHolderFontColor, PlaceHolderFontSize, and PlaceHolderFontFamily.

NOTE

The PlaceHolderFontFamily property accepts fonts as Embedded source, System Font Name, or Base64 TTF string.

<StackLayout>
	<richtexteditor:SfRichTextEditor VerticalOptions="FillAndExpand" PlaceHolder="Type something" PlaceHolderFontColor="Red" PlaceHolderFontSize="30" PlaceHolderFontFamily="cursive"/>
</StackLayout>
richtexteditor = new SfRichTextEditor();
richtexteditor.VerticalOptions = LayoutOptions.FillAndExpand;
richtexteditor.PlaceHolder="Type something";
richtexteditor.PlaceHolderFontColor="Red";
richtexteditor.PlaceHolderFontSize="30";
richtexteditor.PlaceHolderFontFamily="cursive";
this.Content = richtexteditor;

Read-only support

Rich Text Editor provides read-only support, which allows the users to restrict editing. Rich Text Editor can be used as HTML Viewer using this feature. The following code example explains how to set read-only mode in Rich Text Editor.

<StackLayout>
   <richtexteditor:SfRichTextEditor VerticalOptions="FillAndExpand" ReadOnly="True" />
</StackLayout>
richtexteditor = new SfRichTextEditor();
richtexteditor.VerticalOptions = LayoutOptions.FillAndExpand;
richtexteditor.ReadOnly=true;
this.Content = richtexteditor;

ToolbarPosition

Rich Text Editor provides the support to switch the position of a toolbar to the top or bottom of the screen. The following code example explains how to switch the toolbar position in the Rich Text Editor.

<StackLayout>
   <richtexteditor:SfRichTextEditor VerticalOptions="FillAndExpand" ToolbarPosition="Top" />
</StackLayout>
richtexteditor = new SfRichTextEditor();
richtexteditor.VerticalOptions = LayoutOptions.FillAndExpand;
richtexteditor.ToolbarPosition = Syncfusion.XForms.RichTextEditor.ToolbarPosition.Top;
this.Content = richtexteditor;

Custom Toolbar

The Rich Text Editor provides a custom toolbar support, which allows the users to add custom toolbar items to the toolbar in the editor. The following code example explains how to set custom toolbar in Rich Text Editor.

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.PlaceHolder = "Type something";
ObservableCollection<object> collection = new ObservableCollection<object>();
collection.Add(ToolbarOptions.Bold);
collection.Add(ToolbarOptions.Italic);
collection.Add(ToolbarOptions.Underline);
collection.Add(ToolbarOptions.NumberList);
collection.Add(ToolbarOptions.BulletList);
Button emojiButton = new Button();
emojiButton.BackgroundColor = Color.Transparent;
emojiButton.HeightRequest = 50;
emojiButton.WidthRequest = 50;
emojiButton.Text = "\U0001F642";
collection.Add(emojiButton);
richTextEditor.ToolbarItems = collection;
this.Content = richTextEditor;

Rich Text Editor custom toolbar support

NOTE

The custom toolbar will not support the sub toolbar in the Xamarin RichTextEditor iOS because the control selection will be lost when clicking the elements in the sub toolbar.

Insert new item to the custom toolbar collection

The following code example explains how to insert a new item to the existing custom toolbar in the Rich Text Editor.

  • c#
  • SfRichTextEditor richTextEditor = new SfRichTextEditor();
    richTextEditor.PlaceHolder = "Type something";
    ObservableCollection<object> collection = new ObservableCollection<object>();
    richTextEditor.ToolbarItems = collection;
    this.Content = richTextEditor;
    
    //Insert a new item to the custom toolbar collection.
    Button emojiButton = new Button();
    emojiButton.BackgroundColor = Color.Transparent;
    emojiButton.HeightRequest = 50;
    emojiButton.WidthRequest = 50;
    emojiButton.Text = "\U0001F642";
    collection.Add(ToolbarOptions.Bold);
    collection.Add(ToolbarOptions.Italic);
    collection.Add(emojiButton);
    collection.Add(ToolbarOptions.Underline);

    Remove an item from the custom toolbar collection

    The following code example explains how to remove an existing item from the custom toolbar in the Rich Text Editor.

  • c#
  • SfRichTextEditor richTextEditor = new SfRichTextEditor();
    richTextEditor.PlaceHolder = "Type something";
    ObservableCollection<object> collection = new ObservableCollection<object>();
    collection.Add(ToolbarOptions.Bold);
    collection.Add(ToolbarOptions.Italic);
    collection.Add(ToolbarOptions.Underline);
    collection.Add(ToolbarOptions.NumberList);
    collection.Add(ToolbarOptions.BulletList);
    Button emojiButton = new Button();
    emojiButton.BackgroundColor = Color.Transparent;
    emojiButton.HeightRequest = 50;
    emojiButton.WidthRequest = 50;
    emojiButton.Text = "\U0001F642";
    collection.Add(emojiButton);
    richTextEditor.ToolbarItems = collection;
    this.Content = richTextEditor;
    
    //Remove an item from the custom toolbar collection.
    collection.RemoveAt(0);
    collection.Remove(emojiButton);

    Reorder the custom toolbar collection

    The following code example explains how to reorder the custom toolbar in the Rich Text Editor.

  • c#
  • SfRichTextEditor richTextEditor = new SfRichTextEditor();
    richTextEditor.PlaceHolder = "Type something";
    ObservableCollection<object> collection = new ObservableCollection<object>();
    collection.Add(ToolbarOptions.Italic);
    collection.Add(ToolbarOptions.Underline);
    collection.Add(ToolbarOptions.Bold);
    Button emojiButton = new Button();
    emojiButton.BackgroundColor = Color.Transparent;
    emojiButton.HeightRequest = 50;
    emojiButton.WidthRequest = 50;
    emojiButton.Text = "\U0001F642";
    collection.Add(emojiButton);
    collection.Add(ToolbarOptions.NumberList);
    collection.Add(ToolbarOptions.BulletList);
    richTextEditor.ToolbarItems = collection;
    this.Content = richTextEditor;