-
Notifications
You must be signed in to change notification settings - Fork 31
995242 Update Rich text editor UG content #3822
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
ae93452
commit
EzhilarasanElangovan31 37e5eda
commit
EzhilarasanElangovan31 8639ab0
commit
EzhilarasanElangovan31 f4c378c
commit
EzhilarasanElangovan31 b0d7dd9
commit
EzhilarasanElangovan31 d63e2f3
commit
EzhilarasanElangovan31 6717721
commit
EzhilarasanElangovan31 a868211
commit
EzhilarasanElangovan31 5dd4da4
commit
EzhilarasanElangovan31 1d3044b
commit
EzhilarasanElangovan31 898a1c8
commit
EzhilarasanElangovan31 e00c243
commit
EzhilarasanElangovan31 74d0eda
commit
EzhilarasanElangovan31 5277308
commit
EzhilarasanElangovan31 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| --- | ||
| layout: post | ||
| title: Toolbar in .NET MAUI Rich Text Editor | Syncfusion® | ||
| description: Learn here all about Toolbar features in Syncfusion® .NET MAUI Rich Text Editor (SfRichTextEditor) control. | ||
| platform: maui | ||
| control: Rich Text Editor | ||
| documentation: ug | ||
| --- | ||
|
|
||
| # Toolbar in .NET MAUI Rich Text Editor (SfRichTextEditor) | ||
|
|
||
| ## Toolbar position | ||
|
|
||
| The Rich Text Editor allows you to position the toolbar at the top or bottom of the content area, depending on your layout requirements. By default, the toolbar appears at the top on Windows and macOS, and at the bottom on Android and iOS for better accessibility. | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <rte:SfRichTextEditor ToolbarPosition="Bottom" /> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| SfRichTextEditor richTextEditor = new SfRichTextEditor(); | ||
| richTextEditor.ToolbarPosition = RichTextEditorToolbarPosition.Bottom; | ||
|
|
||
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| ## Link quick tooltip | ||
|
|
||
| The link quick tooltip appears when you click on a link in the editor. The Rich Text Editor provides essential tools in the link quick tooltip, including “Open”, “Edit Link” and “Remove Link”. | ||
|
|
||
|  | ||
|
|
||
| N> The link quick tooltip will automatically disappear after 2 seconds if there is no user interaction. | ||
|
|
||
| ## Customizing the Toolbar | ||
|
|
||
| The [SfRichTextEditor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.SfRichTextEditor.html) toolbar is highly customizable, allowing you to control its items, styling, and position. | ||
|
|
||
| ### Add or Remove Toolbar Items | ||
|
|
||
| By default, the toolbar includes a comprehensive set of formatting tools. You can specify a custom set of items by populating the [ToolbarItems](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.SfRichTextEditor.html#Syncfusion_Maui_RichTextEditor_SfRichTextEditor_ToolbarItems) collection. This allows you to add or remove any built-in toolbar item. | ||
|
|
||
| The following items are available to be added to the `ToolbarItems` collection: | ||
| * `Bold`, `Italic`, `Underline`, `Strikethrough` | ||
| * `SubScript`, `SuperScript` | ||
| * `FontFamily`, `FontSize`, `TextColor`, `HighlightColor` | ||
| * `ParagraphFormat` , `Alignment` | ||
| * `NumberList`, `BulletList` | ||
| * `IncreaseIndent`, `DecreaseIndent` | ||
| * `Hyperlink`, `Image`, `Table` | ||
| * `Undo`, `Redo` | ||
| * `Separator` | ||
|
|
||
| {% tabs %} | ||
| {% highlight xaml %} | ||
|
|
||
| <rte:SfRichTextEditor ShowToolbar="True"> | ||
| <rte:SfRichTextEditor.ToolbarItems> | ||
| <!-- Define a custom set of toolbar items --> | ||
| <rte:RichTextToolbarItem Type="Bold" /> | ||
| <rte:RichTextToolbarItem Type="Italic" /> | ||
| <rte:RichTextToolbarItem Type="Underline" /> | ||
| <rte:RichTextToolbarItem Type="Separator" /> | ||
| <rte:RichTextToolbarItem Type="NumberList" /> | ||
| <rte:RichTextToolbarItem Type="BulletList" /> | ||
| </rte:SfRichTextEditor.ToolbarItems> | ||
| </rte:SfRichTextEditor> | ||
|
|
||
| {% endhighlight %} | ||
| {% highlight c# %} | ||
|
|
||
| SfRichTextEditor richTextEditor = new SfRichTextEditor(); | ||
| richTextEditor.ShowToolbar = true; | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Bold }); | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Italic }); | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Underline }); | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Separator }); | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.NumberList }); | ||
| richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.BulletList }); | ||
|
|
||
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| ### Customize Toolbar Appearance | ||
|
|
||
| You can customize the visual style of the toolbar using the `ToolbarSettings` property. This gives you access to the [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html) object, which has several properties for changing its appearance. | ||
|
|
||
| * [BackgroundColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_BackgroundColor): Sets the Background color or brush of the toolbar. | ||
| * [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_TextColor) : Sets the color of the toolbar item icons. | ||
| * [IsScrollButtonVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_IsScrollButtonVisible): Sets the scroll button visibility. | ||
| * [SeparatorColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_SeparatorColor): Sets the color of the separator lines between toolbar items. | ||
| * [SeparatorThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_SeparatorThickness): Sets the thickness of the separator lines. | ||
| * [ForwardIconBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_ForwardIconBackground): Sets the background color of the forward scroll icon. | ||
| * [ForwardIconColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_ForwardIconColor): Sets the color of the forward scroll icon. | ||
| * [BackwardIconBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_BackwardIconBackground): Sets the background color of the backward scroll icon. | ||
| * [BackwardIconColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_BackwardIconColor): Sets the color of the backward scroll icon. | ||
| * [SelectionColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_SelectionColor): Sets the color for toolbar text hover and selection color. | ||
|
|
||
|
|
||
| {% tabs %} | ||
| {% highlight xaml %} | ||
|
|
||
| <rte:SfRichTextEditor ShowToolbar="True"> | ||
| <rte:SfRichTextEditor.ToolbarSettings> | ||
| <rte:RichTextEditorToolbarSettings BackgroundColor="SkyBlue" SelectionColor="Brown" | ||
| TextColor="Orange" IsScrollButtonVisible="True" | ||
| SeparatorColor="Brown" SeparatorThickness="5" | ||
| ForwardIconBackground="Blue" ForwardIconColor="Green" | ||
| BackwardIconBackground="Yellow" BackwardIconColor="Green"/> | ||
| </rte:SfRichTextEditor.ToolbarSettings> | ||
| </rte:SfRichTextEditor> | ||
|
|
||
| {% endhighlight %} | ||
| {% highlight c# %} | ||
|
|
||
| SfRichTextEditor richTextEditor = new SfRichTextEditor(); | ||
| richTextEditor.ShowToolbar = true; | ||
| richTextEditor.ToolbarSettings = new RichTextEditorToolbarSettings | ||
| { | ||
| IsScrollButtonVisible = true, | ||
| TextColor = Colors.Orange, | ||
| BackgroundColor = Colors.SkyBlue, | ||
| SelectionColor = Colors.Brown, | ||
| SeparatorColor = Colors.Brown, | ||
| SeparatorThickness = 5, | ||
| ForwardIconBackground = Colors.Blue, | ||
| ForwardIconColor = Colors.Green, | ||
| BackwardIconBackground = Colors.Yellow, | ||
| BackwardIconColor = Colors.Green | ||
| }; | ||
|
|
||
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
|  |
EzhilarasanElangovan31 marked this conversation as resolved.
Show resolved
Hide resolved
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.