diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/install-nuget-packages.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/install-nuget-packages.md index b635ffd94a..755c628089 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/install-nuget-packages.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/install-nuget-packages.md @@ -46,7 +46,7 @@ The NuGet **Package Manager UI** allows to search, install, uninstall, and updat ![ASP.NET Core NuGet Packages Install](images/InstallNuGet.png) -5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development. +5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development. ## Installation using Dotnet (.NET) CLI @@ -72,7 +72,7 @@ Follow the below instructions to use the dotnet CLI command to install the Syncf N> Restoring is done automatically with **dotnet build** and **dotnet run** in .NET Core 2.0 and later. -5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development. +5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development. ## Installation using Package Manager Console @@ -110,4 +110,4 @@ The **Package Manager Console** saves NuGet packages installation time since you 4. The NuGet package manager console will install the Syncfusion® ASP.NET Core JS2 NuGet package as well as the dependencies it has. When the installation is complete, the console will show that your Syncfusion® ASP.NET Core JS2 package has been successfully added to the application. -5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development. \ No newline at end of file +5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development. \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/29.1.41.md b/ej2-asp-core-mvc/Release-notes/29.1.41.md new file mode 100644 index 0000000000..f21aecadb3 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/29.1.41.md @@ -0,0 +1,103 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Nuget Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Nuget Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="May 06, 2025" version="v29.1.41" passed="187958" failed="0" %} + +{% directory path: _includes/release-notes/v29.1.41 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 106 | 106 | 0 | All Passed | +| AI Assist View | 430 | 430 | 0 | All Passed | +| App Bar | 50 | 50 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 90 | 90 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 84 | 84 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 3884 | 3884 | 0 | All Passed | +| Chat UI | 46 | 46 | 0 | All Passed | +| CircularGauge | 283 | 283 | 0 | All Passed | +| ColorPicker | 45 | 45 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 616 | 616 | 0 | All Passed | +| Context Menu | 65 | 65 | 0 | All Passed | +| Dashboard layout | 31 | 31 | 0 | All Passed | +| Data Grid | 2521 | 2521 | 0 | All Passed | +| Date Picker | 381 | 381 | 0 | All Passed | +| Date Range Picker | 418 | 418 | 0 | All Passed | +| Date Time Picker | 306 | 306 | 0 | All Passed | +| Diagram | 18521 | 18521 | 0 | All Passed | +| Document Editor | 3311 | 3311 | 0 | All Passed | +| DropDown Button | 48 | 48 | 0 | All Passed | +| Dropdown List | 188 | 188 | 0 | All Passed | +| Dropdown Tree | 104 | 104 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 64 | 64 | 0 | All Passed | +| Gantt | 2461 | 2461 | 0 | All Passed | +| HeatMap Chart | 478 | 478 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 613 | 613 | 0 | All Passed | +| Kanban | 65 | 65 | 0 | All Passed | +| LinearGauge | 309 | 309 | 0 | All Passed | +| Listbox | 70 | 70 | 0 | All Passed | +| ListView | 83 | 83 | 0 | All Passed | +| Maps | 1126 | 1126 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 67 | 67 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 345 | 345 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| PDF Viewer | 19501 | 19501 | 0 | All Passed | +| Pivot Table | 2010 | 2010 | 0 | All Passed | +| Progress Bar | 78 | 78 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 37 | 37 | 0 | All Passed | +| RangeNavigator | 138 | 138 | 0 | All Passed | +| Rating | 201 | 201 | 0 | All Passed | +| Ribbon | 486 | 486 | 0 | All Passed | +| Rich Text Editor | 3901 | 3901 | 0 | All Passed | +| schedule | 4576 | 4576 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 40 | 40 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 57 | 57 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 48 | 48 | 0 | All Passed | +| Spreadsheet | 9060 | 9060 | 0 | All Passed | +| Stepper | 138 | 138 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 82 | 82 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 33 | 33 | 0 | All Passed | +| Time Picker | 177 | 177 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 130 | 130 | 0 | All Passed | +| ToolTip | 135 | 135 | 0 | All Passed | +| TreeGrid | 2703 | 2703 | 0 | All Passed | +| Treemap | 209 | 209 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | +| DocIO | 15376 | 15376 | 0 | All Passed | +| PDF | 11853 | 11853 | 0 | All Passed | +| Presentation | 54238 | 54238 | 0 | All Passed | +| XlsIO | 17070 | 17070 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comment-only-protect/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/comment-only-protect/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comment-only-protect/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/razor new file mode 100644 index 0000000000..e2e103e1a4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/razor @@ -0,0 +1,23 @@ + +@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").BeforeCommentAction("beforeComment").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/tagHelper new file mode 100644 index 0000000000..484dd7a5fd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/tagHelper @@ -0,0 +1,24 @@ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor new file mode 100644 index 0000000000..ef0ae7c5e7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor @@ -0,0 +1,38 @@ +@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper new file mode 100644 index 0000000000..26af90f131 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper @@ -0,0 +1,39 @@ +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/razor index 0efbf1e5c5..2979d6865d 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/razor +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/razor @@ -11,7 +11,9 @@ // To select the current paragraph in document container.documentEditor.selection.selectParagraph(); - // To get the selected content as sfdt - var selectedContent = container.documentEditor.selection.sfdt; + // To get the selected content as text + var selectedContentText = container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + var selectedContentSFDT = container.documentEditor.selection.sfdt; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/tagHelper index 5e87f95a83..9cf6c5e9f1 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/tagHelper @@ -13,7 +13,9 @@ // To select the current paragraph in document container.documentEditor.selection.selectParagraph(); - // To get the selected content as sfdt - var selectedContent = container.documentEditor.selection.sfdt; + // To get the selected content as text + var selectedContentText = container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + var selectedContentSFDT = container.documentEditor.selection.sfdt; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/razor index 98f75c0595..69a7a6ea6d 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/razor +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/razor @@ -12,6 +12,8 @@ container.documentEditor.selection.selectCurrentWord(); // To get the selected content as text - var selectedContent = container.documentEditor.selection.text; + var selectedContentText = container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + var selectedContentSFDT = container.documentEditor.selection.sfdt; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/tagHelper index 7569edbf72..59352fa775 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/tagHelper @@ -14,6 +14,8 @@ container.documentEditor.selection.selectCurrentWord(); // To get the selected content as text - var selectedContent = container.documentEditor.selection.text; + var selectedContentText = container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + var selectedContentSFDT = container.documentEditor.selection.sfdt; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/razor new file mode 100644 index 0000000000..33dcd7df80 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/razor @@ -0,0 +1,13 @@ +
+ @Html.EJS().DocumentEditorContainer("container").documentChange("onDocChange").EnableToolbar(true).Render() +
+ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/tagHelper new file mode 100644 index 0000000000..98110a0409 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/tagHelper @@ -0,0 +1,9 @@ + + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor b/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor index 904635e29b..f66b2d964f 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor +++ b/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor @@ -8,7 +8,7 @@ var toolItem = { prefixIcon: "e-de-ctnr-lock", tooltipText: "Disable Image", - text: "Disable Image", + text: onWrapText("Disable Image"), id: "Custom" }; container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']; @@ -21,4 +21,17 @@ } }; } + + function onWrapText(text) { + let content = ''; + const index = text.lastIndexOf(' '); + + if (index !== -1) { + content = text.slice(0, index) + "
" + text.slice(index + 1) + "
"; + } else { + content = text; + } + + return content; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper index 2fe34e4560..437e447777 100644 --- a/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper @@ -5,7 +5,7 @@ var toolItem = { prefixIcon: "e-de-ctnr-lock", tooltipText: "Disable Image", - text: "Disable Image", + text: onWrapText("Disable Image"), id: "Custom" }; container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']; @@ -18,4 +18,17 @@ } }; } + + function onWrapText(text) { + let content = ''; + const index = text.lastIndexOf(' '); + + if (index !== -1) { + content = text.slice(0, index) + "
" + text.slice(index + 1) + "
"; + } else { + content = text; + } + + return content; + } diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/controller.cs new file mode 100644 index 0000000000..3045958bec --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/controller.cs @@ -0,0 +1,10 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

