diff --git a/ej2-angular/rich-text-editor/editor-mode.md b/ej2-angular/rich-text-editor/editor-types/editor-mode.md
similarity index 99%
rename from ej2-angular/rich-text-editor/editor-mode.md
rename to ej2-angular/rich-text-editor/editor-types/editor-mode.md
index 8a79682bb3..33159d2230 100644
--- a/ej2-angular/rich-text-editor/editor-mode.md
+++ b/ej2-angular/rich-text-editor/editor-types/editor-mode.md
@@ -71,7 +71,7 @@ The third-party library such as `Marked` or any other library is used to convert
* The Supported Selection Tags are `Bold`, `Italic`, `StrikeThrough`, `InlineCode`, `SubScript`, `SuperScript`, `UpperCase`, `LowerCase`.
* The supported insert commands are `Image`, `Link` and `Table`.
-For further details on Markdown editing, refer to the [`Markdown`](../rich-text-editor/markdown)
+For further details on Markdown editing, refer to the [`Markdown`](../../markdown-editor/getting-started)
```typescript
diff --git a/ej2-angular/rich-text-editor/iframe.md b/ej2-angular/rich-text-editor/editor-types/iframe.md
similarity index 100%
rename from ej2-angular/rich-text-editor/iframe.md
rename to ej2-angular/rich-text-editor/editor-types/iframe.md
diff --git a/ej2-angular/rich-text-editor/inline-editing.md b/ej2-angular/rich-text-editor/editor-types/inline-editing.md
similarity index 100%
rename from ej2-angular/rich-text-editor/inline-editing.md
rename to ej2-angular/rich-text-editor/editor-types/inline-editing.md
diff --git a/ej2-angular/rich-text-editor/resizable-editor.md b/ej2-angular/rich-text-editor/editor-types/resizable-editor.md
similarity index 97%
rename from ej2-angular/rich-text-editor/resizable-editor.md
rename to ej2-angular/rich-text-editor/editor-types/resizable-editor.md
index 3ffddfb3c1..586124ffa5 100644
--- a/ej2-angular/rich-text-editor/resizable-editor.md
+++ b/ej2-angular/rich-text-editor/editor-types/resizable-editor.md
@@ -62,4 +62,4 @@ For example, add the following to the `app.component.css` file:
## 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/getting-started)
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/audio.md b/ej2-angular/rich-text-editor/insert-image-media/audio.md
similarity index 98%
rename from ej2-angular/rich-text-editor/audio.md
rename to ej2-angular/rich-text-editor/insert-image-media/audio.md
index c470dc246d..24f803daf0 100644
--- a/ej2-angular/rich-text-editor/audio.md
+++ b/ej2-angular/rich-text-editor/insert-image-media/audio.md
@@ -58,7 +58,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.
-
+
## Uploading Audio from Local Machine
@@ -374,7 +374,7 @@ public void SaveFiles(IList UploadFiles)
Once an audio file has been inserted, you can change it using the Rich Text Editor [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/#quicktoolbarsettings) `audioReplace` option. You can replace the audio file using the web URL or the browse option in the audio dialog.
-
+
## Deleting Audios
@@ -382,7 +382,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.
-
+
## Configuring Audio Display Position
diff --git a/ej2-angular/rich-text-editor/file-browser.md b/ej2-angular/rich-text-editor/insert-image-media/file-browser.md
similarity index 100%
rename from ej2-angular/rich-text-editor/file-browser.md
rename to ej2-angular/rich-text-editor/insert-image-media/file-browser.md
diff --git a/ej2-angular/rich-text-editor/insert-images.md b/ej2-angular/rich-text-editor/insert-image-media/insert-images.md
similarity index 84%
rename from ej2-angular/rich-text-editor/insert-images.md
rename to ej2-angular/rich-text-editor/insert-image-media/insert-images.md
index ed27768c5b..0853907b2e 100644
--- a/ej2-angular/rich-text-editor/insert-images.md
+++ b/ej2-angular/rich-text-editor/insert-image-media/insert-images.md
@@ -100,6 +100,92 @@ Configure [insertImageSettings.removeUrl](https://ej2.syncfusion.com/angular/doc
Set the [insertImageSettings.saveFormat](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettingsModel/#saveformat) property to determine whether the image should be saved as Blob or Base64, aligning with your application's requirements.
+```typescript
+
+import { Component } from '@angular/core';
+import { ToolbarService, QuickToolbarService, LinkService, HtmlEditorService, ImageService,} from '@syncfusion/ej2-angular-richtexteditor';
+import { UploadingEventArgs } from '@syncfusion/ej2-angular-inputs';
+
+@Component({
+ selector: 'app-root',
+ template: `
+ `,
+ providers: [ ToolbarService, QuickToolbarService, LinkService, ImageService, HtmlEditorService ],
+})
+
+export class AppComponent {
+ public toolbarSettings: object = {
+ items: ['Image'],
+ };
+ public insertImageSettings: Object = {
+ saveUrl: "[SERVICE_HOSTED_PATH]/api/Home/SaveImage",
+ path: "[SERVICE_HOSTED_PATH]/Uploads/"
+ };
+}
+
+```
+
+```csharp
+
+public class HomeController : Controller
+ {
+ private IHostingEnvironment hostingEnv;
+
+ public HomeController(IHostingEnvironment env)
+ {
+ hostingEnv = env;
+ }
+
+ public IActionResult Index()
+ {
+ return View();
+ }
+
+ [AcceptVerbs("Post")]
+ public void SaveImage(IList UploadFiles)
+ {
+ try
+ {
+ foreach (IFormFile file in UploadFiles)
+ {
+ if (UploadFiles != null)
+ {
+ string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
+ filename = hostingEnv.WebRootPath + "\\Uploads" + $@"\{filename}";
+
+ // Create a new directory, if it does not exists
+ if (!Directory.Exists(hostingEnv.WebRootPath + "\\Uploads"))
+ {
+ Directory.CreateDirectory(hostingEnv.WebRootPath + "\\Uploads");
+ }
+
+ if (!System.IO.File.Exists(filename))
+ {
+ using (FileStream fs = System.IO.File.Create(filename))
+ {
+ file.CopyTo(fs);
+ fs.Flush();
+ }
+ Response.StatusCode = 200;
+ }
+ }
+ }
+ }
+ catch (Exception)
+ {
+ Response.StatusCode = 204;
+ }
+ }
+
+ [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+ public IActionResult Error()
+ {
+ return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+ }
+ }
+
+```
+
### Image Renaming Feature
You can use the [insertImageSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#insertimagesettings) property, to specify the server handler to upload the selected image. Then by binding the [fileUploadSuccess](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fileuploadsuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.
@@ -165,7 +251,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.
-
+
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:
@@ -192,7 +278,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.
-
+
## Adding Captions and Alt Text to Images
@@ -224,13 +310,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.
-
+
## 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.
-
+
## Configuring Allowed Image Types
diff --git a/ej2-angular/rich-text-editor/video.md b/ej2-angular/rich-text-editor/insert-image-media/video.md
similarity index 96%
rename from ej2-angular/rich-text-editor/video.md
rename to ej2-angular/rich-text-editor/insert-image-media/video.md
index bc877a57b7..1c53b61c6d 100644
--- a/ej2-angular/rich-text-editor/video.md
+++ b/ej2-angular/rich-text-editor/insert-image-media/video.md
@@ -59,13 +59,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.
-
+
### 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.
-
+
## Uploading Video from Local Machine
@@ -420,9 +420,9 @@ public void SaveFiles(IList UploadFiles)
Once a video file has been inserted, you can replace it using the Rich Text Editor [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/#quicktoolbarsettings) `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.
-
+
-
+
## Deleting Video
@@ -430,7 +430,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.
-
+
## Adjusting Video Dimensions
@@ -438,7 +438,7 @@ Set the default width, minWidth, height, and minHeight of the video element when
Through the [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/#quicktoolbarsettings), 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.
-
+
## Configuring Video Display Position
@@ -480,7 +480,7 @@ You can disable the resize action by configuring `false` for the [insertVideoSet
> If the [minWidth](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/videoSettings/#minwidth) and [minHeight](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/videoSettings/#minheight) properties are configured, the video resizing does not shrink below the specified values.
-
+
## Customizing the Video Quick Toolbar
@@ -502,6 +502,5 @@ By configuring these options in the [quickToolbarSettings](https://ej2.syncfusio
## See Also
-* [Quick Toolbars in the Toolbar](./toolbar.md/#quick-toolbars)
-* [How to Use the Audio Editing Option in Toolbar Items](./audio)
-* [How to Use the Audio Editing Option in Toolbar Items](./images)
+* [Quick Toolbars in the Toolbar](../toolbar/quick-toolbar)
+* [How to Use the Audio Editing Option in Toolbar Items](./audio)
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/module.md b/ej2-angular/rich-text-editor/module.md
index c17e186004..d781f87fc2 100644
--- a/ej2-angular/rich-text-editor/module.md
+++ b/ej2-angular/rich-text-editor/module.md
@@ -10,20 +10,52 @@ domainurl: ##DomainURL##
# Module in Angular Rich Text Editor component
-To create Rich Text Editor with additional features, inject the required modules. The following modules are used to extend Rich Text Editor’s basic functionality.
-
-* `Toolbar` - Inject this module to use Toolbar feature.
-* `Link` - Inject this module to use link feature in Rich Text Editor.
-* `Image`- Inject this module to use image feature in Rich Text Editor.
-* `Table`- Inject this module to use table feature in Rich Text Editor.
-* `Count` - Inject this module to use character count in Rich Text Editor.
-* `HtmlEditor` - Inject this module to use Rich Text Editor as html editor.
-* `MarkdownEditor`-Inject this module to use Rich Text Editor as markdown editor.
-* `QuickToolbar` - Inject this module to use quick toolbar feature for the target element.
-* `Resize` - Inject this module to use resize feature in Rich Text Editor.
-* `FileManager` - Inject this module to use file browser feature in Rich Text Editor.
-* `PasteCleanup` - Inject this module to use paste cleanup feature in Rich Text Editor.
-* `FormatPainter` - Inject this module to use format painter feature in Rich Text Editor.
-* `EmojiPicker` - Inject this module to use emoji picker feature in Rich Text Editor.
+The Angular Rich Text Editor component follows a modular architecture, enabling users to include or exclude features as needed to ensure optimal performance and customization.
+
+## What is a module in Angular Rich Text Editor?
+
+In the Angular Rich Text Editor, a module refers to a self-contained feature or functionality that can be selectively enabled or disabled. These modules are provided as part of the @syncfusion/ej2-angular-richtexteditor package and can be injected to extend the editor's capabilities.
+
+For example, modules such as `Toolbar`, `Link`, `Image`, `HtmlEditor`, and `QuickToolbar` enable specific tools and behavior in the Rich Text Editor interface.
+
+## How to import and inject modules
+
+To use a module in the Angular Rich Text Editor, you must:
+
+* Import the required module from the Syncfusion package.
+
+* Inject it using the providers array in the @Component decorator.
+
+The following example demonstrates how to import and inject modules.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs1" %}
+
+## Available modules in Rich Text Editor
+
+| Module | Description |
+|------|-------------|
+| `ToolbarService` | Inject this module to enable the toolbar to access text formatting and Rich Text Editor features like bold, italic, font settings, and alignment tools. |
+| `LinkService` | Inject this module to insert, edit, and remove hyperlinks within the content. |
+| `ImageService` | Inject this module to insert and manage images in the Rich Text Editor. |
+| `TableService` | Inject this module for inserting and editing HTML tables in the Rich Text Editor. |
+| `CountService` | Inject this module to enable live character counting capabilities in the Rich Text Editor. |
+| `HtmlEditorService` | Inject this module to support the HTML source editing view, allowing users to switch between preview and source code modes. |
+| `MarkdownEditorService` | Inject this module to enable editing support, allowing users to write and preview content using standard Markdown syntax |
+| `QuickToolbarService` | Inject this module to displays a floating toolbar near selected content like images or links for quick actions. |
+| `ResizeService` | Injecting this module enables users to resize the height and width of the editor area interactively using a resizable handle in the Rich Text Editor. |
+| `FileManagerService` | Injecting this module provides users with a dialog interface to browse, upload, and insert files (especially images) from a server or cloud storage provider directly into the Rich Text Editor. |
+| `PasteCleanupService` | Inject this module to keep or clean up the formatting of pasted content in Rich Text Editor. |
+| `FormatPainterService` | Injecting this module allows users to copy formatting (like bold, italic, font size, color, etc.) from one section of text and apply it to another in the Rich Text Editor. |
+| `EmojiPickerService` | Injecting this module allows users to search, and insert emojis into the Rich Text Editor. |
These modules should be injected into the **providers** section of root **NgModule** or component class.
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/emoji-picker.md b/ej2-angular/rich-text-editor/smart-editing/emoji-picker.md
similarity index 98%
rename from ej2-angular/rich-text-editor/emoji-picker.md
rename to ej2-angular/rich-text-editor/smart-editing/emoji-picker.md
index 20b38cc8d5..88e24d89d9 100644
--- a/ej2-angular/rich-text-editor/emoji-picker.md
+++ b/ej2-angular/rich-text-editor/smart-editing/emoji-picker.md
@@ -135,7 +135,7 @@ The following code example shows how to add the emoji picker tool in the Rich Te
Quickly access the emoji picker by pressing the colon (:) key while typing a word prefix in an editor, allowing instant emoji selection and display. Moreover, continue typing in the editor after the colon (:) to filter and refine your search for the desired emojis.
-
+
## Navigating and Selecting Emojis Using the Keyboard
diff --git a/ej2-angular/rich-text-editor/mentions.md b/ej2-angular/rich-text-editor/smart-editing/mentions.md
similarity index 100%
rename from ej2-angular/rich-text-editor/mentions.md
rename to ej2-angular/rich-text-editor/smart-editing/mentions.md
diff --git a/ej2-angular/rich-text-editor/slash-menu.md b/ej2-angular/rich-text-editor/smart-editing/slash-menu.md
similarity index 100%
rename from ej2-angular/rich-text-editor/slash-menu.md
rename to ej2-angular/rich-text-editor/smart-editing/slash-menu.md
diff --git a/ej2-angular/rich-text-editor/toolbar/quick-toolbar.md b/ej2-angular/rich-text-editor/toolbar/quick-toolbar.md
new file mode 100644
index 0000000000..1419c37258
--- /dev/null
+++ b/ej2-angular/rich-text-editor/toolbar/quick-toolbar.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: Quick toolbars in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Quick toolbars in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Quick toolbars
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Quick Toolbars in Angular Rich Text Editor component
+
+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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#quickToolbarSettings) property.
+
+> To use quick toolbar feature, configure `QuickToolbarService` in the `@NgModule.providers section`.
+
+## Image quick toolbar
+
+You can customize the quick toolbar options for images using the `image` property within the [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/). 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/) property, you can enhance the editor’s functionality, ensuring a user-friendly experience for efficiently handling image elements.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/customize-image-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/customize-image-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/customize-image-cs1" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#link) property.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs17/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs17/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs17" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#quickToolbarSettings) property.
+
+The following sample demonstrates the customiztion of table quick toolbar.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs32/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs32/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs32" %}
+
+## Audio quick toolbar
+
+Customize the quick toolbar items for audio elements using the `audio` property in the [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#audio) property, you can enhance the editor’s capabilities, ensuring a user-friendly experience for handling audio elements efficiently.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/customize-audio-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/customize-audio-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/customize-audio-cs1" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#video) property, you enhance the editor’s capabilities, ensuring a user-friendly experience for editing and customizing video elements effortlessly.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/customize-video-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/customize-video-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/customize-video-cs1" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettingsModel/#text). Any toolbar items available in the Rich Text Editor can be configured for the text quick toolbar. The example below demonstrates its customization.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/quick-format-toolbar-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/quick-format-toolbar-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/quick-format-toolbar-cs1" %}
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/toolbar/toolbar-types.md b/ej2-angular/rich-text-editor/toolbar/toolbar-types.md
new file mode 100644
index 0000000000..5dab51faed
--- /dev/null
+++ b/ej2-angular/rich-text-editor/toolbar/toolbar-types.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: Toolbar in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Toolbar in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Toolbar
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Toolbar in Angular Rich Text Editor component
+
+The Syncfusion Angular 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 use toolbar feature, configure `ToolbarService` in the provider section.
+
+To get start quickly about customizing the toolbar in Angular Rich Text Editor component, refer to the video below.
+
+{% youtube "https://www.youtube.com/watch?v=zQtXvvPxAJQ" %}
+
+The Rich Text Editor allows you to configure different types of toolbar using [`type`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#type) field in [`toolbarSettings`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#type) with `type: 'Expand'`. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/expand-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/expand-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/toolbar/expand-cs1" %}
+
+## Configuring a multi-row toolbar
+
+Setting the `type` as `MultiRow` in [`toolbarSettings`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#type) will arrange the toolbar items across multiple rows, displaying all configured toolbar items.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/multirow-cs3/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/multirow-cs3/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/toolbar/multirow-cs3" %}
+
+## Implementing a scrollable toolbar
+
+Setting the `type` to `Scrollable` in [toolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#type) will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/scrollable-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/toolbar/scrollable-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/toolbar/scrollable-cs1" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#floatingtoolbaroffset) to adjust its offset from the top of the document.
+
+Additionally, you can enable or disable the floating toolbar using the [`enableFloating`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#enablefloating) property.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/floating-toolbar-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/floating-toolbar-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/floating-toolbar-cs1" %}
+
+## See also
+
+* [Customizing Rich Text Editor Toolbar Styles](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/style#customizing-the-rich-text-editors-toolbar)
+* [Implementing Inline Editing](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/inline-mode)
+* [Customizing Accessibility Shortcut Keys](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/accessibility#keyboard-interaction)
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/tools/built-in-tools.md b/ej2-angular/rich-text-editor/tools/built-in-tools.md
new file mode 100644
index 0000000000..d6e47cf1ec
--- /dev/null
+++ b/ej2-angular/rich-text-editor/tools/built-in-tools.md
@@ -0,0 +1,196 @@
+---
+layout: post
+title: Built-in Tools in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Built-in Tools in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Built-in Tools
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Built-in Tools in Angular Rich Text Editor Component
+
+By default, the Angular 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 |  | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} |
+| Italic |  | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} |
+| Underline |  | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} |
+| StrikeThrough |  | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}|
+| ClearFormat |  | 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 |  | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}|
+| SubScript |  | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}|
+| SuperScript |  | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}|
+| LowerCase |  | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase |  | 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 |  | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}|
+| FontSize |  | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}|
+| FontColor |  | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}|
+| BackgroundColor |  | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}|
+| Formats (Paragraph, Headings) |  | 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 |  | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}|
+| JustifyLeft |  | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} |
+| JustifyCenter |  | 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 |  | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} |
+| JustifyFull |  | 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 |  | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}|
+| UnorderedList |  | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}|
+| NumberFormatList |  | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}|
+| BulletFormatList |  | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}|
+| Indent |  | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}|
+| Outdent |  | 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 |  | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}|
+| InsertLink |  |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 |  | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} |
+| EditLink |  | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} |
+| RemoveLink |  | 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 |  | 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 the selected image with another image. | quickToolbarSettings: { image: ['Replace']} |
+| Align Image |  | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} |
+| Remove Image |  | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} |
+| OpenImageLink |  | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} |
+| EditImageLink |  | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} |
+| RemoveImageLink |  | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} |
+| Display |  | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} |
+| AltText |  | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} |
+| Dimension |  | 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 |  | 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 |  | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} |
+| TableHeader |  | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} |
+| TableColumns |  | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} |
+| TableRows |  | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} |
+| TableCellHorizontalAlign |  | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} |
+| TableCellVerticalAlign |  | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} |
+| TableEditProperties |  | 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 |  | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} |
+| Redo |  | 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 |  | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}|
+| Maximize |  | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} |
+| Minimize |  | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} |
+| Preview |  | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} |
+| InsertCode |  | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} |
+| Print |  | Allows to print the editor content. |toolbarSettings: { items: ['Print']}|
+| ClearAll |  | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} |
+| SourceCode |  | 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.items](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#items) property.
+
+```typescript
+
+import { Component, AfterViewInit } from '@angular/core';
+import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
+import { ToolbarService, LinkService, ImageService, HtmlEditorService, TableService } from '@syncfusion/ej2-angular-richtexteditor';
+
+@Component({
+ imports: [RichTextEditorModule],
+ standalone: true,
+ selector: 'app-root',
+ template: `
+ `,
+ providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService]
+})
+export class AppComponent implements AfterViewInit {
+
+ public value: string = "
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:
Provides <IFRAME> and <DIV> modes
Capable of handling markdown editing.
Contains a modular library to load the necessary functionality on demand.
Provides a fully customizable toolbar.
Provides HTML view to edit the source directly for developers.
Supports third-party library integration.
Allows preview of modified content before saving it.
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
Contains undo/redo manager.
Creates bulleted and numbered lists.
";
+
+ public tools: object = {
+ items: [ 'Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', '|', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor'
+ ],
+ };
+}
+
+```
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/tools/custom-tools.md b/ej2-angular/rich-text-editor/tools/custom-tools.md
new file mode 100644
index 0000000000..04ce9eb681
--- /dev/null
+++ b/ej2-angular/rich-text-editor/tools/custom-tools.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Custom Toolbar in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Custom Toolbar in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Custom Toolbar
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom Toolbar Items in Angular Rich Text Editor Component
+
+The Rich Text Editor allows you to configure your own commands to its toolbar using the [`toolbarSettings`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#items) field of the toolbarSettings property.
+
+To get start quickly with Custom tool configuration in Angular Rich Text Editor component, refer to the video below.
+
+{% youtube "https://www.youtube.com/watch?v=zQtXvvPxAJQ" %}
+
+The Rich Text Editor provides options to customize tool functionalities. Use the [`undo`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarStatusEventArgs/) property to enable or disable the undo function for specific tools. Additionally, the [`click`](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarClickEventArgs/) 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs30/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs30/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs30" %}
+
+> When rendering any component 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 component rendered in the custom toolbar.
+
+## Enabling and disabling toolbar items
+
+You can use the [`enableToolbarItem`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#enabletoolbaritem) and [`disableToolbarItem`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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 quicktoolbar operations.
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/tools/styling-tools.md b/ej2-angular/rich-text-editor/tools/styling-tools.md
new file mode 100644
index 0000000000..0fb99ac025
--- /dev/null
+++ b/ej2-angular/rich-text-editor/tools/styling-tools.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Styling tools in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Styling tools in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Styling tools
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Styling Tools in Angular Rich Text Editor Component
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#items) property.
+
+```typescript
+
+import { Component } from '@angular/core';
+import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
+
+@Component({
+ selector: 'app-root',
+ template: ``,
+ providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
+})
+export class AppComponent {
+ public tools: object = {
+ items: ['FontName']
+ }
+}
+
+```
+The Rich Text Editor comes with a pre-configured set of [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontfamily) property. This allows you to extend the available font options beyond the default selection.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs25/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs25/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs25" %}
+
+### 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontfamily) property.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/how-to/cursor-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/how-to/cursor-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/how-to/cursor-cs1" %}
+
+The below font style links are referred in the page.
+
+```typescript
+
+
+
+
+```
+
+> In the above sample, you can see that you 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#items) property.
+
+```typescript
+
+import { Component } from '@angular/core';
+import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
+
+@Component({
+ selector: 'app-root',
+ template: ``,
+ providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
+})
+export class AppComponent {
+ public tools: object = {
+ items: ['FontSize']
+ }
+}
+
+```
+The Rich Text Editor includes a default set of [`fontSize`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontsize) property. This allows you to extend the available font options beyond the default selection.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs33/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs33/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs33" %}
+
+## Font and background color
+
+You can add the `FontColor` and `BackgroundColor` tool in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#items) property.
+
+```typescript
+
+import { Component } from '@angular/core';
+import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
+
+@Component({
+ selector: 'app-root',
+ template: ``,
+ providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
+})
+export class AppComponent {
+ public tools: object = {
+ items: ['FontColor', 'BackgroundColor']
+ }
+}
+
+```
+
+### 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/backgroundColor/#colorcode) field of the [`fontColor`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontcolor) and [`backgroundColor`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/fontColorModel/#modeswitcher) feature.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs26/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/getting-started-cs26/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/getting-started-cs26" %}
\ No newline at end of file
diff --git a/ej2-angular/rich-text-editor/tools/text-formatting.md b/ej2-angular/rich-text-editor/tools/text-formatting.md
new file mode 100644
index 0000000000..b6ee19edda
--- /dev/null
+++ b/ej2-angular/rich-text-editor/tools/text-formatting.md
@@ -0,0 +1,474 @@
+---
+layout: post
+title: Text formatting and Structure in Angular Rich Text Editor component | Syncfusion
+description: Learn here all about Text formatting and Structure in Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Text formatting and Structure
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text Formatting and Structure in the Angular Rich Text Editor Component
+
+## 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 |  | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `bold` |
+| Italic |  | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` |
+| Underline |  | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
+| StrikeThrough |  | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
+| InlineCode | | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `inline code`|
+| SubScript |  | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
+| SuperScript |  | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
+| LowerCase |  | Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase |  | 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/basic-text-styling-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/basic-text-styling-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/basic-text-styling-cs1" %}
+
+## 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/text-alignments-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/text-alignments-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/text-alignments-cs1" %}
+
+## 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 component 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#numberformatlist) property of the Rich Text Editor.
+
+The following example demonstrates how to customize the number format lists in the Rich Text Editor:
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/format-lists-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/format-lists-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/format-lists-cs1" %}
+
+### 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:
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/format-lists-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/format-lists-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/format-lists-cs1" %}
+
+## 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/indent-and-outdent-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/indent-and-outdent-cs1" %}
+
+### 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 Angular Rich Text Editor component 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/headings-cs2/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/headings-cs2/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/headings-cs2" %}
+
+### 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/headings-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/headings-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/headings-cs1" %}
+
+## 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/quotation-formatting-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/quotation-formatting-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/quotation-formatting-cs1" %}
+
+> In a markdown editor, blockquotes are represented using the `>` symbol.
+
+## Insert code
+
+The Angular Rich Text Editor component 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/code-format-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/code-format-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/code-format-cs1" %}
+
+### 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/formatPainterSettings/) property.
+
+### Configuring format painter tool in the toolbar
+
+You can add the `FormatPainter` tool in the Rich Text Editor using the `toolbarSettings` [items](../api/rich-text-editor/toolbarSettings/#items) property.
+
+>To use the Format Painter feature, we need to import and configure the `FormatPainterService` in the provider section.
+
+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 ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/format-painter-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/format-painter-cs1" %}
+
+### Customizing copy and paste format
+
+You can customize the format painter tool in the Rich Text Editor using the [`formatPainterSettings`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/formatPainterSettings/) property.
+
+The [allowedFormats](../api/rich-text-editor/formatPainterSettings/#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](../api/rich-text-editor/formatPainterSettings/#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 ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/format-painter-cs2/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/format-painter-cs2" %}
+
+### Shortcut keys for copy and paste format
+
+For more details on keyboard navigation, refer to the [Keyboard support](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/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 Angular 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://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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:
+
+```typescript
+
+@Component({
+ selector: 'app-root',
+ template: ``
+})
+export class AppComponent {
+ public tools: object = {
+ items:
+ [
+ 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'ClearFormat',
+ '|', 'Undo', 'Redo'
+ ]
+ };
+}
+
+```
+
+### 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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/rich-text-editor/remove-format-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/rich-text-editor/remove-format-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/rich-text-editor/remove-format-cs1" %}
diff --git a/ej2-angular/rich-text-editor/form-validation.md b/ej2-angular/rich-text-editor/validation-security/form-validation.md
similarity index 100%
rename from ej2-angular/rich-text-editor/form-validation.md
rename to ej2-angular/rich-text-editor/validation-security/form-validation.md
diff --git a/ej2-angular/rich-text-editor/read-only-mode.md b/ej2-angular/rich-text-editor/validation-security/read-only-mode.md
similarity index 95%
rename from ej2-angular/rich-text-editor/read-only-mode.md
rename to ej2-angular/rich-text-editor/validation-security/read-only-mode.md
index 294e6a330a..75b35efa34 100644
--- a/ej2-angular/rich-text-editor/read-only-mode.md
+++ b/ej2-angular/rich-text-editor/validation-security/read-only-mode.md
@@ -32,4 +32,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-angular/rich-text-editor/xhtml-validation.md b/ej2-angular/rich-text-editor/validation-security/xhtml-validation.md
similarity index 100%
rename from ej2-angular/rich-text-editor/xhtml-validation.md
rename to ej2-angular/rich-text-editor/validation-security/xhtml-validation.md