Merge pull request #3583 from syncfusion-content/Tools-UG-Rich-text-editor

Updated the missing APIs in SfRichTextEditor UG

Author: Choza-rajan

MAUI/Rich-Text-Editor/Basic-Features.md

@@ -11,46 +11,43 @@ documentation: ug
 
 This section covers the essential properties, methods, and events of the .NET MAUI `SfRichTextEditor` for handling content and user interactions.
 
-## Handling Content
+## Setting Text
 
-### Setting and Getting HTML Content
+The Rich Text Editor control displays the text/formatted text(HTML string) that can be set using the `Text` property.
 
-The rich content of the editor, including all formatting, is accessible through the `Text` property. You can use this property to both load and retrieve the content as an HTML string.
+{% tabs %} 
 
-{% tabs %}
-
-{% highlight xaml %}
+{% highlight xaml %} 
 
-<rte:SfRichTextEditor Text="The Syncfusion .NET MAUI Rich Text Editor is a WYSIWYG editor for creating and editing rich text content." />
+ <richtexteditor:SfRichTextEditor 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" />
 
 {% endhighlight %}
 
-{% highlight c# %}
+{% highlight C# %} 
 
 SfRichTextEditor richTextEditor = new SfRichTextEditor();
-richTextEditor.Text = "The Syncfusion .NET MAUI Rich Text Editor is a WYSIWYG editor for creating and editing rich text content.";
-this.Content = richTextEditor;
+richtexteditor.Text = "The <b>rich text editor</b> component is WYSIWYG editor that provides the best user experience to create and update the content";
 
 {% endhighlight %}
 
 {% endtabs %}
 
-### Getting HTML Content Asynchronously
+## Retrieving HTML text
 
-To ensure you get the most up-to-date content, especially after recent edits, you can retrieve the HTML string asynchronously using the `GetHtmlString` method.
+The formatted text of Rich Text Editor can be retrieved using the `HtmlText` property of `SfRichTextEditor`.
 
-{% tabs %}
+{% tabs %} 
 
-{% highlight c# %}
+{% highlight C# %} 
 
-string htmlContent = await rte.GetHtmlText();
+string HTMLText = richtexteditor.HtmlText;
 
 {% endhighlight %}
 
 {% endtabs %}
 
 
-### Getting Selected HTML
+## Getting Selected HTML
 
 To retrieve the HTML representation of the currently selected content, use the `GetSelectedText` method.
 
@@ -64,57 +61,189 @@ string selectedText = await rte.GetSelectedText();
 
 {% 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 %}
+
+![.NET MAUI Rich Text Editor with Default text style](images/richtexteditor-text.png)
+
+
 ## 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.
+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 Here..." />
+<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 Here...";
+richTextEditor.Placeholder = "Type your content here...";
+richTextEditor.PlaceholderFontFamily = "Impact";
+richTextEditor.PlaceholderFontSize = 24;
+richTextEditor.PlaceholderColor = Colors.Green;
 
 {% endhighlight %}
-
 {% endtabs %}
 
 ![.NET MAUI Rich Text Editor with Placeholder](images/richtexteditor-placeholder.png)
 
 
-## Events
 
-### TextChanged Event
+## Programmatic Control
 
-The `TextChanged` event is fired whenever the content in the editor is changed. The event arguments provide the old and new HTML content.
+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 xaml %}
+{% highlight c# %}
 
-<rte:SfRichTextEditor TextChanged="OnTextChanged" />
+richTextEditor.MoveCursorToStart();
 
 {% endhighlight %}
 
+{% endtabs %}
+
+### Move Cursor to End
+
+Moves the cursor to the very end of the content in the editor.
+
+{% tabs %}
+
 {% highlight c# %}
 
-private void OnTextChanged(object sender, RichTextEditorTextChangedEventArgs e)
-{
-    string oldHtml = e.OldValue;
-    string newHtml = e.NewValue;
-    // Logic to execute when the Text changes.
-}
+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
+
 ### FormatChanged Event
 
 The `FormatChanged` event is Occurs when the formatting status changes. This is useful for implementing contextual formatting options.
@@ -131,7 +260,7 @@ The `FormatChanged` event is Occurs when the formatting status changes. This is
 
 private void OnFormatChanged(object sender, RichTextEditorFormatChangedEventArgs e)
 {
-    // Logic to execute when the Format changes.
+    // Handle when format changed
 }
 
 {% endhighlight %}
@@ -161,26 +290,75 @@ private void OnHyperlinkClicked(object sender, RichTextEditorHyperlinkClickedEve
 {
     string url =  e.URL;
     string text = e.DisplayText;
-    // You can handle the navigation here, for example:
+    // Handle when hyperlink clicked
 }
 
 {% endhighlight %}
 
 {% endtabs %}
 
-## Focus Management
+### TextChanged Event
 
-You can programmatically set or remove focus from the editor control using the `Focus()` and `Unfocus()` methods.
+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 C# %}
+{% highlight xaml %}
 
-// To set focus on the Rich Text Editor
-richTextEditor.Focus();
+<rte:SfRichTextEditor TextChanged="OnTextChanged" />
 
-// To remove focus from the Rich Text Editor
-richTextEditor.Unfocus();
+{% endhighlight %}
+
+{% highlight c# %}
+
+private void OnTextChanged(object sender, RichTextEditorTextChangedEventArgs e)
+{
+    string oldHtml = e.OldValue;
+    string newHtml = e.NewValue;
+    // 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 %}