Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 13 additions & 21 deletions MAUI/Rich-Text-Editor/AutoSize.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,36 @@ documentation: ug

# AutoSize in .NET MAUI Rich Text Editor (SfRichTextEditor)

The .NET MAUI Rich Text Editor control supports dynamically changing its height based on the content. This feature can be enabled by setting the `EnableAutoSize` property to `True`. When enabled, the editor will automatically resize to fit its content, eliminating the need for scroll bars within the control. By default, the `EnableAutoSize` property is `False`.
The .NET MAUI Rich Text Editor control can dynamically change its height to fit the content by setting the `EnableAutoSize` property to `True`. By default, this property is `False`.

The following code example shows how to enable `EnableAutoSize` in the Rich Text Editor control.
When `EnableAutoSize` is active, the editor’s height will grow or shrink as content is added or removed. For the best results, place the editor within a layout that can accommodate its changing height, such as a `VerticalStackLayout`.

The following example demonstrates how to place an auto-sizing `SfRichTextEditor` inside a `VerticalStackLayout`.

{% tabs %}

{% highlight xaml %}

<rte:SfRichTextEditor EnableAutoSize="True" />
<VerticalStackLayout>
<rte:SfRichTextEditor x:Name="richTextEditor"
EnableAutoSize="True"/>
</VerticalStackLayout>

{% endhighlight %}

{% highlight c# %}

VerticalStackLayout verticalStackLayout = new VerticalStackLayout();
SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.EnableAutoSize = true;
verticalStackLayout.Children.Add(richTextEditor);
this.Content = verticalStackLayout;

{% endhighlight %}
{% endtabs %}

When `EnableAutoSize` is active, the editor’s height will grow or shrink as content is added or removed.
The editor will now automatically resize to match the content's height.

![.NET MAUI Rich Text Editor with AutoSize enabled](images/richtexteditor-autosize.gif)

N> When using `EnableAutoSize`, it is recommended not to set the `HeightRequest` property on the `SfRichTextEditor`, as this may interfere with the automatic resizing behavior. For the best results, place the editor within a layout that can accommodate its changing height, such as a `VerticalStackLayout` inside a `ScrollView`.

The following example demonstrates how to place an auto-sizing `SfRichTextEditor` within a `ScrollView`.

{% tabs %}
{% highlight xaml %}
<ScrollView>
<VerticalStackLayout>
<Label Text="User Feedback" FontSize="Title" Padding="10"/>
<rte:SfRichTextEditor x:Name="richTextEditor"
EnableAutoSize="True"
Placeholder="Please provide your detailed feedback here..."/>
<Button Text="Submit" Margin="10"/>
</VerticalStackLayout>
</ScrollView>
{% endhighlight %}
{% endtabs %}
N> When using `EnableAutoSize`, it is recommended not to set the `HeightRequest` property on the `SfRichTextEditor`, as this may interfere with the automatic resizing behavior.
8 changes: 4 additions & 4 deletions MAUI/Rich-Text-Editor/Basic-Features.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,6 @@ Re-applies the last action that was undone.

{% tabs %}


{% highlight c# %}

richTextEditor.Redo();
Expand All @@ -250,10 +249,11 @@ richTextEditor.Redo();
{% 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.
The `FormatChanged` event is occurs when the formatting status changes. This is useful for implementing contextual formatting options.

{% tabs %}

Expand All @@ -276,7 +276,7 @@ private void OnFormatChanged(object sender, RichTextEditorFormatChangedEventArgs

### 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.
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 %}

Expand All @@ -289,7 +289,7 @@ The `HyperlinkClicked` event is fired when a user taps on a hyperlink within the
{% highlight c# %}

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.Text = "<p>Visit the <a href='https://www.syncfusion.com'>Syncfusion</a> website.</p>";
richTextEditor.HtmlText = "<p>Visit the <a href='https://www.syncfusion.com'>Syncfusion</a> website.</p>";
richTextEditorHyperlinkClicked += OnHyperlinkClicked


Expand Down
8 changes: 4 additions & 4 deletions MAUI/Rich-Text-Editor/Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Customization in .NET MAUI Rich Text Editor (SfRichTextEditor)

The .NET MAUI Rich Text Editor control provides extensive options for customizing the toolbar's items, appearance, and position, as well as the editor's placeholder text and read-only state.
The .NET MAUI Rich Text Editor control provides extensive options for customizing its appearance and functionality, from the toolbar and editor area to programmatic formatting and hyperlink management.

## Customizing the Toolbar

Expand Down Expand Up @@ -283,9 +283,9 @@ richTextEditor.InsertHyperlink("Example", "https://example.com");

### Edit a Hyperlink

Use the `EditHyperlink( string text, string oldUrl, string newUrl)` method to modify an existing hyperlink. You can change its display text or its target URL.
Use the `EditHyperlink(string text, string oldUrl, string newUrl)` method to modify an existing hyperlink. You can change its target URL.

* `text`: The new display text for the hyperlink.
* `text`: The existing display text for the hyperlink.
* `oldUrl`: The original URL of the hyperlink you want to edit.
* `newUrl`: The new URL for the hyperlink.

Expand All @@ -309,7 +309,7 @@ Use the `"RemoveHyperlink(string text, string Url)` method to remove a hyperlink
{% highlight c# %}

// Remove a specific hyperlink, keeping its text
richTextEditor.RemoveHyperlink("Syncfusion", "https://www.google.com/");
richTextEditor.RemoveHyperlink("Example", "https://www.google.com/");

{% endhighlight %}
{% endtabs %}
Expand Down
3 changes: 2 additions & 1 deletion MAUI/Rich-Text-Editor/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -312,4 +312,5 @@ this.Content = richTextEditor;

{% endtabs %}

N> You can find the getting started sample of .NET MAUI SfRichTextEditor from this **link**.
N> You can find the getting started sample of .NET MAUI SfRichTextEditor from this `link`.

4 changes: 2 additions & 2 deletions MAUI/Rich-Text-Editor/Image-Insertion.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ private async void OnImageInserting(object sender, RichTextEditorImageRequestedE
RichTextEditorImageSource richTextEditorImageSource = new();
richTextEditorImageSource.ImageFormat = RichTextEditorImageFormat.Base64;
richTextEditorImageSource.Source =ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"));
richTextEditorImageSource.Width = 100;
richTextEditorImageSource.Height = 20;
richTextEditorImageSource.Width = 250;
richTextEditorImageSource.Height = 100;
richTextEditor.InsertImage(richTextEditorImageSource);
}

Expand Down