The Rich Text Editor component is WYSIWYG (\'what you see is what you get\') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

Key features:

"; + ViewBag.items = new[] { "Undo", "Redo", "|", "Bold", "Italic", "Underline", "StrikeThrough", "|", "FontName", "FontSize", "FontColor", "BackgroundColor" }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/razor new file mode 100644 index 0000000000..5963639b24 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/razor @@ -0,0 +1,2 @@ + +@Html.EJS().RichTextEditor("toolbar").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/tagHelper new file mode 100644 index 0000000000..19d49f85e6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/controller.cs new file mode 100644 index 0000000000..9a7863132e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/controller.cs @@ -0,0 +1,10 @@ +public class HomeController : Controller +{ + + public ActionResult Index() + { + ViewBag.value = @"

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.

Key features:

Sky with sun
"; + ViewBag.text = new[] { "Bold", "Italic", "Underline", "FontColor", "BackgroundColor", "Alignments", "-", "FontSize", "FontName", "Formats", "OrderedList", "UnorderedList"}; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/razor new file mode 100644 index 0000000000..de54210d29 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("text").QuickToolbarSettings(e => { e.Text((object)ViewBag.text); }).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/tagHelper new file mode 100644 index 0000000000..3e886d3993 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/comments.md b/ej2-asp-core-mvc/document-editor/comments.md index aeae6d2a4d..79af00e46f 100644 --- a/ej2-asp-core-mvc/document-editor/comments.md +++ b/ej2-asp-core-mvc/document-editor/comments.md @@ -153,7 +153,9 @@ Document editor provides an option to protect and unprotect document using `enfo {% include code-snippet/document-editor-container/comment-only-protect/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Comment-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/comment-only-protect/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -162,7 +164,9 @@ Document editor provides an option to protect and unprotect document using `enfo {% include code-snippet/document-editor-container/comment-only-protect/razor %} {% endhighlight %} {% highlight c# tabtitle="Comment-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/comment-only-protect/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} @@ -185,7 +189,9 @@ The following example illustrates how to enable mention support in Document Edit {% include code-snippet/document-editor-container/comments-mention/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="comments-mention.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/comments-mention/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -194,5 +200,36 @@ The following example illustrates how to enable mention support in Document Edit {% include code-snippet/document-editor-container/comments-mention/razor %} {% endhighlight %} {% highlight c# tabtitle="comments-mention.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/comments-mention/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Events + +DocumentEditor provides `beforeCommentAction` event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the `CommentActionEventArgs` object as an argument, which allows access to information about the comment. + +To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/comments-event/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="comments-event.cs" %} +{% include code-snippet/document-editor-container/comments-event/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/comments-event/razor %} +{% endhighlight %} +{% highlight c# tabtitle="comments-event.cs" %} +{% include code-snippet/document-editor-container/comments-event/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md b/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md index 28fa60756d..913afa9e41 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md @@ -22,7 +22,9 @@ Similarly, you can use `documentEditorSettings` property for DocumentEditor also {% include code-snippet/document-editor-container/customize-color-picker/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="customize-color-picker.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/customize-color-picker/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -31,15 +33,20 @@ Similarly, you can use `documentEditorSettings` property for DocumentEditor also {% include code-snippet/document-editor-container/customize-color-picker/razor %} {% endhighlight %} {% highlight c# tabtitle="customize-color-picker.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/customize-color-picker/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} The following table illustrates all the possible properties for the color picker. -| Property | Behaviour | +| Property | Behavior | |---|---| | columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 | | disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false | | mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ | | modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true | -| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true | \ No newline at end of file +| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true | + + +>**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options. diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md b/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md index 0ec79a94dc..0149b5d3f1 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md @@ -90,3 +90,27 @@ The following code shows how to hide or show added custom option in context menu {% endhighlight %}{% endtabs %} {% endif %} +#### Customize Context Menu with sub-menu items + +Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the `addCustomMenu()` method. + +The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-sub-context-menu/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Customize-sub-context-menu" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-sub-context-menu/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Customize-sub-context-menu" %} +{% endhighlight %}{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/how-to/get-current-word.md b/ej2-asp-core-mvc/document-editor/how-to/get-current-word.md index 3a7c3fe742..36ffa42310 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/get-current-word.md +++ b/ej2-asp-core-mvc/document-editor/how-to/get-current-word.md @@ -1,6 +1,6 @@ --- layout: post -title: Select and retrieve current word and Paragraph in ##Platform_Name## Document Editor Component +title: Get current Word/Para in ##Platform_Name## Document editor control | Syncfusion description: Learn how to select and retrieve current word and Paragraph from the Syncfusion ##Platform_Name## Document Editor Component platform: ej2-asp-core-mvc control: Get The Current Word And Paragrapgh @@ -25,7 +25,9 @@ The following example code illustrates how to select and get the current word as {% include code-snippet/document-editor-container/get-word/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Get-word.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% code-snippet/document-editor-container/get-word/document-editor.cs %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -34,12 +36,12 @@ The following example code illustrates how to select and get the current word as {% include code-snippet/document-editor-container/get-word/razor %} {% endhighlight %} {% highlight c# tabtitle="Get-word.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-word/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} -To get the bookmark content as SFDT (rich text), check this [`link`](../../document-editor/how-to/get-the-selected-content/#get-the-selected-content-as-sfdt-rich-text) - ## Select and get the paragraph in current cursor position You can use [`selectParagraph`] API in selection module to select the current paragraph at cursor position and use [`text`] API or [`sfdt`] API to get the selected content as plain text or SFDT from Document Editor component. @@ -53,7 +55,9 @@ The following example code illustrates how to select and get the current paragra {% include code-snippet/document-editor-container/get-paragraph/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Get-paragraph.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-paragraph/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -62,5 +66,7 @@ The following example code illustrates how to select and get the current paragra {% include code-snippet/document-editor-container/get-paragraph/razor %} {% endhighlight %} {% highlight c# tabtitle="Get-paragraph.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-paragraph/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/document-editor/how-to/get-the-selected-content.md b/ej2-asp-core-mvc/document-editor/how-to/get-the-selected-content.md index c822f07a24..c45d931f0f 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/get-the-selected-content.md +++ b/ej2-asp-core-mvc/document-editor/how-to/get-the-selected-content.md @@ -1,6 +1,6 @@ --- layout: post -title: Get The Selected Content in ##Platform_Name## Document Editor Component +title: Get Selected Content in ##Platform_Name## Document Editor Component | Syncfusion description: Learn here all about get the selected content in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Get The Selected Content @@ -24,7 +24,9 @@ You can use `text` API to get the selected content as plain text from React Docu {% include code-snippet/document-editor-container/get-text/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Get-text.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-text/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -33,7 +35,9 @@ You can use `text` API to get the selected content as plain text from React Docu {% include code-snippet/document-editor-container/get-text/razor %} {% endhighlight %} {% highlight c# tabtitle="Get-text.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-text/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} @@ -46,7 +50,7 @@ You can add the following custom options using this API, ## Get the selected content as SFDT (rich text) -You can use `sfdt` API to get the selected content as plain text from React Document Editor component. +You can use `sfdt` API to get the selected content as rich text from React Document Editor component. {% if page.publishingplatform == "aspnet-core" %} @@ -55,7 +59,9 @@ You can use `sfdt` API to get the selected content as plain text from React Docu {% include code-snippet/document-editor-container/get-sfdt/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Get-sfdt.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-sfdt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -64,7 +70,9 @@ You can use `sfdt` API to get the selected content as plain text from React Docu {% include code-snippet/document-editor-container/get-sfdt/razor %} {% endhighlight %} {% highlight c# tabtitle="Get-sfdt.cs" %} -{% endhighlight %}{% endtabs %} +{% code-snippet/document-editor-container/get-sfdt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} @@ -72,5 +80,5 @@ You can use `sfdt` API to get the selected content as plain text from React Docu You can add the following custom options using this API, * Save or export the selected content as SFDT file. -* Get the content of a bookmark in Word document as SFDT by selecting a bookmark using `selectbookmark` API. +* Get the content of a bookmark in Word document as SFDT by selecting a bookmark using `select bookmark` API. * Create template content that can be inserted to multiple documents in cursor position using `paste` API. \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/images/Column_Limit_Alert.png b/ej2-asp-core-mvc/document-editor/images/Column_Limit_Alert.png new file mode 100644 index 0000000000..01d15c9afa Binary files /dev/null and b/ej2-asp-core-mvc/document-editor/images/Column_Limit_Alert.png differ diff --git a/ej2-asp-core-mvc/document-editor/images/Row_Limit_Alert.png b/ej2-asp-core-mvc/document-editor/images/Row_Limit_Alert.png new file mode 100644 index 0000000000..147f9050a4 Binary files /dev/null and b/ej2-asp-core-mvc/document-editor/images/Row_Limit_Alert.png differ diff --git a/ej2-asp-core-mvc/document-editor/images/fontColor.png b/ej2-asp-core-mvc/document-editor/images/fontColor.png new file mode 100644 index 0000000000..3568c2c6c4 Binary files /dev/null and b/ej2-asp-core-mvc/document-editor/images/fontColor.png differ diff --git a/ej2-asp-core-mvc/document-editor/section-format.md b/ej2-asp-core-mvc/document-editor/section-format.md index 0688fc57e1..29e671e6bd 100644 --- a/ej2-asp-core-mvc/document-editor/section-format.md +++ b/ej2-asp-core-mvc/document-editor/section-format.md @@ -35,6 +35,8 @@ documenteditor.selection.sectionFormat.bottomMargin = 10; documenteditor.selection.sectionFormat.topMargin = 10; ``` +>Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584. + ## Header distance You can define the distance of header content from the top of the page by using the following sample code. @@ -53,4 +55,4 @@ documenteditor.selection.sectionFormat.footerDistance = 72; ## See Also -* [Pagesetup dialog](../document-editor/dialog#page-setup-dialog) \ No newline at end of file +* [Pagesetup dialog](../document-editor/dialog#page-setup-dialog) diff --git a/ej2-asp-core-mvc/document-editor/table.md b/ej2-asp-core-mvc/document-editor/table.md index eddaba6109..68811c5762 100644 --- a/ej2-asp-core-mvc/document-editor/table.md +++ b/ej2-asp-core-mvc/document-editor/table.md @@ -1,6 +1,6 @@ --- layout: post -title: Table in ##Platform_Name## Document Editor Component +title: Table in ##Platform_Name## Document Editor Component | Syncfusion description: Learn here all about table in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Table @@ -21,7 +21,109 @@ You can create and insert a table at cursor position by specifying the required documenteditor.editor.insertTable(3,3); ``` -The maximum size of row and column is limited to 32767 and 63 respectively. +## Set the maximum number of Rows when inserting a table + +{% if page.publishingplatform == "aspnet-core" %} + +You can use the `maximumRows` property to set the maximum number of rows allowed while inserting a table in the Document Editor component. + +Refer to the following sample code. + +```ts + + + +``` + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +You can use the `maximumRows` property to set the maximum number of rows allowed while inserting a table in the Document Editor component. + +```ts +
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render() +
+ +``` + +{% endif %} + +When the maximum row limit is reached, an alert will appear, as follow + +![Row Limit Alert](images/Row_Limit_Alert.PNG) + +>Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property. + +## Set the maximum number of Columns when inserting a table + +{% if page.publishingplatform == "aspnet-core" %} + +You can use the `maximumColumns` property to set the maximum number of columns allowed while inserting a table in the Document Editor component. + +Refer to the following sample code. + +```ts + + + +``` + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +You can use the `maximumColumns` property to set the maximum number of columns allowed while inserting a table in the Document Editor component. + +Refer to the following sample code. + +```ts +
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render() +
+ +``` + +{% endif %} + +When the maximum column limit is reached, an alert will appear, as follow + +![Column Limit Alert](images/Column_Limit_Alert.PNG) + +>Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property. ## Insert rows @@ -145,7 +247,9 @@ The following sample demonstrates how to delete the table row or columns, merge {% include code-snippet/document-editor/table/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Table.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor/table/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -154,7 +258,9 @@ The following sample demonstrates how to delete the table row or columns, merge {% include code-snippet/document-editor/table/razor %} {% endhighlight %} {% highlight c# tabtitle="Table.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor/table/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} @@ -162,4 +268,4 @@ The following sample demonstrates how to delete the table row or columns, merge ## See Also * [Feature modules](../document-editor/feature-module/) -* [Insert table dialog](../document-editor/dialog/#table-dialog) \ No newline at end of file +* [Insert table dialog](../document-editor/dialog/#table-dialog) diff --git a/ej2-asp-core-mvc/document-editor/text-format.md b/ej2-asp-core-mvc/document-editor/text-format.md index 6eec0ad749..a3e466ac07 100644 --- a/ej2-asp-core-mvc/document-editor/text-format.md +++ b/ej2-asp-core-mvc/document-editor/text-format.md @@ -1,6 +1,6 @@ --- layout: post -title: Text Format in ##Platform_Name## Document Editor Component +title: Text Format in ##Platform_Name## Document Editor Component | Syncfusion description: Learn here all about text format in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text Format @@ -116,6 +116,19 @@ documenteditor.selection.characterFormat.fontSize= 32; ## Color +### Change Font Color by UI Option + +In the Document Editor, the Text Properties pane features two icons for managing text color within the user interface (UI): + +* **Colored Box:** This icon visually represents the **current color** applied to the selected text. +* **Text (A) Icon:** Clicking this icon allows users **to modify the color** of the selected text by choosing a new color from the available options. + +This Font Color option appear as follows. + +![Font Color](images/fontColor.PNG) + +### Change Font Color by Code + The color of selected text can be get or set using the following code. ```typescript @@ -149,7 +162,9 @@ documenteditor.selection.characterFormat.highlightColor= '#FFC0CB'; {% include code-snippet/document-editor/text-format/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Text-format.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor/text-format/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -158,7 +173,9 @@ documenteditor.selection.characterFormat.highlightColor= '#FFC0CB'; {% include code-snippet/document-editor/text-format/razor %} {% endhighlight %} {% highlight c# tabtitle="Text-format.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor/text-format/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/document-editor/track-changes.md b/ej2-asp-core-mvc/document-editor/track-changes.md index 8baa3f5213..cd536ab510 100644 --- a/ej2-asp-core-mvc/document-editor/track-changes.md +++ b/ej2-asp-core-mvc/document-editor/track-changes.md @@ -23,7 +23,9 @@ The following example demonstrates how to enable track changes. {% include code-snippet/document-editor-container/track-changes/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/track-changes/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -32,9 +34,35 @@ The following example demonstrates how to enable track changes. {% include code-snippet/document-editor-container/track-changes/razor %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/track-changes/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} +>Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges = true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/track-changes-default/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-default.cs" %} +{% include code-snippet/document-editor-container/track-changes-default/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/track-changes-default/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-default.cs" %} +{% include code-snippet/document-editor-container/track-changes-default/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} ## Show/Hide Revisions Pane The Show/Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document. @@ -48,7 +76,9 @@ The following example code illustrates how to show/hide the revisions pane. {% include code-snippet/document-editor-container/toggle-track-pane/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/toggle-track-pane/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -57,7 +87,9 @@ The following example code illustrates how to show/hide the revisions pane. {% include code-snippet/document-editor-container/toggle-track-pane/razor %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/toggle-track-pane/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} ## Get all tracked revisions @@ -148,7 +180,9 @@ The following example code illustrates how to enforce and stop protection in Doc {% include code-snippet/document-editor-container/track-changes-only-protect/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -157,7 +191,9 @@ The following example code illustrates how to enforce and stop protection in Doc {% include code-snippet/document-editor-container/track-changes-only-protect/razor %} {% endhighlight %} {% highlight c# tabtitle="Track-changes-only.cs" %} -{% endhighlight %}{% endtabs %} +{% include code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](../document-editor/document-management#restrict-editing-pane/) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/virtual-scrolling.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/virtual-scrolling.md index 802ee210d7..750942de90 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/virtual-scrolling.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/virtual-scrolling.md @@ -249,4 +249,4 @@ In the following image, you can see how many records will be scrollable when set ### Solution 3: Using paging instead of virtual scrolling -Similar to virtual scrolling, the [paging](https://ej2.syncfusion.com/aspnetcore/documentation/grid/paging/) feature also loads the data in an on-demand concept. Pagination is also compatible with all the other features(Grouping, Editing, etc.) in Grid. So, use the `paging` feature instead of virtual scrolling to view a large number of records in the Grid without any kind of performance degradation or browser height limitation. \ No newline at end of file +Similar to virtual scrolling, the [paging](https://ej2.syncfusion.com/aspnetcore/documentation/grid/paging) feature also loads the data in an on-demand concept. Pagination is also compatible with all the other features(Grouping, Editing, etc.) in Grid. So, use the `paging` feature instead of virtual scrolling to view a large number of records in the Grid without any kind of performance degradation or browser height limitation. \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-mode.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/editor-mode.md similarity index 96% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-mode.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/editor-mode.md index 1f7624c711..d9ba399501 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-mode.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/editor-mode.md @@ -77,9 +77,9 @@ The third-party library such as [`Marked`](https://marked.js.org/#/README.md#REA {% endtabs %} {% endif %} -For further details on Markdown editing, refer to the [`Markdown`](./markdown) +For further details on Markdown editing, refer to the [`Markdown`](../../../markdown-editor/EJ2_ASP.MVC/getting-started) ## See Also -* [How to integrate the third party library](./third-party-integration/) +* [How to integrate the third party library](../third-party-integration/) * [How to render the iframe](./iframe/) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/iframe.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/iframe.md similarity index 98% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/iframe.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/iframe.md index 6a85c0ceca..31b9862b5d 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/iframe.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/iframe.md @@ -105,4 +105,4 @@ Likewise, add the external script file to the `< iframe >` element using the `sc ## See Also * [Implementing Inline Editing](./inline-editing) -* [Using the Markdown Editor](./markdown) \ No newline at end of file +* [Using the Markdown Editor](../../../markdown-editor/EJ2_ASP.MVC/getting-started) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/inline-editing.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md similarity index 97% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/inline-editing.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md index e034092740..6908f9f909 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/inline-editing.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md @@ -45,4 +45,4 @@ This feature enhances the inline editing experience by providing immediate acces {% endtabs %} {% endif %} -![Rich Text Editor InlineMode](../images/inline.png) \ No newline at end of file +![Rich Text Editor InlineMode](../../images/inline.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/resizable-editor.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md similarity index 94% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/resizable-editor.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md index 6f5752d0da..780ec0e6ae 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/resizable-editor.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md @@ -37,7 +37,7 @@ The following sample demonstrates the resizable feature. {% endtabs %} {% endif %} -![Rich Text Editor Resizable support](./images/Resizable-Editor.png) +![Rich Text Editor Resizable support](../images/Resizable-Editor.png) ## Setting Editor Resize Limits @@ -82,4 +82,4 @@ By default, the control resizes up to the current viewport size. Apply these sty ## See Also * [Working with IFrame Editing Mode](./iframe) -* [Using the Markdown Editor](./markdown) \ No newline at end of file +* [Using the Markdown Editor](../../../markdown-editor/EJ2_ASP.MVC/getting-started) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md similarity index 99% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/audio.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md index c5cbc86e73..153c4273c0 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/audio.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md @@ -276,6 +276,6 @@ By configuring these options in the [QuickToolbarSettings](https://help.syncfusi ## See Also -* [Quick Toolbars in the Toolbar](./toolbar#quick-inline-toolbar) +* [Quick Toolbars in the Toolbar](../toolbar/quick-toolbar) * [How to Use the Video Editing Option in Toolbar Items](./video) * [How to Use the Image Editing Option in Toolbar Items](./insert-images) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/file-browser.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/file-browser.md similarity index 100% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/file-browser.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/file-browser.md diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md similarity index 98% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-images.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md index f8d31eeb46..c2b6a8ee9e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md @@ -156,7 +156,7 @@ To remove an image from the Rich Text Editor content, select the image and click Once you select the image from the local machine, the URL for the image will be generate. From there, you can remove the image from the service location by clicking the cross icon. -![Rich Text Editor Image delete](./images/image-del.png) +![Rich Text Editor Image delete](../images/image-del.png) The following sample explains, how to configure `RemoveUrl` to remove a saved image from the remote service location, when the following image remove actions are performed: @@ -194,7 +194,7 @@ Sets the default width and height of the image when it is inserted in the Rich T Through the quick toolbar, change the width and height using `Change Size` option. Once you click, the Image Size dialog box will open as follows. In that you can specify the width and height of the image in pixel. -![Rich Text Editor Image dimension](./images/image-size.png) +![Rich Text Editor Image dimension](../images/image-size.png) ## Adding Captions and Alt Text to Images @@ -238,13 +238,13 @@ Sets the default display for an image when it is inserted in the Rich Text Edito The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, remove, edit and open link will be added to the quick toolbar of image. For further details about link, see the [`link documentation`](./link) documentation. -![Rich Text Editor image with link](./images/image-link.png) +![Rich Text Editor image with link](../images/image-link.png) ## Image Resizing Tools Rich Text Editor has a built-in image inserting support. The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio. -![Rich Text Editor image resize](./images/image-resize.png) +![Rich Text Editor image resize](../images/image-resize.png) ## Configuring Allowed Image Types @@ -331,5 +331,5 @@ By configuring these options in the [QuickToolbarSettings](https://help.syncfusi ## See Also -* [Image Quick toolbar](./toolbar#quick-inline-toolbar) -* [Hyperlink Management](./link) \ No newline at end of file +* [Image Quick toolbar](../toolbar/quick-toolbar#image-quick-toolbar) +* [Hyperlink Management](../link) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md similarity index 96% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/video.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md index 2fa068558d..3612ebe93a 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/video.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md @@ -67,13 +67,13 @@ You can insert a video from either a hosted link or your local machine by clicki The insert video dialog opens with the `Embedded code` option selected by default. This allows you to insert a video using embedded code. -![Rich Text Editor Embed URL Video insert](./images/aspcore-richtexteditor-video-embed.png) +![Rich Text Editor Embed URL Video insert](../images/aspcore-richtexteditor-video-embed.png) ### Inserting Video via Web URL You can switch to the `Web URL` option by selecting the Web URL checkbox. Inserting a video using the Web URL option will add the video URL as the `src` attribute of the `` tag. -![Rich Text Editor Video insert](./images/aspcore-richtexteditor-video-web.png) +![Rich Text Editor Video insert](../images/aspcore-richtexteditor-video-web.png) ## Uploading Video from Local Machine @@ -211,9 +211,9 @@ N> By default, it doesn't support the `UseDefaultCredentials` property, you can Once a video file has been inserted, you can replace it using the Rich Text Editor [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) `VideoReplace` option. You can replace the video file either by using the embedded code or the web URL and the browse option in the video dialog. -![Rich Text Editor Embed Video replace](./images/video-replace-embed.png) +![Rich Text Editor Embed Video replace](../images/video-replace-embed.png) -![Rich Text Editor Web Video replace](./images/video-replace-web.png) +![Rich Text Editor Web Video replace](../images/video-replace-web.png) ## Deleting Video @@ -221,7 +221,7 @@ To remove a video from the Rich Text Editor content, select the video and click Once you select the video from the local machine, the URL for the video will be generated. You can remove the video from the service location by clicking the cross icon. -![Rich Text Editor Video delete](./images/video-del.png) +![Rich Text Editor Video delete](../images/video-del.png) ## Adjusting Video Dimensions @@ -230,7 +230,7 @@ Set the default width, minWidth, height, and minHeight of the video element when Through the [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video), you can also change the width and height using the `Change Size` button. Once you click on the button, the video size dialog will open as below. In that, specify the width and height of the video in pixels. -![Rich Text Editor Video dimension](./images/video-size.png) +![Rich Text Editor Video dimension](../images/video-size.png) ## Configuring Video Display Position @@ -270,7 +270,7 @@ You can disable the resize action by configuring `false` for the [InsertVideoSet > If the [MinWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinHeight) properties are configured, the video resizing does not shrink below the specified values. -![Rich Text Editor video resize](./images/aspcore-richtexteditor-video-resize.png) +![Rich Text Editor video resize](../images/aspcore-richtexteditor-video-resize.png) ## Customizing the Video Quick Toolbar diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/emoji-picker.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md similarity index 100% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/emoji-picker.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md similarity index 100% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/mentions.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/slash-menu.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/slash-menu.md similarity index 100% rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/slash-menu.md rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/slash-menu.md diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md index 5a72a7159c..540533adc7 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md @@ -47,25 +47,25 @@ Tables can also be inserted through the `Insert Table` option in the pop-up wher The `TableHeader` command is available in the quick toolbar, allowing you to add or remove the header row from the inserted table. The following image illustrates the table header. -![Rich Text Editor table header](../images/table_header.png) +![Rich Text Editor table header](./images/table_header.png) ## Inserting Rows You can insert `Rows` above or below the selected table cell using the quick toolbar. The focused row can also be deleted. The following screenshot shows the available options of the row item. -![Rich Text Editor table row](../images/table_rows.png) +![Rich Text Editor table row](./images/table_rows.png) ## Inserting Columns `Columns` can be inserted to the left or right of the selected table cell using the quick toolbar. The focused column can also be deleted. The following screenshot shows the available options in inserting column item. -![Rich Text Editor table column](../images/table_column.png) +![Rich Text Editor table column](./images/table_column.png) ## Setting Cell Background Color Set the background color for each table cell using the `BackgroundColor` command in the quick toolbar. -![Rich Text Editor table background color](../images/table_bg_color.png) +![Rich Text Editor table background color](./images/table_bg_color.png) ## Deleting Tables @@ -77,13 +77,13 @@ Delete the entire table using the delete item in the quick toolbar. Align text inside table cells to the top, middle, or bottom using the `TableCellVerticalAlign` tool in the quick toolbar. -![Rich Text Editor table vertical alignment](../images/table_vertical.png) +![Rich Text Editor table vertical alignment](./images/table_vertical.png) ### Horizontal Alignment Align text inside table cells to the left, right, or center using the `TableCellHorizontalAlign` tool in the quick toolbar. -![Rich Text Editor table horizontal alignment](../images/table_horizontal.png) +![Rich Text Editor table horizontal alignment](./images/table_horizontal.png) ## Applying Table Styles @@ -95,7 +95,7 @@ By Default, provides Dashed border and Alternate rows. **Alternate border**: Applies an alternating background to table rows. -![Rich Text Editor table styles](../images/table_style.png) +![Rich Text Editor table styles](./images/table_style.png) ## Setting Table and Cell Dimensions @@ -103,7 +103,7 @@ Sets the default width of the table when it is inserted in the Rich Text Editor Users can modify the width, cell padding, and cell spacing of selected tables using the properties option in the quick toolbar. -![Rich Text Editor table settings](../images/table_properties.png) +![Rich Text Editor table settings](./images/table_properties.png) ## Table Cell Selection and Formatting @@ -163,7 +163,7 @@ The table cell merge feature allows you to merge two or more row and column cell The following image explains the table merge action. -![Rich Text Editor table cell merge](../images/table_merge.png) +![Rich Text Editor table cell merge](./images/table_merge.png) ### Splitting Table Cells @@ -171,7 +171,7 @@ The table cell split feature allows you to a selected cell can be split both hor The following image explains the table split action. -![Rich Text Editor table cell split](../images/table_split.png) +![Rich Text Editor table cell split](./images/table_split.png) {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar.md deleted file mode 100644 index ed0f5a1315..0000000000 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -layout: post -title: Toolbar in ##Platform_Name## Rich Text Editor Component | Syncfusion -description: Learn here all about Toolbar in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Toolbar -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Toolbar in ##Platform_Name## Rich Text Editor Control - -The Syncfusion ASP.NET MVC Rich Text Editor control provides a versatile and powerful toolbar to enhance your text editing experience. The toolbar contains a variety of formatting, styling, and editing tools, allowing users to create and modify content efficiently. - -## Tools - -### Default Toolbar Items - -By default, the ASP.NET MVC Rich Text Editor displays the following toolbar items: - -> `Bold` , `Italic` , `Underline` , `|` , `Formats` , `Alignments` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo` - -These default items cover essential text editing features, such as text formatting, lists, alignment, and linking. - -### Available Toolbar Items - -The following table shows the list of available tools in the Rich Text Editor's toolbar. - -The order of items in the toolbar can be customized to meet your application's requirements. If no specific order is set, the editor will render the above default toolbar items. Below is a list of all available toolbar items in the Rich Text Editor. - -#### Text formatting - -It provides tools for applying text styles such as bold, italic, underline, strike-through, and more to modify the appearance of the text. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Bold | ![Bold icon](./images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | -| Italic | ![Italic icon](./images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | -| Underline | ![Underline icon](./images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | -| StrikeThrough | ![StrikeThrough icon](./images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| -| ClearFormat | ![ClearFormat icon](./images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| -| Blockquote | ![Blockquote icon](./images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| -| SubScript | ![SubScript icon](./images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| -| SuperScript | ![SuperScript icon](./images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| -| LowerCase | ![LowerCase icon](./images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| -| UpperCase | ![UpperCase icon](./images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| - -#### Font & styling - -Tools in this section allow users to customize font properties such as font family, size, color, background color, and paragraph formatting. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| FontName | ![FontName icon](./images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| -| FontSize | ![FontSize icon](./images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| -| FontColor | ![FontColor icon](./images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| -| BackgroundColor | ![BackgroundColor icon](./images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| -| Formats (Paragraph, Headings) | ![Format icon](./images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| - -#### Alignment - -This section provides alignment options for the text or content, allowing users to justify text or align it to the left, center, or right. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Alignment | ![Alignment icon](./images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| -| JustifyLeft | ![JustifyLeft icon](./images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | -| JustifyCenter | ![JustifyCenter icon](./images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | -| JustifyRight | ![JustifyRight icon](./images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | -| JustifyFull | ![JustifyFull icon](./images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | - -#### Lists & indentation - -Tools here allow users to create ordered and unordered lists, change the list style, and adjust indentation levels for improved document structure. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| OrderedList | ![OrderedList icon](./images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| -| UnorderedList | ![UnorderedList icon](./images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| -| NumberFormatList | ![NumberFormatList icon](./images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| -| BulletFormatList | ![BulletFormatList icon](./images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| -| Indent | ![Indent icon](./images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| -| Outdent | ![Outdent icon](./images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| - -#### Hyperlinks - -This section provides tools for inserting and managing hyperlinks within the content. Users can create new links or modify existing ones to enhance document navigation and interactivity. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Hyperlink | ![Hyperlink icon](./images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| -| InsertLink | ![InsertLink icon](./images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | - -##### Link quicktoolbar items - -The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Editor, allowing users to add, edit, or remove links from selected text or images directly within the editor. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| OpenLink | ![OpenLink icon](./images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | -| EditLink | ![EditLink icon](./images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | -| RemoveLink | ![RemoveLink icon](./images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | - -#### Images - -This section contains the primary tool for inserting images into the editor. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Insert Image | ![Images icon](./images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| - -##### Image quicktoolbar items - -The image quicktoolbar offers a set of tools to edit images inserted in the Rich Text Editor. It allows users to modify image properties, including alignment, size, alternate text, and links, enhancing image management in the content. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Replace Image | ![Replace icon](./images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | -| Align Image | ![Alignment icon](./images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | -| Remove Image | ![Remove icon](./images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | -| OpenImageLink | ![OpenImageLink icon](./images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | -| EditImageLink | ![EditImageLink icon](./images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | -| RemoveImageLink | ![RemoveImageLink icon](./images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | -| Display | ![Display icon](./images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | -| AltText | ![AltText icon](./images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | -| Dimension | ![Dimension icon](./images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | - -#### Tables - -This section offers the main tool for creating tables within the content. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| CreateTable | ![CreateTable icon](./images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | - -##### Table quicktoolbar items - -The table quicktoolbar provides options for table editing within the Rich Text Editor. Users can insert or remove rows and columns, merge or split cells, and access table properties for easier table management and customization. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| RemoveTable | ![RemoveTable icon](./images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | -| TableHeader | ![TableHeader icon](./images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | -| TableColumns | ![TableColumns icon](./images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | -| TableRows | ![TableRows icon](./images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | -| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](./images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | -| TableCellVerticalAlign | ![TableCellVerticalAlign icon](./images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | -| TableEditProperties | ![TableEditProperties icon](./images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | - -#### Undo & redo - -These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| Undo | ![Undo icon](./images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | -| Redo | ![Redo icon](./images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| - -#### Other tools - -This section contains miscellaneous tools such as full-screen mode, print, preview, source code editing, and clearing all styles from text. - -| Name | Icons | Summary | Initialization | -|----------------|---------|---------|------------------------------------------| -| FullScreen | ![FullScreen icon](./images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| -| Maximize | ![Maximize icon](./images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | -| Minimize | ![Minimize icon](./images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | -| Preview | ![Preview icon](./images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | -| InsertCode | ![InsertCode icon](./images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | -| Print | ![Print icon](./images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| -| ClearAll | ![ClearAll icon](./images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | -| SourceCode | ![SourceCode icon](./images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| - - -## How to Enable the Toolbar - -The Rich Text Editor toolbar contains a collection of tools such as bold, italic and text alignment buttons that are used to format the content. However, in most integrations, you can customize the toolbar configurations easily to suit your needs. - -The Rich Text Editor allows you to configure different types of toolbar using [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Type) field in [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The types of toolbar are: - -1. Expand -2. MultiRow -3. Scrollable - -## Expanding the Toolbar - -The default mode of the toolbar is `Expand`, configured through [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) with `Type: 'Expand'`. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/toolbar-expand/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/toolbar-expand/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Configuring a Multi-row Toolbar - -Setting the `Type` as `MultiRow` in [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will arrange the toolbar items across multiple rows, displaying all configured toolbar items. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/toolbar-multi/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/toolbar-multi/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Implementing a Scrollable Toolbar - -Setting the `Type` to `Scrollable` in [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/scrollable/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/scrollable/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/scrollable/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/scrollable/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Creating a Sticky Toolbar - -By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the [FloatingToolbarOffset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FloatingToolbarOffset) to adjust its offset from the top of the document. - -Additionally, you can enable or disable the floating toolbar using the [EnableFloating](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_EnableFloating) property. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/floating-toolbar/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/floating-toolbar/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -### Custom Toolbar Items - -The Rich Text Editor allows you to configure your own commands to its toolbar using the [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance. - -This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor. - -The following code snippet illustrates custom tool with tooltip text which will be included in [Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) field of the [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. - - -```csharp - - var tools = new { - tooltipText = "Insert Symbol", - template = "" - }; - ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", - "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools - , "|", "Undo", "Redo" - }; - -``` - -The Rich Text Editor provides options to customize tool functionalities. Use the `undo` property to enable or disable the undo function for specific tools. Additionally, the click property lets you configure and bind the onclick event of a tool to a specific method. - -This sample demonstrates how to add a custom "Ω" icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/custom-tool/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/custom-tool/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/custom-tool/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/custom-tool/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -> When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the `e-rte-elements` class to the control rendered in the custom toolbar. - -### Enabling and Disabling Toolbar Items - -You can use the `enableToolbarItem` and `disableToolbarItem` methods to control the state of toolbar items. This methods takes a single item or an array of [items](#available-toolbar-items) as parameter. - -> You can add the command name `Custom` to disable the custom toolbar items on source code view and other quick toolbar operations. - - -## Quick Inline toolbar - -Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, link and table attributes of the [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property. - -| Target Element | Default Quick Toolbar items | -|----------------|---------| -| Image | 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText','Dimension'.| -| Link | 'Open', 'Edit', 'UnLink'.| -| Text | null
(Any toolbar [items](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/toolbar#toolbar-items) in the Rich Text Editor can be configured here).| -| table| 'TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'.| - -Custom tool can be added to the corresponding quick toolbar, using [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property. - -The below sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/quick-inline/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/quick-inline/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/quick-inline/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/quick-inline/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## See Also - -* [Customizing Rich Text Editor Toolbar Styles](./style#customizing-the-rich-text-editors-toolbar) -* [Implementing Inline Editing](./inline-editing) -* [Customizing Accessibility Shortcut Keys](./accessibility#keyboard-interaction) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/quick-toolbar.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/quick-toolbar.md new file mode 100644 index 0000000000..e6bcddd237 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/quick-toolbar.md @@ -0,0 +1,231 @@ +--- +layout: post +title: Quick toolbars in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Quick toolbars in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Quick toolbars +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Quick Toolbars in the ##Platform_Name## Rich Text Editor Control + +The Rich Text Editor has quick toolbars that act as context-menus, appearing when you click on elements like images, links, audio, video, and tables. By default, specific quick toolbar items are displayed when clicking on the corresponding element. You can customize these items using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property. + +## Image quick toolbar + +You can customize the quick toolbar options for images using the `image` property within the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Image). The Rich Text Editor provides essential tools such as 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText', and 'Dimension' allowing seamless image management and editing directly within the content. + +By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property, you can enhance the editor’s functionality, ensuring a user-friendly experience for efficiently handling image elements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/image-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/image-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/image-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/image-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Link quick toolbar + +The link quick toolbar appears when you click on a link in the editor. You can customize its items using the `link` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Link). + +The Rich Text Editor provides essential tools in the link quick toolbar, including "Open", "Edit Link", "Remove Link", and "Custom Tool". + +The following example demonstrates how to customize the link quick toolbar using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/link-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/link-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/link-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/link-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Table quick toolbar + +The table quick toolbar opens when you click anywhere within a table. Customize its items using the `table` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Table). + +The quick toolbar appears when clicking on a table, providing easy access to table-related commands. You can customize the quick toolbar by adding or removing tools using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property. + +The following sample demonstrates the customiztion of table quick toolbar. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/table-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/table-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/table-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/table-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Audio quick toolbar + +Customize the quick toolbar items for audio elements using the `audio` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio).The Rich Text Editor provides essential tools such as "AudioReplace", "Remove", and "AudioLayoutOption", allowing seamless management and editing of audio content. + +By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property, you can enhance the editor’s capabilities, ensuring a user-friendly experience for handling audio elements efficiently. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/audio-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/audio-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/audio-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/audio-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Video quick toolbar + +The video quick toolbar appears when you click on a video element. You can customize its tools using the `video` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video). + +The Rich Text Editor allows you to tailor the video quick toolbar with essential tools such as "VideoReplace", "VideoAlign", "VideoRemove", "VideoLayoutOption", and "VideoDimension", enabling seamless management of embedded videos. + +By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property, you enhance the editor’s capabilities, ensuring a user-friendly experience for editing and customizing video elements effortlessly. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/video-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/video-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/video-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/video-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Text quick toolbar + +The text quick toolbar provides easy access to commonly used formatting tools, enabling users to apply styles and adjustments effortlessly. This enhances the editing experience by streamlining text formatting. + +Customize the quick toolbar items using the `text` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Text). Any toolbar items available in the Rich Text Editor can be configured for the text quick toolbar. The example below demonstrates its customization. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/text-quick-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/text-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/text-quick-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/text-quick-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Quick inline toolbar + +Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, link and table attributes of the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property. + +| Target Element | Default Quick Toolbar items | +|----------------|---------| +|image | 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText','Dimension'.| +| link | 'Open', 'Edit', 'UnLink'.| +| text | null
(Any toolbar [items](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/toolbar) in the Rich Text Editor can be configured here).| +| table| 'TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'.| + +Custom tool can be added to the corresponding quick toolbar, using [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property. + +The below sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/quick-inline/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/quick-inline/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/quick-inline/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/quick-inline/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-types.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-types.md new file mode 100644 index 0000000000..55eda1045c --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-types.md @@ -0,0 +1,137 @@ +--- +layout: post +title: Toolbar types in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Toolbar types in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Toolbar types +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Toolbar in the ##Platform_Name## Rich Text Editor Control + +The Syncfusion ##Platform_Name## Rich Text Editor provides a powerful toolbar that enables users to format, style, and edit content efficiently. The toolbar includes essential editing tools such as bold, italic, underline, alignment, and lists, along with customization options to suit different use cases. + +To learn about the different types of toolbars in the ASP.NET MVC Rich Text Editor, watch this video: + +{% youtube "youtube:https://www.youtube.com/watch?v=09tBgKpjgjU"%} + +The Rich Text Editor allows you to configure different types of toolbar using [type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Type) field in [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The types of toolbar are: + +1. Expand +2. MultiRow +3. Scrollable + +## Expanding the toolbar + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/toolbar-expand/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/toolbar-expand/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Configuring a multi-row toolbar + +Setting the `type` as `MultiRow` in [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will arrange the toolbar items across multiple rows, displaying all configured toolbar items. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/toolbar-multi/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/toolbar-multi/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Implementing a scrollable toolbar + +Setting the `type` to `Scrollable` in [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/scrollable/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/scrollable/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/scrollable/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/scrollable/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Creating a sticky toolbar + +By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the [floatingToolbarOffset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FloatingToolbarOffset) to adjust its offset from the top of the document. + +Additionally, you can enable or disable the floating toolbar using the [enableFloating](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_EnableFloating) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/floating-toolbar/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/floating-toolbar/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## See also + +* [Customizing Rich Text Editor Toolbar Styles](../style#customizing-the-rich-text-editors-toolbar) +* [Implementing Inline Editing](../editor-types/inline-editing) +* [Customizing Accessibility Shortcut Keys](../accessibility#keyboard-navigation) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md new file mode 100644 index 0000000000..282bcdf4a3 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md @@ -0,0 +1,193 @@ +--- +layout: post +title: Toolbar types in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Toolbar types in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Toolbar types +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Built-in Tools in the ##Platform_Name## Rich Text Editor Control + +By default, the ASP.NET MVC Rich Text Editor displays the following toolbar items: + +> `Bold` , `Italic` , `Underline` , `|` , `Formats` , `Alignments` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo` + +These default items cover essential text editing features, such as text formatting, lists, alignment, and linking. + +## Available Toolbar Items + +The following table shows the list of available tools in the Rich Text Editor's toolbar. + +The order of items in the toolbar can be customized to meet your application's requirements. If no specific order is set, the editor will render the above default toolbar items. Below is a list of all available toolbar items in the Rich Text Editor. + +### Text formatting + +It provides tools for applying text styles such as bold, italic, underline, strike-through, and more to modify the appearance of the text. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Bold | ![Bold icon](../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | +| Italic | ![Italic icon](../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | +| Underline | ![Underline icon](../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | +| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| +| ClearFormat | ![ClearFormat icon](../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| +| Blockquote | ![Blockquote icon](../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| +| SubScript | ![SubScript icon](../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| +| SuperScript | ![SuperScript icon](../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| +| LowerCase | ![LowerCase icon](../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| +| UpperCase | ![UpperCase icon](../images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| + +### Font & styling + +Tools in this section allow users to customize font properties such as font family, size, color, background color, and paragraph formatting. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| FontName | ![FontName icon](../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| +| FontSize | ![FontSize icon](../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| +| FontColor | ![FontColor icon](../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| +| BackgroundColor | ![BackgroundColor icon](../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| +| Formats (Paragraph, Headings) | ![Format icon](../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| + +### Alignment + +This section provides alignment options for the text or content, allowing users to justify text or align it to the left, center, or right. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Alignment | ![Alignment icon](../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| +| JustifyLeft | ![JustifyLeft icon](../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | +| JustifyCenter | ![JustifyCenter icon](../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | +| JustifyRight | ![JustifyRight icon](../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | +| JustifyFull | ![JustifyFull icon](../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | + +### Lists & indentation + +Tools here allow users to create ordered and unordered lists, change the list style, and adjust indentation levels for improved document structure. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| OrderedList | ![OrderedList icon](../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| +| UnorderedList | ![UnorderedList icon](../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| +| NumberFormatList | ![NumberFormatList icon](../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| +| BulletFormatList | ![BulletFormatList icon](../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| +| Indent | ![Indent icon](../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| +| Outdent | ![Outdent icon](../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| + +### Hyperlinks + +This section provides tools for inserting and managing hyperlinks within the content. Users can create new links or modify existing ones to enhance document navigation and interactivity. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| +| InsertLink | ![InsertLink icon](../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | + +#### Link quicktoolbar items + +The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Editor, allowing users to add, edit, or remove links from selected text or images directly within the editor. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| OpenLink | ![OpenLink icon](../images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | +| EditLink | ![EditLink icon](../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | +| RemoveLink | ![RemoveLink icon](../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | + +### Images + +This section contains the primary tool for inserting images into the editor. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Insert Image | ![Images icon](../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| + +#### Image quicktoolbar items + +The image quicktoolbar offers a set of tools to edit images inserted in the Rich Text Editor. It allows users to modify image properties, including alignment, size, alternate text, and links, enhancing image management in the content. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Replace Image | ![Replace icon](../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | +| Align Image | ![Alignment icon](../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | +| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | +| OpenImageLink | ![OpenImageLink icon](../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | +| EditImageLink | ![EditImageLink icon](../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | +| RemoveImageLink | ![RemoveImageLink icon](../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | +| Display | ![Display icon](../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | +| AltText | ![AltText icon](../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | +| Dimension | ![Dimension icon](../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | + +### Tables + +This section offers the main tool for creating tables within the content. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| CreateTable | ![CreateTable icon](../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | + +#### Table quicktoolbar items + +The table quicktoolbar provides options for table editing within the Rich Text Editor. Users can insert or remove rows and columns, merge or split cells, and access table properties for easier table management and customization. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| RemoveTable | ![RemoveTable icon](../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | +| TableHeader | ![TableHeader icon](../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | +| TableColumns | ![TableColumns icon](../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | +| TableRows | ![TableRows icon](../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | +| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | +| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | +| TableEditProperties | ![TableEditProperties icon](../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | + +### Undo & redo + +These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | +| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| + +### Other tools + +This section contains miscellaneous tools such as full-screen mode, print, preview, source code editing, and clearing all styles from text. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| FullScreen | ![FullScreen icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| +| Maximize | ![Maximize icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | +| Minimize | ![Minimize icon](../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | +| Preview | ![Preview icon](../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | +| InsertCode | ![InsertCode icon](../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | +| Print | ![Print icon](../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| +| ClearAll | ![ClearAll icon](../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | +| SourceCode | ![SourceCode icon](../images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| + +## Removing built-in tool from toolbar + +Remove the build-in tools from the toolbar by using the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-buildin-tool/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-buildin-tool/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-buildin-tool/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-buildin-tool/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/custom-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/custom-tools.md new file mode 100644 index 0000000000..a00b1bd71d --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/custom-tools.md @@ -0,0 +1,70 @@ +--- +layout: post +title: Custom Toolbar in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Custom Toolbar in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Custom Toolbar +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Custom Toolbar Items in the ##Platform_Name## Rich Text Editor Control + +To quickly get started with the ASP.NET MVC Rich Text Editor with a custom toolbar, watch this video: + +{% youtube "youtube:https://www.youtube.com/watch?v=AnHsErOlU1A"%} + +The Rich Text Editor allows you to configure your own commands to its toolbar using the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance. + +This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor. + +The following code snippet illustrates custom tool with tooltip text which will be included in [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) field of the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. + + +```csharp + + var tools = new { + tooltipText = "Insert Symbol", + template = "" + }; + ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", + "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools + , "|", "Undo", "Redo" + }; + +``` + +The Rich Text Editor provides options to customize tool functionalities. Use the `undo` property to enable or disable the undo function for specific tools. Additionally, the click property lets you configure and bind the onclick event of a tool to a specific method. + +This sample demonstrates how to add a custom "Ω" icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-tool/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-tool/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-tool/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-tool/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +> When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the `e-rte-elements` class to the control rendered in the custom toolbar. + +## Enabling and disabling toolbar items + +You can use the `enableToolbarItem` and `disableToolbarItem` methods to control the state of toolbar items. This methods takes a single item or an array of [items](#available-toolbar-items) as parameter. + +>You can add the command name `Custom` to disable the custom toolbar items on source code view and other quick toolbar operations. \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/styling-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/styling-tools.md new file mode 100644 index 0000000000..38f99322c1 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/styling-tools.md @@ -0,0 +1,234 @@ +--- +layout: post +title: Styling tools in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Styling tools in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Styling tools +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Styling Tools in the ##Platform_Name## Rich Text Editor Control + +## Font family + +The Rich Text Editor initializes with a default font family, which inherits the font family of the parent element. You can change the font for selected text using the font family dropdown in the toolbar. When the default font family is selected, the toolbar will display "Font Name". However, for other font families, the toolbar will show the name of the selected font. + +To apply a different font style to a specific section of the content, follow these steps: + +1. Select the text you want to change. +2. Choose the desired font style from the drop-down menu in the toolbar. + +These steps will apply the selected font style to the chosen text, allowing you to customize the appearance of your content easily. + +### Built-in font family + +You can add the `FontName` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/font-family/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/font-family/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/font-family/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/font-family/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor comes with a pre-configured set of [fontFamily](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property. + +### Custom font family + +The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the [fontFamily](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property. This allows you to extend the available font options beyond the default selection. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-font-family/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-font-family/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-font-family/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-font-family/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Google font support + +To use web fonts in Rich Text Editor, it is not needed for the web fonts to be present in local machine. To add the web fonts to Rich Text Editor, you need to refer the web font links and add the font names in the [fontFamily](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/how-to/google-webfonts/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/how-to/google-webfonts/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/how-to/google-webfonts/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/how-to/google-webfonts/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The below font style links are referred in the page. + +```typescript + + + + +``` + +N> In the above sample, you can see that we have added two Google web fonts (`Roboto` and `Great vibes`) to `Rich Text Editor`. + +## Font size + +The Rich Text Editor initializes with a default font size, which inherits the font size of the parent element. You can change the font for selected text using the font size dropdown in the toolbar. When the default font size is selected, the toolbar will display "Font Size". However, for other font sizes, the toolbar will show the name of the selected font. + +### Built-in font size + +You can add the `FontSize` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/styling/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/styling/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/styling/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/styling/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor includes a default set of [fontSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontSize) property. + +### Custom font size + +The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the [fontSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontSize) property. This allows you to extend the available font options beyond the default selection. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-style/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-style/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-style/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-style/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Font and background color + +You can add the `FontColor` and `BackgroundColor` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/font-background-color/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/font-background-color/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/font-background-color/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/font-background-color/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Custom font and background colors + +To apply `font color` or `background color` to selected content in the Rich Text Editor, use the font color and background color tools. + +The Rich Text Editor offers custom font and background colors along with the existing list through the [colorCode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ColorCode) field of the [fontColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontColor) and [backgroundColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_BackgroundColor) properties. + +Both the `FontColor` and `BackgroundColor` properties offer two modes: `Picker` and `Palette`. The Palette mode provides a predefined set of colors, while the Picker mode includes a color scheme to choose custom colors. You can switch between these options using the [modeSwitcher](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ModeSwitcher) feature. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-font/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-font/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-font/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-font/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md new file mode 100644 index 0000000000..8411772b79 --- /dev/null +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -0,0 +1,583 @@ +--- +layout: post +title: Text formatting and Structure in ##Platform_Name## Rich Text Editor Control | Syncfusion +description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Text formatting and Structure +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control + +## Basic text styling + +The Rich Text Editor's basic styles feature provides essential formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured. + +### Available text styles + +The table below lists the available text styles in the Rich Text Editor's toolbar. + +| Name | Icons | Summary | Initialization | +|----------------|---------|---------|------------------------------------------| +| Bold | ![Bold icon](../images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `bold` | +| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | +| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} | +| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}| +| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `inline code`| +| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}| +| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}| +| LowerCase | ![LowerCase icon](../images/lower-case.png) | Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}| +| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}| + +Please refer to the sample below to add these basic text styling options in the Rich Text Editor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/basic-text-styling/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/basic-text-styling/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/basic-text-styling/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/basic-text-styling/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Text alignments + +The Rich Text Editor offers various text alignment options, including left, center, right, and justify. To utilize these alignment options, add the Alignments item to the items property in the toolbarSettings. + +> **Important Note:** Text alignment is applied to the entire block element containing the cursor or selected text, not just to the selected text itself. When you apply an alignment, it affects the whole paragraph or block, even if you've only selected a portion of the text. + +Here are the available alignment options: + +* Align Left: +To left-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Left` icon in the toolbar. This will align the entire paragraph with the left margin. + +* Align Center: +To center-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Center` icon in the toolbar. This will center the entire paragraph within its container. + +* Align Right: +To right-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Right` icon in the toolbar. This will align the entire paragraph with the right margin. + +* Align Justify: +To fully justify your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Justify` icon in the toolbar. This will distribute the entire paragraph evenly across the line, aligning it with both the left and right margins. + +Please refer to the sample and code snippets below to add these alignment options in the Rich Text Editor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/text-alignments/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/text-alignments/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/text-alignments/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/text-alignments/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Number and bullet format list + +List formatting in the Rich Text Editor allows users to organize content into structured lists, enhancing readability and visual presentation. The control supports two main types of lists: + +1. Ordered Lists +2. Unordered Lists + +### Ordered lists + +Ordered lists present items in a specific sequence, with each item preceded by a number or letter. The Rich Text Editor provides two ways to create and manage ordered lists: + +#### Using the ordered list tool + +The `OrderedList` toolbar item offers a quick way to create or toggle a numbered list. To use it, select the desired text in the editor and click the `OrderedList` button in the toolbar. If the selected text is not already a numbered list, it will be converted into one. If it's already a numbered list, clicking the button will remove the list formatting. + +#### Number format list tool + +For more detailed control over the numbering style, use the `numberFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `numberFormatList` dropdown. The selected text will be transformed into a numbered list with the chosen style. + +##### Available numbering styles: + +* `None`: Removes numbering while maintaining list structure and indentation +* `Number`: Uses standard numeric sequencing (1, 2, 3, ...) +* `Lower Roman`: Employs lowercase Roman numerals (i, ii, iii, ...) +* `Lowercase Greek`: Utilizes lowercase Greek letters (α, β, γ, ...) +* `Upper Alpha`: Applies uppercase letters (A, B, C, ...) +* `Lower Alpha`: Uses lowercase letters (a, b, c, ...) +* `Upper Roman`: Employs uppercase Roman numerals (I, II, III, ...) + +You can customize the available number formats using the [numberFormatList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_NumberFormatList) property of the Rich Text Editor. + +The following example demonstrates how to customize the number format lists in the Rich Text Editor: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/number-format-list/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/number-format-list/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/number-format-list/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/number-format-list/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Unordered lists + +Unordered lists present items with visual markers, providing an effective way to list items without implying order or priority. The Rich Text Editor offers two methods for creating and managing unordered lists: + +#### Using the unordered list tool + +The `UnorderedList` toolbar item provides a fast way to create or toggle a bulleted list. To use it, select the desired text in the editor and click the `UnorderedList` button in the toolbar. If the selected text is not already a bulleted list, it will be converted into one. If it's already a bulleted list, clicking the button will remove the list formatting. + +#### Bullet format list tool + +For more control over the bullet style, use the `bulletFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `bulletFormatList` dropdown. The selected text will be transformed into a bullet list with the chosen style. + +##### Available bullet styles + +* `None`: Removes bullet points while maintaining list structure and indentation +* `Disc`: Displays solid circular bullets +* `Square`: Uses solid square bullets +* `Circle`: Presents hollow circular bullets + +The following example demonstrates how to customize the bullet format lists in the Rich Text Editor: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/format-lists/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/format-lists/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/format-lists/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/format-lists/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Increase and decrease indent + +The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand. + +The Rich Text Editor allows you to configure two types of indentation tools, `Indent` and `Outdent` tool in the Rich Text Editor toolbar using the `ToolbarSettings` [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +| Options | Description | +|----------------|---------| +| Indent | Increases the indentation | +| Outdent | Decreases the indentation | + +To adjust the text indentation: + +1. Select the desired text or paragraph. +2. Click the Indent or Outdent button in the toolbar. +3. The indentation of the selected text will be modified accordingly. + +To configure the `Indent` and `Outdent` toolbar item, refer to the below code. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/indent-and-outdent/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/indent-and-outdent/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/indent-and-outdent/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/indent-and-outdent/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Indentation in lists + +The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily. + +#### Increasing indent + +To increase the indent of a list item: + +1. Select the list item you want to indent. +2. Click the "Increase Indent" button in the toolbar or press Ctrl + ]. +3. The selected item will be indented, creating a nested list. + +#### Decreasing indent + +To decrease the indent of a list item: + +1. Select the indented list item. +2. Click the "Decrease Indent" button in the toolbar or press Ctrl + [. +3. The selected item will move back to the previous indentation level. + +#### Using tab key for indentation + +The Tab key provides a quick way to adjust list indentation: + +- Pressing Tab will increase the indent of the selected list item, creating a nested list. +- Pressing Shift + Tab will decrease the indent of the selected list item, moving it to the previous level. + +This behavior allows for efficient creation and management of multi-level lists without the need to use the toolbar buttons. + +## Heading formats + +The Rich Text Editor control provides a feature to format text with various heading styles, such as Heading 1, Heading 2, Heading 3, and Heading 4. These headings allow for structuring content hierarchically, improving readability, and organizing information effectively. + +### Built-in formats + +To enable heading styles in your Rich Text Editor: + +1. Ensure the `Formats` item is included in the toolbar configuration. +2. To apply a heading: + * Select the desired text + * Click the `Formats` dropdown in the toolbar + * Choose the appropriate heading level (e.g., Heading 1, Heading 2) + +This action will format the selected text with the chosen heading style, helping to create a clear document structure and emphasize important sections. + +Below are examples and code snippets demonstrating how to integrate and utilize heading formatting options effectively in the Rich Text Editor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/headings/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/headings/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/headings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/headings/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Custom format + +The Rich Text Editor allows you to customize the format dropdown to include specific styles such as heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, and paragraph. + +To customize the format dropdown: + +1. Define a `formats` array in your component configuration. +2. Specify each format option with a display name and corresponding value. + +This customization enhances the editor’s functionality, enabling users to structure content with appropriate headings, improving readability and organization. + +Below are examples demonstrating how to customize the format dropdown. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-headings/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-headings/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/custom-headings/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/custom-headings/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Quotation formatting + +The Rich Text Editor facilitates quotation formatting through the `Blockquote` tool available in the toolbar. Blockquotes are designed to visually highlight significant text, emphasizing key information or quotations by setting them apart from the main content for added emphasis and clarity. + +To format text as a quotation, select the desired text and click on the `Blockquote` icon in the toolbar. The selected text will be formatted as a blockquote, typically indented and styled differently from the surrounding content. + +Use the `Blockquote` tool in the editor below to see the feature in action. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/quotation-formatting/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/quotation-formatting/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/quotation-formatting/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +> In a markdown editor, blockquotes are represented using the `>` symbol. + +## Insert code + +The Rich Text Editor control offers a powerful feature to format text as preformatted code blocks, making it ideal for displaying programming snippets or structured contents. + +### Enabling code block formatting + +To enable code block formatting, ensure that the Formats item is included in the toolbar items of your Rich Text Editor configuration. + +Below are examples and code snippets demonstrating how to add and effectively use the code block formatting option in the Rich Text Editor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/code-format/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/code-format/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/code-format/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/code-format/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Applying code block formatting + +Follow these steps to format text as a code block: + +1. Select the desired text in the editor. +2. Click on the `Formats` dropdown in the toolbar. +3. Choose `Preformatted` from the dropdown menu. + +### Exiting code block format + +To exit the code block format: + +1. Place the cursor at the end of your code block content. +2. Press the Enter key twice. + +This action will move the cursor out of the code block and return to normal text formatting. + +### Enhancing code block appearance + +To make your code blocks more visually appealing, you can add custom styling. Here's an example of how to style your `
` tag:
+
+```typescript
+
+
+```
+
+This styling adds a light gray background, sets a monospace font, and includes padding and borders for better visual separation.
+
+## Format painter
+
+The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FormatPainterSettings) property.
+
+### Configuring format painter tool in the toolbar
+
+You can add the `FormatPainter` tool in the Rich Text Editor using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+By double-clicking the format painter toolbar button, `sticky mode` will be enabled. In sticky mode, the format painter will be disabled when the user clicks the `Escape` key again.
+
+The following code example shows how to add the format painter tool in the Rich Text Editor.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+### Customizing copy and paste format
+
+You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FormatPainterSettings) property.
+
+The [allowedFormats](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality.
+
+Similarly, with the [deniedFormats](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_DeniedFormats) property, you can utilize the selectors to prevent specific formats from being pasted onto the selected text. The table below illustrates the selectors and their respective usage.
+
+| Type | Description        | Selector                                                | Usage                                                                  |
+|------|--------------------|---------------------------------------------------------|------------------------------------------------------------------------|
+| ()   | Class Selector     | h3(e-rte-block-blue-text)                               | The class name e-rte-block-blue-text of H3 element is not copied.      |
+| []   | Attribute Selector | span\[title]                                            | The title attribute of span element is not copied.                     |
+| {}   | Style Selector     | span{background-color, color}                           | The background-color and color styles of span element is not copied.   |
+
+Using the `deniedFormats` property following styles are denied copying from the selected text such as `h3(e-rte-block-blue-text){background-color,padding}[title]; li{color}; span(e-inline-text-highlight)[title]; strong{color}(e-rte-strong-bg)`.
+
+Below is an example illustrating how to define the `allowedFormats` and `deniedFormats` settings for the Format Painter in the Rich Text Editor.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/format-painter-cs2" %}
+
+### Shortcut keys for copy and paste format
+
+For more details on keyboard navigation, refer to the [Keyboard support](../keyboard-support) documentation.
+
+> The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the Alt + Shift + v keyboard shortcut.
+
+Additionally, You can perform the format painter actions programmatically using the [executeCommand](../exec-command/) public method.
+
+## Clear formatting
+
+The ASP.NET MVC Rich Text Editor component offers a powerful `Clear Format` feature to remove any applied formatting from selected text.
+
+This feature is particularly useful when you need to:
+
+- Remove multiple styles at once
+- Quickly standardize text formatting
+- Prepare text for new styling
+
+### Configuring clear format
+
+To enable the Clear Format feature in your Rich Text Editor, you need to add it to the toolbar items. Follow these steps:
+
+1. Open your component file where you've implemented the Rich Text Editor.
+2. Locate the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property in your Rich Text Editor configuration.
+3. Add `'ClearFormat'` to the `items` array within `toolbarSettings`.
+
+Here's an example of how to configure the Clear Format feature:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Using clear format
+
+Once configured, you can use the Clear Format feature as follows:
+
+1. Select the text with formatting you want to remove.
+2. Click the `Clear Format` button in the toolbar.
+3. The selected text will revert to its original, unformatted state.
+
+Using `Clear Format` makes it easy to undo styling changes and keep your text looking consistent. Examples and code snippets below show how to use 'Clear Format' effectively in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/form-support.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/form-support.md
similarity index 94%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/form-support.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/form-support.md
index ee60490bb3..35bf7c26d7 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/form-support.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/form-support.md
@@ -63,5 +63,5 @@ Upon submitting the form, `getValue` method will be triggered. Through the `Form
 
 ## See Also
 
-* [How to integrate the third party library](./third-party-integration/)
-* [How to validate the value](./validation/)
\ No newline at end of file
+* [How to integrate the third party library](../third-party-integration)
+* [How to validate the value](../validation)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/read-only-mode.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/read-only-mode.md
similarity index 96%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/read-only-mode.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/read-only-mode.md
index baf4d99659..3aad06de2e 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/read-only-mode.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/read-only-mode.md
@@ -43,4 +43,4 @@ Please refer to the sample and code snippets below to demonstrate how to enable
 
 ## See Also
 
-[How to Disable and Enable the Rich Text Editor](./disable-editor)
\ No newline at end of file
+[How to Disable and Enable the Rich Text Editor](../disable-editor)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/xhtml-validation.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/xhtml-validation.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/xhtml-validation.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/validation-security/xhtml-validation.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-mode.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/editor-mode.md
similarity index 95%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-mode.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/editor-mode.md
index 980b333a49..a54e6eb271 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-mode.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/editor-mode.md
@@ -77,9 +77,9 @@ The third-party library such as [`Marked`](https://marked.js.org/#/README.md#REA
 {% endtabs %}
 {% endif %}
 
-For further details on Markdown editing, refer to the [`Markdown`](./markdown)
+For further details on Markdown editing, refer to the [`Markdown`](../../../markdown-editor/EJ2_ASP.NETCORE/getting-started)
 
 ## See Also
 
-* [How to integrate the third party library](./third-party-integration/)
-* [How to render the iframe](./iframe/)
+* [How to integrate the third party library](../third-party-integration)
+* [How to render the iframe](./iframe)
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/iframe.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/iframe.md
similarity index 98%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/iframe.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/iframe.md
index 1836c84454..d2278a0fe8 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/iframe.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/iframe.md
@@ -106,4 +106,4 @@ Likewise, add the external script file to the `< iframe >` element using the `sc
 ## See Also
 
 * [Implementing Inline Editing](./inline-editing)
-* [Using the Markdown Editor](./markdown)
+* [Using the Markdown Editor](../../../markdown-editor/EJ2_ASP.NETCORE/getting-started)
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/inline-editing.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/inline-editing.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/resizable-editor.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md
similarity index 94%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/resizable-editor.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md
index 6441af2c99..567ccc1d23 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/resizable-editor.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md
@@ -37,7 +37,7 @@ The following sample demonstrates the resizable feature.
 {% endtabs %}
 {% endif %}
 
-![Rich Text Editor Resizable support](./images/Resizable-Editor.png)
+![Rich Text Editor Resizable support](../images/Resizable-Editor.png)
 
 ## Setting Editor Resize Limits
 
@@ -82,4 +82,4 @@ By default, the control resizes up to the current viewport size. Apply these sty
 ## See Also
 
 * [Working with IFrame Editing Mode](./iframe)
-* [Using the Markdown Editor](./markdown)
\ No newline at end of file
+* [Using the Markdown Editor](../../../markdown-editor/EJ2_ASP.NETCORE/getting-started)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
similarity index 97%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/audio.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
index d9d70266c4..f74a7d0d28 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/audio.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
@@ -67,7 +67,7 @@ You can insert audio from either the hosted link or the local machine, by clicki
 
 By default, the audio tool opens the audio dialog, allowing you to insert audio from an online source. Inserting the URL will be added to the `src` attribute of the `` tag.
 
-![Rich Text Editor Audio insert](./images/aspcore-richtexteditor-audio-web.png)
+![Rich Text Editor Audio insert](../images/aspcore-richtexteditor-audio-web.png)
 
 ## Uploading Audio from Local Machine
 
@@ -206,7 +206,7 @@ N> By default, it doesn't support the `UseDefaultCredentials` property; we need
 
 Once an audio file has been inserted, you can change it using the Rich Text Editor [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `audioReplace` option. You can replace the audio file using the web URL or the browse option in the audio dialog.
 
-![Rich Text Editor Audio replace](./images/aspcore-richtexteditor-audio-replace.png)
+![Rich Text Editor Audio replace](../images/aspcore-richtexteditor-audio-replace.png)
 
 ## Deleting Audios
 
@@ -214,7 +214,7 @@ To remove audio from the Rich Text Editor content, select the audio and click th
 
 Once you select the audio from the local machine, the URL for the audio will be generated. You can remove the audio from the service location by clicking the cross icon.
 
-![Rich Text Editor Audio delete](./images/aspcore-richtexteditor-audio-del.png)
+![Rich Text Editor Audio delete](../images/aspcore-richtexteditor-audio-del.png)
 
 ## Configuring Audio Display Position
 
@@ -276,6 +276,6 @@ By configuring these options in the [quickToolbarSettings](https://help.syncfusi
 
 ## See Also
 
-* [Quick Toolbars in the Toolbar](./toolbar#quick-inline-toolbar)
+* [Quick Toolbars in the Toolbar](../toolbar/quick-toolbar#quick-inline-toolbar)
 * [How to Use the Video Editing Option in Toolbar Items](./video)
 * [How to Use the Image Editing Option in Toolbar Items](./insert-images)
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/file-browser.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/file-browser.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/file-browser.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/file-browser.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
similarity index 98%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-images.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
index edebe10ae1..950062f721 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-images.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
@@ -156,7 +156,7 @@ To remove an image from the Rich Text Editor content, select the image and click
 
 Once you select the image from the local machine, the URL for the image will be generate. From there, you can remove the image from the service location by clicking the cross icon.
 
-![Rich Text Editor Image delete](./images/image-del.png)
+![Rich Text Editor Image delete](../images/image-del.png)
 
 The following sample explains, how to configure `removeUrl` to remove a saved image from the remote service location, when the following image remove actions are performed:
 
@@ -194,7 +194,7 @@ Sets the default width and height of the image when it is inserted in the Rich T
 
 Through the quick toolbar, change the width and height using `Change Size` option. Once you click, the Image Size dialog box will open as follows. In that you can specify the width and height of the image in pixel.
 
-![Rich Text Editor Image dimension](./images/image-size.png)
+![Rich Text Editor Image dimension](../images/image-size.png)
 
 ## Adding Captions and Alt Text to Images
 
@@ -238,13 +238,13 @@ Sets the default display for an image when it is inserted in the Rich Text Edito
 
 The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, remove, edit and open link will be added to the quick toolbar of image. For further details about link, see the [`link documentation`](./link) documentation.
 
-![Rich Text Editor image with link](./images/image-link.png)
+![Rich Text Editor image with link](../images/image-link.png)
 
 ## Image Resizing Tools
 
 Rich Text Editor has a built-in image inserting support.  The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.
 
-![Rich Text Editor image resize](./images/image-resize.png)
+![Rich Text Editor image resize](../images/image-resize.png)
 
 ## Configuring Allowed Image Types
 
@@ -331,5 +331,5 @@ By configuring these options in the [quickToolbarSettings](https://help.syncfusi
 
 ## See Also
 
-* [Image Quick toolbar](./toolbar#quick-inline-toolbar)
-* [Hyperlink Management](./link)
\ No newline at end of file
+* [Image Quick toolbar](../toolbar#quick-inline-toolbar)
+* [Hyperlink Management](../link)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
similarity index 96%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/video.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
index ec70775823..89ff68746d 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/video.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
@@ -67,13 +67,13 @@ You can insert a video from either a hosted link or your local machine by clicki
 
 The insert video dialog opens with the `Embedded code` option selected by default. This allows you to insert a video using embedded code.
 
-![Rich Text Editor Embed URL Video insert](./images/aspcore-richtexteditor-video-embed.png)
+![Rich Text Editor Embed URL Video insert](../images/aspcore-richtexteditor-video-embed.png)
 
 ### Inserting Video via Web URL
 
 You can switch to the `Web URL` option by selecting the Web URL checkbox. Inserting a video using the Web URL option will add the video URL as the `src` attribute of the `` tag.
 
-![Rich Text Editor Video insert](./images/aspcore-richtexteditor-video-web.png)
+![Rich Text Editor Video insert](../images/aspcore-richtexteditor-video-web.png)
 
 ## Uploading Video from Local Machine
 
@@ -211,9 +211,9 @@ N> By default, it doesn't support the `UseDefaultCredentials` property, you can
 
 Once a video file has been inserted, you can replace it using the Rich Text Editor [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) `videoReplace` option. You can replace the video file either by using the embedded code or the web URL and the browse option in the video dialog.
 
-![Rich Text Editor Embed Video replace](./images/video-replace-embed.png)
+![Rich Text Editor Embed Video replace](../images/video-replace-embed.png)
 
-![Rich Text Editor Web Video replace](./images/video-replace-web.png)
+![Rich Text Editor Web Video replace](../images/video-replace-web.png)
 
 ## Deleting Video
 
@@ -221,7 +221,7 @@ To remove a video from the Rich Text Editor content, select the video and click
 
 Once you select the video from the local machine, the URL for the video will be generated. You can remove the video from the service location by clicking the cross icon.
 
-![Rich Text Editor Video delete](./images/video-del.png)
+![Rich Text Editor Video delete](../images/video-del.png)
 
 
 ## Adjusting Video Dimensions
@@ -230,7 +230,7 @@ Set the default width, minWidth, height, and minHeight of the video element when
 
 Through the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video), you can also change the width and height using the `Change Size` button. Once you click on the button, the video size dialog will open as below. In that, specify the width and height of the video in pixels.
 
-![Rich Text Editor Video dimension](./images/video-size.png)
+![Rich Text Editor Video dimension](../images/video-size.png)
 
 ## Configuring Video Display Position
 
@@ -270,7 +270,7 @@ You can disable the resize action by configuring `false` for the [insertVideoSet
 
 > If the [minWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinWidth) and [minHeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinHeight) properties are configured, the video resizing does not shrink below the specified values.
 
-![Rich Text Editor video resize](./images/aspcore-richtexteditor-video-resize.png)
+![Rich Text Editor video resize](../images/aspcore-richtexteditor-video-resize.png)
 
 ## Customizing the Video Quick Toolbar
 
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/emoji-picker.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/emoji-picker.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/mentions.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/slash-menu.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/slash-menu.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/slash-menu.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/slash-menu.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md
index 2861e81148..7a58796065 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md
@@ -47,25 +47,25 @@ Tables can also be inserted through the `Insert Table` option in the pop-up wher
 
 The `TableHeader` command is available in the quick toolbar, allowing you to add or remove the header row from the inserted table. The following image illustrates the table header.
 
-![Rich Text Editor table header](../images/table_header.png)
+![Rich Text Editor table header](./images/table_header.png)
 
 ## Inserting Rows
 
 You can insert `Rows` above or below the selected table cell using the quick toolbar. The focused row can also be deleted. The following screenshot shows the available options of the row item.
 
-![Rich Text Editor table row](../images/table_rows.png)
+![Rich Text Editor table row](./images/table_rows.png)
 
 ## Inserting Columns
 
 `Columns` can be inserted to the left or right of the selected table cell using the quick toolbar. The focused column can also be deleted. The following screenshot shows the available options in inserting column item.
 
-![Rich Text Editor table column](../images/table_column.png)
+![Rich Text Editor table column](./images/table_column.png)
 
 ## Setting Cell Background Color
 
 Set the background color for each table cell using the `BackgroundColor` command in the quick toolbar.
 
-![Rich Text Editor table background color](../images/table_bg_color.png)
+![Rich Text Editor table background color](./images/table_bg_color.png)
 
 ## Deleting Tables
 
@@ -77,13 +77,13 @@ Delete the entire table using the delete item in the quick toolbar.
 
 Align text inside table cells to the top, middle, or bottom using the `TableCellVerticalAlign` tool in the quick toolbar.
 
-![Rich Text Editor table vertical alignment](../images/table_vertical.png)
+![Rich Text Editor table vertical alignment](./images/table_vertical.png)
 
 ### Horizontal Alignment
 
 Align text inside table cells to the left, right, or center using the `TableCellHorizontalAlign` tool in the quick toolbar.
 
-![Rich Text Editor table horizontal alignment](../images/table_horizontal.png)
+![Rich Text Editor table horizontal alignment](./images/table_horizontal.png)
 
 ## Applying Table Styles
 
@@ -95,7 +95,7 @@ By Default, provides Dashed border and Alternate rows.
 
 **Alternate border**: Applies an alternating background to table rows.
 
-![Rich Text Editor table styles](../images/table_style.png)
+![Rich Text Editor table styles](./images/table_style.png)
 
 ## Setting Table and Cell Dimensions
 
@@ -103,7 +103,7 @@ Sets the default width of the table when it is inserted in the Rich Text Editor
 
 Users can modify the width, cell padding, and cell spacing of selected tables using the properties option in the quick toolbar.
 
-![Rich Text Editor table settings](../images/table_properties.png)
+![Rich Text Editor table settings](./images/table_properties.png)
 
 ## Table Cell Selection and Formatting
 
@@ -163,7 +163,7 @@ The table cell merge feature allows you to merge two or more row and column cell
 
 The following image explains the table merge action.
 
-![Rich Text Editor table cell merge](../images/table_merge.png)
+![Rich Text Editor table cell merge](./images/table_merge.png)
 
 ### Splitting Table Cells
 
@@ -171,7 +171,7 @@ The table cell split feature allows you to a selected cell can be split both hor
 
 The following image explains the table split action.
 
-![Rich Text Editor table cell split](../images/table_split.png)
+![Rich Text Editor table cell split](./images/table_split.png)
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar.md
deleted file mode 100644
index 907943623c..0000000000
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar.md
+++ /dev/null
@@ -1,402 +0,0 @@
----
-layout: post
-title: Toolbar in ##Platform_Name## Rich Text Editor Component | Syncfusion
-description: Learn here all about Toolbar in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Toolbar
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-# Toolbar in ##Platform_Name## Rich Text Editor Control
-
-The Syncfusion ASP.NET Core Rich Text Editor control provides a versatile and powerful toolbar to enhance your text editing experience. The toolbar contains a variety of formatting, styling, and editing tools, allowing users to create and modify content efficiently.
-
-## Tools
-
-### Default Toolbar Items
-
-By default, the ASP.NET Core Rich Text Editor displays the following toolbar items:
-
-> `Bold` , `Italic` , `Underline` , `|` , `Formats` , `Alignments` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo`
-
-These default items cover essential text editing features, such as text formatting, lists, alignment, and linking.
-
-### Available Toolbar Items
-
-The following table shows the list of available tools in the Rich Text Editor's toolbar.
-
-The order of items in the toolbar can be customized to meet your application's requirements. If no specific order is set, the editor will render the above default toolbar items. Below is a list of all available toolbar items in the Rich Text Editor.
-
-#### Text formatting
-
-It provides tools for applying text styles such as bold, italic, underline, strike-through, and more to modify the appearance of the text.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Bold  | ![Bold icon](./images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} |
-| Italic | ![Italic icon](./images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} |
-| Underline | ![Underline icon](./images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} |
-| StrikeThrough | ![StrikeThrough icon](./images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}|
-| ClearFormat | ![ClearFormat icon](./images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}|
-| Blockquote | ![Blockquote icon](./images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}|
-| SubScript | ![SubScript icon](./images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}|
-| SuperScript | ![SuperScript icon](./images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}|
-| LowerCase | ![LowerCase icon](./images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}|
-| UpperCase | ![UpperCase icon](./images/upper-case.png) | Change the case of selected text to upper  in the content.|toolbarSettings: { items: ['UpperCase’']}|
-
-#### Font & styling
-
-Tools in this section allow users to customize font properties such as font family, size, color, background color, and paragraph formatting.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| FontName | ![FontName icon](./images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}|
-| FontSize | ![FontSize icon](./images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}|
-| FontColor | ![FontColor icon](./images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}|
-| BackgroundColor | ![BackgroundColor icon](./images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}|
-| Formats (Paragraph, Headings) | ![Format icon](./images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}|
-
-#### Alignment
-
-This section provides alignment options for the text or content, allowing users to justify text or align it to the left, center, or right.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Alignment | ![Alignment icon](./images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}|
-| JustifyLeft | ![JustifyLeft icon](./images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} |
-| JustifyCenter | ![JustifyCenter icon](./images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} |
-| JustifyRight | ![JustifyRight icon](./images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} |
-| JustifyFull | ![JustifyFull icon](./images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} |
-
-#### Lists & indentation
-
-Tools here allow users to create ordered and unordered lists, change the list style, and adjust indentation levels for improved document structure.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| OrderedList | ![OrderedList icon](./images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}|
-| UnorderedList | ![UnorderedList icon](./images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}|
-| NumberFormatList | ![NumberFormatList icon](./images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}|
-| BulletFormatList | ![BulletFormatList icon](./images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}|
-| Indent | ![Indent icon](./images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}|
-| Outdent | ![Outdent icon](./images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}|
-
-#### Hyperlinks
-
-This section provides tools for inserting and managing hyperlinks within the content. Users can create new links or modify existing ones to enhance document navigation and interactivity.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Hyperlink | ![Hyperlink icon](./images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}|
-| InsertLink | ![InsertLink icon](./images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} |
-
-##### Link quicktoolbar items
-
-The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Editor, allowing users to add, edit, or remove links from selected text or images directly within the editor.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| OpenLink | ![OpenLink icon](./images/open-link.png) | To open the URL link that is  attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} |
-| EditLink | ![EditLink icon](./images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} |
-| RemoveLink | ![RemoveLink icon](./images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} |
-
-#### Images
-
-This section contains the primary tool for inserting images into the editor.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Insert Image | ![Images icon](./images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}|
-
-##### Image quicktoolbar items
-
-The image quicktoolbar offers a set of tools to edit images inserted in the Rich Text Editor. It allows users to modify image properties, including alignment, size, alternate text, and links, enhancing image management in the content.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Replace Image  | ![Replace icon](./images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} |
-| Align Image | ![Alignment icon](./images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} |
-| Remove Image | ![Remove icon](./images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} |
-| OpenImageLink | ![OpenImageLink icon](./images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} |
-| EditImageLink | ![EditImageLink icon](./images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} |
-| RemoveImageLink | ![RemoveImageLink icon](./images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} |
-| Display | ![Display icon](./images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} |
-| AltText | ![AltText icon](./images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} |
-| Dimension | ![Dimension icon](./images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} |
-
-#### Tables
-
-This section offers the main tool for creating tables within the content.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| CreateTable | ![CreateTable icon](./images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} |
-
-##### Table quicktoolbar items
-
-The table quicktoolbar provides options for table editing within the Rich Text Editor. Users can insert or remove rows and columns, merge or split cells, and access table properties for easier table management and customization.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| RemoveTable | ![RemoveTable icon](./images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} |
-| TableHeader | ![TableHeader icon](./images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} |
-| TableColumns | ![TableColumns icon](./images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} |
-| TableRows | ![TableRows icon](./images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} |
-| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](./images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} |
-| TableCellVerticalAlign | ![TableCellVerticalAlign icon](./images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} |
-| TableEditProperties | ![TableEditProperties icon](./images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} |
-
-#### Undo & redo
-
-These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Undo | ![Undo icon](./images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} |
-| Redo | ![Redo icon](./images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}|
-
-#### Other tools
-
-This section contains miscellaneous tools such as full-screen mode, print, preview, source code editing, and clearing all styles from text.
-
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| FullScreen | ![FullScreen icon](./images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}|
-| Maximize | ![Maximize icon](./images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} |
-| Minimize | ![Minimize icon](./images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} |
-| Preview | ![Preview icon](./images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} |
-| InsertCode | ![InsertCode icon](./images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} |
-| Print | ![Print icon](./images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}|
-| ClearAll | ![ClearAll icon](./images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} |
-| SourceCode | ![SourceCode icon](./images/code-view.png)  | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}|
-
-
-## How to Enable the Toolbar
-
-To learn about the different types of toolbars in the ASP.NET Core Rich Text Editor, watch this video:
-
-{% youtube "youtube:https://www.youtube.com/watch?v=09tBgKpjgjU"%}
-
-The Rich Text Editor toolbar contains a collection of tools such as bold, italic and text alignment buttons that are used to format the content. However, in most integrations, you can customize the toolbar configurations easily to suit your needs.
-
-The Rich Text Editor allows you to configure different types of toolbar using [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Type) field in [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The types of toolbar are:
-
-1. Expand
-2. MultiRow
-3. Scrollable
-
-## Expanding the Toolbar
-
-The default mode of the toolbar is `Expand`, configured through [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) with `type: 'Expand'`. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/toolbar-expand/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/toolbar-expand/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## Configuring a Multi-row Toolbar
-
-Setting the `type` as `MultiRow` in [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will arrange the toolbar items across multiple rows, displaying all configured toolbar items.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/toolbar-multi/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/toolbar-multi/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## Implementing a Scrollable Toolbar
-
-Setting the `type` to `Scrollable` in [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/scrollable/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/scrollable/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/scrollable/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/scrollable/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## Creating a Sticky Toolbar
-
-By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the [floatingToolbarOffset](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FloatingToolbarOffset) to adjust its offset from the top of the document.
-
-Additionally, you can enable or disable the floating toolbar using the [enableFloating](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_EnableFloating) property.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/floating-toolbar/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/floating-toolbar/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-### Custom Toolbar Items
-
-To quickly get started with the ASP.NET Core Rich Text Editor with a custom toolbar, watch this video:
-
-{% youtube "youtube:https://www.youtube.com/watch?v=AnHsErOlU1A"%}
-
-The Rich Text Editor allows you to configure your own commands to its toolbar using the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance.
-
-This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor.
-
-The following code snippet illustrates custom tool with tooltip text which will be included in [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) field of the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property.
-
-
-```csharp
-
-    var tools = new {
-        tooltipText = "Insert Symbol",
-            template = ""
-    };
-    ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
-        "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools
-        , "|", "Undo", "Redo"
-    };
-
-```
-
-The Rich Text Editor provides options to customize tool functionalities. Use the `undo` property to enable or disable the undo function for specific tools. Additionally, the click property lets you configure and bind the onclick event of a tool to a specific method.
-
-This sample demonstrates how to add a custom "Ω" icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/custom-tool/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/custom-tool/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/custom-tool/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/custom-tool/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-> When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the `e-rte-elements` class to the control rendered in the custom toolbar.
-
-### Enabling and Disabling Toolbar Items
-
-You can use the `enableToolbarItem` and `disableToolbarItem` methods to control the state of toolbar items. This methods takes a single item or an array of [items](#available-toolbar-items) as parameter.
-
->You can add the command name `Custom` to disable the custom toolbar items on source code view and other quick toolbar operations.
-
-## Quick Inline toolbar
-
-Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, link and table attributes of the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property.
-
-| Target Element | Default Quick Toolbar items |
-|----------------|---------|
-|image | 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText','Dimension'.|
-| link | 'Open', 'Edit', 'UnLink'.|
-| text | null 
 (Any toolbar [items](https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/toolbar#toolbar-items) in the Rich Text Editor can be configured here).|
-| table| 'TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'.|
-
-Custom tool can be added to the corresponding quick toolbar, using [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property.
-
-The below sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/quick-inline/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/quick-inline/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/quick-inline/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/quick-inline/controller.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## See Also
-
-* [Customizing Rich Text Editor Toolbar Styles](./style#customizing-the-rich-text-editors-toolbar)
-* [Implementing Inline Editing](./inline-editing)
-* [Customizing Accessibility Shortcut Keys](./accessibility#keyboard-interaction)
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/quick-toolbar.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/quick-toolbar.md
new file mode 100644
index 0000000000..ed7e822637
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/quick-toolbar.md
@@ -0,0 +1,231 @@
+---
+layout: post
+title: Quick toolbars in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Quick toolbars in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Quick toolbars
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Quick Toolbars in the ##Platform_Name## Rich Text Editor Control
+
+The Rich Text Editor has quick toolbars that act as context-menus, appearing when you click on elements like images, links, audio, video, and tables. By default, specific quick toolbar items are displayed when clicking on the corresponding element. You can customize these items using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property.
+
+## Image quick toolbar
+
+You can customize the quick toolbar options for images using the `image` property within the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Image). The Rich Text Editor provides essential tools such as 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText', and 'Dimension' allowing seamless image management and editing directly within the content.
+
+By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property, you can enhance the editor’s functionality, ensuring a user-friendly experience for efficiently handling image elements.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/image-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/image-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/image-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/image-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Link quick toolbar
+
+The link quick toolbar appears when you click on a link in the editor. You can customize its items using the `link` property in the  [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Link).
+
+The Rich Text Editor provides essential tools in the link quick toolbar, including "Open", "Edit Link", "Remove Link", and "Custom Tool".
+
+The following example demonstrates how to customize the link quick toolbar using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/link-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/link-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/link-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/link-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Table quick toolbar
+
+The table quick toolbar opens when you click anywhere within a table. Customize its items using the `table` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Table).
+
+The quick toolbar appears when clicking on a table, providing easy access to table-related commands. You can customize the quick toolbar by adding or removing tools using the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property.
+
+The following sample demonstrates the customiztion of table quick toolbar.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/table-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/table-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/table-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/table-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Audio quick toolbar
+
+Customize the quick toolbar items for audio elements using the `audio` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio).The Rich Text Editor provides essential tools such as "AudioReplace", "Remove", and "AudioLayoutOption", allowing seamless management and editing of audio content.
+
+By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property, you can enhance the editor’s capabilities, ensuring a user-friendly experience for handling audio elements efficiently.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/audio-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/audio-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/audio-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/audio-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Video quick toolbar
+
+The video quick toolbar appears when you click on a video element. You can customize its tools using the `video` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video).
+
+The Rich Text Editor allows you to tailor the video quick toolbar with essential tools such as "VideoReplace", "VideoAlign", "VideoRemove", "VideoLayoutOption", and "VideoDimension", enabling seamless management of embedded videos.
+
+By configuring these options in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property, you enhance the editor’s capabilities, ensuring a user-friendly experience for editing and customizing video elements effortlessly.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/video-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/video-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/video-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/video-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Text quick toolbar
+
+The text quick toolbar provides easy access to commonly used formatting tools, enabling users to apply styles and adjustments effortlessly. This enhances the editing experience by streamlining text formatting.
+
+Customize the quick toolbar items using the `text` property in the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Text). Any toolbar items available in the Rich Text Editor can be configured for the text quick toolbar. The example below demonstrates its customization.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/text-quick-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/text-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/text-quick-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/text-quick-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Quick inline toolbar
+
+Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, link and table attributes of the [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property.
+
+| Target Element | Default Quick Toolbar items |
+|----------------|---------|
+|image | 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText','Dimension'.|
+| link | 'Open', 'Edit', 'UnLink'.|
+| text | null 
 (Any toolbar [items](https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/toolbar#toolbar-items) in the Rich Text Editor can be configured here).|
+| table| 'TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'.|
+
+Custom tool can be added to the corresponding quick toolbar, using [quickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_QuickToolbarSettings) property.
+
+The below sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/quick-inline/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/quick-inline/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/quick-inline/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/quick-inline/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-types.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-types.md
new file mode 100644
index 0000000000..877dd795f0
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-types.md
@@ -0,0 +1,137 @@
+---
+layout: post
+title: Toolbar types in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Toolbar types in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Toolbar types
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Toolbar in the ##Platform_Name## Rich Text Editor Control
+
+The Syncfusion ##Platform_Name## Rich Text Editor provides a powerful toolbar that enables users to format, style, and edit content efficiently. The toolbar includes essential editing tools such as bold, italic, underline, alignment, and lists, along with customization options to suit different use cases.
+
+To learn about the different types of toolbars in the ASP.NET Core Rich Text Editor, watch this video:
+
+{% youtube "youtube:https://www.youtube.com/watch?v=09tBgKpjgjU"%}
+
+The Rich Text Editor allows you to configure different types of toolbar using [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Type) field in [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The types of toolbar are:
+
+1. Expand
+2. MultiRow
+3. Scrollable
+
+## Expanding the toolbar
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-expand/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-expand/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-expand/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Configuring a multi-row toolbar
+
+Setting the `type` as `MultiRow` in [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will arrange the toolbar items across multiple rows, displaying all configured toolbar items.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-multi/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-multi/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-multi/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Implementing a scrollable toolbar
+
+Setting the `type` to `Scrollable` in [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/scrollable/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/scrollable/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/scrollable/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/scrollable/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Creating a sticky toolbar
+
+By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the [floatingToolbarOffset](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FloatingToolbarOffset) to adjust its offset from the top of the document.
+
+Additionally, you can enable or disable the floating toolbar using the [enableFloating](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_EnableFloating) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/floating-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/floating-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/floating-toolbar/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## See also
+
+* [Customizing Rich Text Editor Toolbar Styles](../style#customizing-the-rich-text-editors-toolbar)
+* [Implementing Inline Editing](../editor-types/inline-editing)
+* [Customizing Accessibility Shortcut Keys](../accessibility#keyboard-navigation)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md
new file mode 100644
index 0000000000..e727c5dde1
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md
@@ -0,0 +1,193 @@
+---
+layout: post
+title: Toolbar types in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Toolbar types in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Toolbar types
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Built-in Tools in the ##Platform_Name## Rich Text Editor Control
+
+By default, the ASP.NET Core Rich Text Editor displays the following toolbar items:
+
+> `Bold` , `Italic` , `Underline` , `|` , `Formats` , `Alignments` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo`
+
+These default items cover essential text editing features, such as text formatting, lists, alignment, and linking.
+
+## Available Toolbar Items
+
+The following table shows the list of available tools in the Rich Text Editor's toolbar.
+
+The order of items in the toolbar can be customized to meet your application's requirements. If no specific order is set, the editor will render the above default toolbar items. Below is a list of all available toolbar items in the Rich Text Editor.
+
+### Text formatting
+
+It provides tools for applying text styles such as bold, italic, underline, strike-through, and more to modify the appearance of the text.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Bold  | ![Bold icon](../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} |
+| Italic | ![Italic icon](../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} |
+| Underline | ![Underline icon](../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} |
+| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}|
+| ClearFormat | ![ClearFormat icon](../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}|
+| Blockquote | ![Blockquote icon](../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}|
+| SubScript | ![SubScript icon](../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}|
+| SuperScript | ![SuperScript icon](../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}|
+| LowerCase | ![LowerCase icon](../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase | ![UpperCase icon](../images/upper-case.png) | Change the case of selected text to upper  in the content.|toolbarSettings: { items: ['UpperCase’']}|
+
+### Font & styling
+
+Tools in this section allow users to customize font properties such as font family, size, color, background color, and paragraph formatting.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| FontName | ![FontName icon](../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}|
+| FontSize | ![FontSize icon](../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}|
+| FontColor | ![FontColor icon](../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}|
+| BackgroundColor | ![BackgroundColor icon](../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}|
+| Formats (Paragraph, Headings) | ![Format icon](../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}|
+
+### Alignment
+
+This section provides alignment options for the text or content, allowing users to justify text or align it to the left, center, or right.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Alignment | ![Alignment icon](../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}|
+| JustifyLeft | ![JustifyLeft icon](../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} |
+| JustifyCenter | ![JustifyCenter icon](../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} |
+| JustifyRight | ![JustifyRight icon](../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} |
+| JustifyFull | ![JustifyFull icon](../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} |
+
+### Lists & indentation
+
+Tools here allow users to create ordered and unordered lists, change the list style, and adjust indentation levels for improved document structure.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| OrderedList | ![OrderedList icon](../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}|
+| UnorderedList | ![UnorderedList icon](../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}|
+| NumberFormatList | ![NumberFormatList icon](../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}|
+| BulletFormatList | ![BulletFormatList icon](../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}|
+| Indent | ![Indent icon](../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}|
+| Outdent | ![Outdent icon](../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}|
+
+### Hyperlinks
+
+This section provides tools for inserting and managing hyperlinks within the content. Users can create new links or modify existing ones to enhance document navigation and interactivity.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}|
+| InsertLink | ![InsertLink icon](../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} |
+
+#### Link quicktoolbar items
+
+The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Editor, allowing users to add, edit, or remove links from selected text or images directly within the editor.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| OpenLink | ![OpenLink icon](../images/open-link.png) | To open the URL link that is  attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} |
+| EditLink | ![EditLink icon](../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} |
+| RemoveLink | ![RemoveLink icon](../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} |
+
+### Images
+
+This section contains the primary tool for inserting images into the editor.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Insert Image | ![Images icon](../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}|
+
+#### Image quicktoolbar items
+
+The image quicktoolbar offers a set of tools to edit images inserted in the Rich Text Editor. It allows users to modify image properties, including alignment, size, alternate text, and links, enhancing image management in the content.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Replace Image  | ![Replace icon](../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} |
+| Align Image | ![Alignment icon](../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} |
+| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} |
+| OpenImageLink | ![OpenImageLink icon](../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} |
+| EditImageLink | ![EditImageLink icon](../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} |
+| RemoveImageLink | ![RemoveImageLink icon](../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} |
+| Display | ![Display icon](../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} |
+| AltText | ![AltText icon](../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} |
+| Dimension | ![Dimension icon](../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} |
+
+### Tables
+
+This section offers the main tool for creating tables within the content.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| CreateTable | ![CreateTable icon](../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} |
+
+#### Table quicktoolbar items
+
+The table quicktoolbar provides options for table editing within the Rich Text Editor. Users can insert or remove rows and columns, merge or split cells, and access table properties for easier table management and customization.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| RemoveTable | ![RemoveTable icon](../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} |
+| TableHeader | ![TableHeader icon](../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} |
+| TableColumns | ![TableColumns icon](../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} |
+| TableRows | ![TableRows icon](../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} |
+| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} |
+| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} |
+| TableEditProperties | ![TableEditProperties icon](../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} |
+
+### Undo & redo
+
+These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} |
+| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}|
+
+### Other tools
+
+This section contains miscellaneous tools such as full-screen mode, print, preview, source code editing, and clearing all styles from text.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| FullScreen | ![FullScreen icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}|
+| Maximize | ![Maximize icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} |
+| Minimize | ![Minimize icon](../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} |
+| Preview | ![Preview icon](../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} |
+| InsertCode | ![InsertCode icon](../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} |
+| Print | ![Print icon](../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}|
+| ClearAll | ![ClearAll icon](../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} |
+| SourceCode | ![SourceCode icon](../images/code-view.png)  | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}|
+
+## Removing built-in tool from toolbar
+
+Remove the build-in tools from the toolbar by using the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/remove-buildin-tool/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/remove-buildin-tool/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/remove-buildin-tool/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/remove-buildin-tool/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/custom-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/custom-tools.md
new file mode 100644
index 0000000000..5465af4669
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/custom-tools.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Custom Toolbar in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Custom Toolbar in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Custom Toolbar
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Custom Toolbar Items in the ##Platform_Name## Rich Text Editor Control
+
+To quickly get started with the ASP.NET Core Rich Text Editor with a custom toolbar, watch this video:
+
+{% youtube "youtube:https://www.youtube.com/watch?v=AnHsErOlU1A"%}
+
+The Rich Text Editor allows you to configure your own commands to its toolbar using the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance.
+
+This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor.
+
+The following code snippet illustrates custom tool with tooltip text which will be included in [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) field of the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property.
+
+
+```csharp
+
+    var tools = new {
+        tooltipText = "Insert Symbol",
+            template = ""
+    };
+    ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
+        "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools
+        , "|", "Undo", "Redo"
+    };
+
+```
+
+The Rich Text Editor provides options to customize tool functionalities. Use the `undo` property to enable or disable the undo function for specific tools. Additionally, the click property lets you configure and bind the onclick event of a tool to a specific method.
+
+This sample demonstrates how to add a custom "Ω" icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-tool/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-tool/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-tool/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-tool/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+> When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the `e-rte-elements` class to the control rendered in the custom toolbar.
+
+## Enabling and disabling toolbar items
+
+You can use the `enableToolbarItem` and `disableToolbarItem` methods to control the state of toolbar items. This methods takes a single item or an array of [items](#available-toolbar-items) as parameter.
+
+>You can add the command name `Custom` to disable the custom toolbar items on source code view and other quick toolbar operations.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/styling-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/styling-tools.md
new file mode 100644
index 0000000000..ed09633cc5
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/styling-tools.md
@@ -0,0 +1,234 @@
+---
+layout: post
+title: Styling tools in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Styling tools in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Styling tools
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Styling Tools in the ##Platform_Name## Rich Text Editor Control
+
+## Font family
+  
+The Rich Text Editor initializes with a default font family, which inherits the font family of the parent element. You can change the font for selected text using the font family dropdown in the toolbar. When the default font family is selected, the toolbar will display "Font Name". However, for other font families, the toolbar will show the name of the selected font.
+
+To apply a different font style to a specific section of the content, follow these steps:
+
+1. Select the text you want to change.
+2. Choose the desired font style from the drop-down menu in the toolbar.
+
+These steps will apply the selected font style to the chosen text, allowing you to customize the appearance of your content easily.
+
+### Built-in font family
+
+You can add the `FontName` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/font-family/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/font-family/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/font-family/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/font-family/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+The Rich Text Editor comes with a pre-configured set of [fontFamily](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property.
+
+### Custom font family
+
+The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the [fontFamily](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property. This allows you to extend the available font options beyond the default selection.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-font-family/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-font-family/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-font-family/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-font-family/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Google font support
+
+To use web fonts in Rich Text Editor, it is not needed for the web fonts to be present in local machine. To add the web fonts to Rich Text Editor, you need to refer the web font links and add the font names in the [fontFamily](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontFamily) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/how-to/google-webfonts/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/how-to/google-webfonts/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/how-to/google-webfonts/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/how-to/google-webfonts/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+The below font style links are referred in the page.
+
+```typescript
+
+
+
+
+```
+
+N> In the above sample, you can see that we have added two Google web fonts (`Roboto` and `Great vibes`) to `Rich Text Editor`.
+
+## Font size
+
+The Rich Text Editor initializes with a default font size, which inherits the font size of the parent element. You can change the font for selected text using the font size dropdown in the toolbar. When the default font size is selected, the toolbar will display "Font Size". However, for other font sizes, the toolbar will show the name of the selected font.
+
+### Built-in font size
+
+You can add the `FontSize` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/styling/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/styling/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/styling/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/styling/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+The Rich Text Editor includes a default set of [fontSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontSize) property.
+
+### Custom font size
+
+The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the [fontSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontSize) property. This allows you to extend the available font options beyond the default selection.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-style/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-style/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-style/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-style/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Font and background color
+
+You can add the `FontColor` and `BackgroundColor` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](ps://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/font-background-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/font-background-color/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/font-background-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/font-background-color/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Custom font and background colors
+
+To apply `font color` or `background color` to selected content in the Rich Text Editor, use the font color and background color tools.
+
+The Rich Text Editor offers custom font and background colors along with the existing list through the [colorCode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ColorCode) field of the [fontColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FontColor) and [backgroundColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_BackgroundColor) properties.
+
+Both the `FontColor` and `BackgroundColor` properties offer two modes: `Picker` and `Palette`. The Palette mode provides a predefined set of colors, while the Picker mode includes a color scheme to choose custom colors. You can switch between these options using the [modeSwitcher](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ModeSwitcher) feature.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-font/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-font/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-font/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-font/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md
new file mode 100644
index 0000000000..8183458077
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md
@@ -0,0 +1,583 @@
+---
+layout: post
+title: Text formatting and Structure in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Text formatting and Structure
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control
+
+## Basic text styling
+
+The Rich Text Editor's basic styles feature provides essential formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured.
+
+### Available text styles
+
+The table below lists the available text styles in the Rich Text Editor's toolbar.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Bold  | ![Bold icon](../images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `bold` |
+| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` |
+| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
+| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
+| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `inline code`|
+| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
+| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
+| LowerCase | ![LowerCase icon](../images/lower-case.png) |  Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
+
+Please refer to the sample below to add these basic text styling options in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/basic-text-styling/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/basic-text-styling/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/basic-text-styling/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/basic-text-styling/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Text alignments
+
+The Rich Text Editor offers various text alignment options, including left, center, right, and justify. To utilize these alignment options, add the Alignments item to the items property in the toolbarSettings.
+
+> **Important Note:** Text alignment is applied to the entire block element containing the cursor or selected text, not just to the selected text itself. When you apply an alignment, it affects the whole paragraph or block, even if you've only selected a portion of the text.
+
+Here are the available alignment options:
+
+* Align Left:
+To left-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Left` icon in the toolbar. This will align the entire paragraph with the left margin.
+
+* Align Center:
+To center-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Center` icon in the toolbar. This will center the entire paragraph within its container.
+
+* Align Right:
+To right-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Right` icon in the toolbar. This will align the entire paragraph with the right margin.
+
+* Align Justify:
+To fully justify your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Justify` icon in the toolbar. This will distribute the entire paragraph evenly across the line, aligning it with both the left and right margins.
+
+Please refer to the sample and code snippets below to add these alignment options in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/text-alignments/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/text-alignments/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/text-alignments/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/text-alignments/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Number and bullet format list
+
+List formatting in the Rich Text Editor allows users to organize content into structured lists, enhancing readability and visual presentation. The control supports two main types of lists:
+
+1. Ordered Lists
+2. Unordered Lists
+
+### Ordered lists
+
+Ordered lists present items in a specific sequence, with each item preceded by a number or letter. The Rich Text Editor provides two ways to create and manage ordered lists:
+
+#### Using the ordered list tool
+
+The `OrderedList` toolbar item offers a quick way to create or toggle a numbered list. To use it, select the desired text in the editor and click the `OrderedList` button in the toolbar. If the selected text is not already a numbered list, it will be converted into one. If it's already a numbered list, clicking the button will remove the list formatting.
+
+#### Number format list tool
+
+For more detailed control over the numbering style, use the `numberFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `numberFormatList` dropdown. The selected text will be transformed into a numbered list with the chosen style.
+
+##### Available numbering styles:
+
+* `None`: Removes numbering while maintaining list structure and indentation
+* `Number`: Uses standard numeric sequencing (1, 2, 3, ...)
+* `Lower Roman`: Employs lowercase Roman numerals (i, ii, iii, ...)
+* `Lowercase Greek`: Utilizes lowercase Greek letters (α, β, γ, ...)
+* `Upper Alpha`: Applies uppercase letters (A, B, C, ...)
+* `Lower Alpha`: Uses lowercase letters (a, b, c, ...)
+* `Upper Roman`: Employs uppercase Roman numerals (I, II, III, ...)
+
+You can customize the available number formats using the [numberFormatList](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_NumberFormatList) property of the Rich Text Editor.
+
+The following example demonstrates how to customize the number format lists in the Rich Text Editor:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/number-format-list/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/number-format-list/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/number-format-list/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/number-format-list/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Unordered lists
+
+Unordered lists present items with visual markers, providing an effective way to list items without implying order or priority. The Rich Text Editor offers two methods for creating and managing unordered lists:
+
+#### Using the unordered list tool
+
+The `UnorderedList` toolbar item provides a fast way to create or toggle a bulleted list. To use it, select the desired text in the editor and click the `UnorderedList` button in the toolbar. If the selected text is not already a bulleted list, it will be converted into one. If it's already a bulleted list, clicking the button will remove the list formatting.
+
+#### Bullet format list tool
+
+For more control over the bullet style, use the `bulletFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `bulletFormatList` dropdown. The selected text will be transformed into a bullet list with the chosen style.
+
+##### Available bullet styles
+
+* `None`: Removes bullet points while maintaining list structure and indentation
+* `Disc`: Displays solid circular bullets
+* `Square`: Uses solid square bullets
+* `Circle`: Presents hollow circular bullets
+
+The following example demonstrates how to customize the bullet format lists in the Rich Text Editor:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-lists/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-lists/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-lists/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-lists/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Increase and decrease indent
+
+The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.
+
+The Rich Text Editor allows you to configure two types of indentation tools, `Indent` and `Outdent` tool  in the Rich Text Editor toolbar using the `ToolbarSettings` [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+| Options | Description |
+|----------------|---------|
+| Indent | Increases the indentation |
+| Outdent | Decreases the indentation |
+
+To adjust the text indentation:
+
+1. Select the desired text or paragraph.
+2. Click the Indent or Outdent button in the toolbar.
+3. The indentation of the selected text will be modified accordingly.
+
+To configure the `Indent` and `Outdent` toolbar item, refer to the below code.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Indentation in lists
+
+The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily.
+
+#### Increasing indent
+
+To increase the indent of a list item:
+
+1. Select the list item you want to indent.
+2. Click the "Increase Indent" button in the toolbar or press Ctrl + ].
+3. The selected item will be indented, creating a nested list.
+
+#### Decreasing indent
+
+To decrease the indent of a list item:
+
+1. Select the indented list item.
+2. Click the "Decrease Indent" button in the toolbar or press Ctrl + [.
+3. The selected item will move back to the previous indentation level.
+
+#### Using tab key for indentation
+
+The Tab key provides a quick way to adjust list indentation:
+
+- Pressing Tab will increase the indent of the selected list item, creating a nested list.
+- Pressing Shift + Tab will decrease the indent of the selected list item, moving it to the previous level.
+
+This behavior allows for efficient creation and management of multi-level lists without the need to use the toolbar buttons.
+
+## Heading formats
+
+The Rich Text Editor control provides a feature to format text with various heading styles, such as Heading 1, Heading 2, Heading 3, and Heading 4. These headings allow for structuring content hierarchically, improving readability, and organizing information effectively.
+
+### Built-in formats
+
+To enable heading styles in your Rich Text Editor:
+
+1. Ensure the `Formats` item is included in the toolbar configuration.
+2. To apply a heading:
+    * Select the desired text
+    * Click the `Formats` dropdown in the toolbar
+    * Choose the appropriate heading level (e.g., Heading 1, Heading 2)
+
+This action will format the selected text with the chosen heading style, helping to create a clear document structure and emphasize important sections.
+
+Below are examples and code snippets demonstrating how to integrate and utilize heading formatting options effectively in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/headings/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/headings/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/headings/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/headings/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Custom format
+
+The Rich Text Editor allows you to customize the format dropdown to include specific styles such as heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, and paragraph.
+
+To customize the format dropdown:
+
+1. Define a `formats` array in your component configuration.
+2. Specify each format option with a display name and corresponding value.
+
+This customization enhances the editor’s functionality, enabling users to structure content with appropriate headings, improving readability and organization.
+
+Below are examples demonstrating how to customize the format dropdown.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-headings/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-headings/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/custom-headings/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/custom-headings/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Quotation formatting
+
+The Rich Text Editor facilitates quotation formatting through the `Blockquote` tool available in the toolbar. Blockquotes are designed to visually highlight significant text, emphasizing key information or quotations by setting them apart from the main content for added emphasis and clarity.
+
+To format text as a quotation, select the desired text and click on the `Blockquote` icon in the toolbar. The selected text will be formatted as a blockquote, typically indented and styled differently from the surrounding content.
+
+Use the `Blockquote` tool in the editor below to see the feature in action.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/quotation-formatting/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/quotation-formatting/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/quotation-formatting/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/quotation-formatting/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+> In a markdown editor, blockquotes are represented using the `>` symbol.
+
+## Insert code
+
+The Rich Text Editor control offers a powerful feature to format text as preformatted code blocks, making it ideal for displaying programming snippets or structured contents.
+
+### Enabling code block formatting
+
+To enable code block formatting, ensure that the Formats item is included in the toolbar items of your Rich Text Editor configuration.
+
+Below are examples and code snippets demonstrating how to add and effectively use the code block formatting option in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-format/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-format/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Applying code block formatting
+
+Follow these steps to format text as a code block:
+
+1. Select the desired text in the editor.
+2. Click on the `Formats` dropdown in the toolbar.
+3. Choose `Preformatted` from the dropdown menu.
+
+### Exiting code block format
+
+To exit the code block format:
+
+1. Place the cursor at the end of your code block content.
+2. Press the Enter key twice.
+
+This action will move the cursor out of the code block and return to normal text formatting.
+
+### Enhancing code block appearance
+
+To make your code blocks more visually appealing, you can add custom styling. Here's an example of how to style your `
` tag:
+
+```typescript
+
+
+```
+
+This styling adds a light gray background, sets a monospace font, and includes padding and borders for better visual separation.
+
+## Format painter
+
+The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
+
+### Configuring format painter tool in the toolbar
+
+You can add the `FormatPainter` tool in the Rich Text Editor using the `toolbarSettings` [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+By double-clicking the format painter toolbar button, `sticky mode` will be enabled. In sticky mode, the format painter will be disabled when the user clicks the `Escape` key again.
+
+The following code example shows how to add the format painter tool in the Rich Text Editor.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+### Customizing copy and paste format
+
+You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
+
+The [allowedFormats](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality.
+
+Similarly, with the [deniedFormats](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_DeniedFormats) property, you can utilize the selectors to prevent specific formats from being pasted onto the selected text. The table below illustrates the selectors and their respective usage.
+
+| Type | Description        | Selector                                                | Usage                                                                  |
+|------|--------------------|---------------------------------------------------------|------------------------------------------------------------------------|
+| ()   | Class Selector     | h3(e-rte-block-blue-text)                               | The class name e-rte-block-blue-text of H3 element is not copied.      |
+| []   | Attribute Selector | span\[title]                                            | The title attribute of span element is not copied.                     |
+| {}   | Style Selector     | span{background-color, color}                           | The background-color and color styles of span element is not copied.   |
+
+Using the `deniedFormats` property following styles are denied copying from the selected text such as `h3(e-rte-block-blue-text){background-color,padding}[title]; li{color}; span(e-inline-text-highlight)[title]; strong{color}(e-rte-strong-bg)`.
+
+Below is an example illustrating how to define the `allowedFormats` and `deniedFormats` settings for the Format Painter in the Rich Text Editor.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/format-painter-cs2" %}
+
+### Shortcut keys for copy and paste format
+
+For more details on keyboard navigation, refer to the [Keyboard support](../keyboard-support) documentation.
+
+> The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the Alt + Shift + v keyboard shortcut.
+
+Additionally, You can perform the format painter actions programmatically using the [executeCommand](../exec-command/) public method.
+
+## Clear formatting
+
+The ASP.NET Core Rich Text Editor component offers a powerful `Clear Format` feature to remove any applied formatting from selected text.
+
+This feature is particularly useful when you need to:
+
+- Remove multiple styles at once
+- Quickly standardize text formatting
+- Prepare text for new styling
+
+### Configuring clear format
+
+To enable the Clear Format feature in your Rich Text Editor, you need to add it to the toolbar items. Follow these steps:
+
+1. Open your component file where you've implemented the Rich Text Editor.
+2. Locate the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property in your Rich Text Editor configuration.
+3. Add `'ClearFormat'` to the `items` array within `toolbarSettings`.
+
+Here's an example of how to configure the Clear Format feature:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Using clear format
+
+Once configured, you can use the Clear Format feature as follows:
+
+1. Select the text with formatting you want to remove.
+2. Click the `Clear Format` button in the toolbar.
+3. The selected text will revert to its original, unformatted state.
+
+Using `Clear Format` makes it easy to undo styling changes and keep your text looking consistent. Examples and code snippets below show how to use 'Clear Format' effectively in the Rich Text Editor.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/form-support.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/form-support.md
similarity index 90%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/form-support.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/form-support.md
index 3c6b9f9b8b..8c91d017dd 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/form-support.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/form-support.md
@@ -67,6 +67,6 @@ Upon submitting the form, `getValue` method will be triggered. Through the `Form
 
 ## See Also
 
-* [How to integrate the third party library](./third-party-integration/)
-* [How to validate the value](./validation/)
-* [How to get the Rich Text Editor value on the controller](./how-to/render-rich-text-editor-for)
+* [How to integrate the third party library](../third-party-integration)
+* [How to validate the value](../validation)
+* [How to get the Rich Text Editor value on the controller](../how-to/render-rich-text-editor-for)
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/read-only-mode.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/read-only-mode.md
similarity index 96%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/read-only-mode.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/read-only-mode.md
index 9468ef3d51..25142fe43d 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/read-only-mode.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/read-only-mode.md
@@ -43,4 +43,4 @@ Please refer to the sample and code snippets below to demonstrate how to enable
 
 ## See Also
 
-[How to Disable and Enable the Rich Text Editor](./disable-editor)
\ No newline at end of file
+[How to Disable and Enable the Rich Text Editor](../disable-editor)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/xhtml-validation.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/xhtml-validation.md
similarity index 100%
rename from ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/xhtml-validation.md
rename to ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/validation-security/xhtml-validation.md
diff --git a/ej2-asp-core-mvc/rich-text-editor/images/image-del.png b/ej2-asp-core-mvc/rich-text-editor/images/image-del.png
index 2be94eed98..043c9e48c1 100644
Binary files a/ej2-asp-core-mvc/rich-text-editor/images/image-del.png and b/ej2-asp-core-mvc/rich-text-editor/images/image-del.png differ
diff --git a/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md b/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md
index cd4cb6d429..7d430f4786 100644
--- a/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md
+++ b/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md
@@ -141,8 +141,9 @@ public async Task Save(IFormFile UploadFiles)
     return Ok();
 }
 ```
+## Saving and returning responses
 
-### Server-side configuration for saving and returning responses
+### Server-side configuration 
 
 The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats.
 
@@ -209,7 +210,7 @@ public IActionResult Save()
 
 ```
 
-### Client-side configuration for saving and returning responses
+### Client-side configuration 
 
 The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats.
 
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index cc8595375a..2743ec9784 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -2309,14 +2309,52 @@
 		
  • RichTextEditor
 		
 		
    • 		
 	
  • Release Notes
-