(args.ToString());
+ if (param.Action == "fetchFieldMembers")
+ {
+ return await GetMembers(param);
+ }
+ else if (param.Action == "fetchRawData")
+ {
+ return await GetRawData(param);
+ }
+ else if (param.Action == "onExcelExport" || param.Action == "onCsvExport" ||
+ param.Action == "onPivotExcelExport" || param.Action == "onPivotCsvExport")
+ {
+ EngineProperties engine = await GetEngine(param);
+ if (param.InternalProperties.EnableVirtualization && param.ExportAllPages)
+ {
+ engine = await PivotEngine.PerformAction(engine, param);
+ }
+ if (param.Action == "onExcelExport")
+ {
+ return excelExport.ExportToExcel("Excel", engine, null, param.ExcelExportProperties);
+ }
+ else if (param.Action == "onPivotExcelExport" || param.Action == "onPivotCsvExport")
+ {
+ return pivotExport.ExportAsPivot(param.Action == "onPivotExcelExport" ? ExportType.Excel : ExportType.CSV, engine, param);
+ }
+ else
+ {
+ return excelExport.ExportToExcel("CSV", engine, null, param.ExcelExportProperties);
+ }
+ }
+ else
+ {
+ return await GetPivotValues(param);
+ }
+ }
+```
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/sorting.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/sorting.md
index dcfd947ace..8f465545e3 100644
--- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/sorting.md
+++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/sorting.md
@@ -19,11 +19,11 @@ Member sorting can be enabled by setting the [`enableSorting`](https://help.sync
N> By default the [`enableSorting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html#Syncfusion_EJ2_PivotView_PivotViewDataSourceSettings_EnableSorting) property in [`e-datasourcesettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html) tag set as **true**. If we set it as **false**, then the field members arrange in pivot table as its data source order. And, the sort icons in grouping bar and field list buttons will be removed.
-
+
-
+
-
+
Member sorting can also be configured using the [`e-sortsettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewSortSetting.html) tag through code behind, during initial rendering. The settings required to sort are:
@@ -122,7 +122,7 @@ Allows to sort field headers (aka, members) in rows and columns based on user-de
-
+
## Value Sorting
@@ -135,7 +135,7 @@ The value sorting can also be configured using the [`e-valuesortsettings`](https
* [`headerDelimiter`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels.
* [`sortOrder`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_SortOrder): It allows to set the sort direction of the value field.
-N> Value fields are set to the column axis by default. In such cases, the value sorting applied will have an effect on the column alone. You need to place the value fields in the row axis to do so in row wise. For more information, [`refer here`](https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/data-binding/#values-in-row-axis).
+N> Value fields are set to the column axis by default. In such cases, the value sorting applied will have an effect on the column alone. You need to place the value fields in the row axis to do so in row wise. For more information, [`refer here`](https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/data-binding#values-in-row-axis).
{% if page.publishingplatform == "aspnet-core" %}
@@ -164,6 +164,43 @@ N> Value fields are set to the column axis by default. In such cases, the value
+### Multiple Axis Sorting
+
+You can apply value sorting to both row and column axes simultaneously for more dynamic and precise data analysis. The following settings are used to configure sorting:
+
+* [`columnHeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_ColumnHeaderText): Specifies the column header hierarchy for value sorting. Header levels are defined from Level 1 to N using a delimiter for clarity.
+* [`headerDelimiter`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels.
+* [`columnSortOrder`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_ColumnSortOrder): Determines the sorting direction for the specified column header.
+* [`rowHeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_RowHeaderText): Defines the specific row header for which the value sorting should be applied.
+* [`rowSortOrder`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewValueSortSettings.html#Syncfusion_EJ2_PivotView_PivotViewValueSortSettings_RowSortOrder): Determines the sorting direction for the specified row header.
+
+N> This feature is applicable only to relational data sources.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/pivot-table/multiple-axis-sorting/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="MultipleAxisSorting.cs" %}
+{% include code-snippet/pivot-table/multiple-axis-sorting/MultipleAxisSorting.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/pivot-table/multiple-axis-sorting/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="MultipleAxisSorting.cs" %}
+{% include code-snippet/pivot-table/multiple-axis-sorting/MultipleAxisSorting.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
## Event
### OnHeadersSort
@@ -205,7 +242,7 @@ The event [`OnHeadersSort`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfu
-
+
### ActionBegin
@@ -218,8 +255,8 @@ The event [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusi
| Action | Action Name|
|------|-------------|
-| [`Sort field`](./sorting/#member-sorting)| Sort field |
-| [`Value sort icon`](./sorting/#value-sorting)| Sort value|
+| [`Sort field`](./sorting#member-sorting)| Sort field |
+| [`Value sort icon`](./sorting#value-sorting)| Sort value|
* `fieldInfo`: It holds the selected field information.
@@ -264,8 +301,8 @@ The event [`actionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncf
| Action | Action Name|
|------|-------------|
-| [`Sort field`](./sorting/#member-sorting)| Field sorted|
-| [`Value sort icon`](./sorting/#value-sorting)| Value sorted|
+| [`Sort field`](./sorting#member-sorting)| Field sorted|
+| [`Value sort icon`](./sorting#value-sorting)| Value sorted|
* `fieldInfo`: It holds the selected field information.
@@ -306,8 +343,8 @@ The event [`actionFailure`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfu
| Action | Action Name|
|------|-------------|
-| [`Sort field`](./sorting/#member-sorting)| Sort field |
-| [`Value sort icon`](./sorting/#value-sorting)| Sort value|
+| [`Sort field`](./sorting#member-sorting)| Sort field |
+| [`Value sort icon`](./sorting#value-sorting)| Sort value|
* `errorInfo`: It holds the error information of the current UI action.
diff --git a/ej2-asp-core-mvc/pivot-table/images/add-header-and-footer-while-exporting.png b/ej2-asp-core-mvc/pivot-table/images/add-header-and-footer-while-exporting.png
new file mode 100644
index 0000000000..956aeedcf4
Binary files /dev/null and b/ej2-asp-core-mvc/pivot-table/images/add-header-and-footer-while-exporting.png differ
diff --git a/ej2-asp-core-mvc/pivot-table/images/cell_template.png b/ej2-asp-core-mvc/pivot-table/images/cell_template.png
index 69f50561ef..e25db32500 100644
Binary files a/ej2-asp-core-mvc/pivot-table/images/cell_template.png and b/ej2-asp-core-mvc/pivot-table/images/cell_template.png differ
diff --git a/ej2-asp-core-mvc/pivot-table/images/csv-export-with-server-side-pivot-engine.png b/ej2-asp-core-mvc/pivot-table/images/csv-export-with-server-side-pivot-engine.png
new file mode 100644
index 0000000000..946f01db25
Binary files /dev/null and b/ej2-asp-core-mvc/pivot-table/images/csv-export-with-server-side-pivot-engine.png differ
diff --git a/ej2-asp-core-mvc/pivot-table/images/excel-export-with-server-side-pivot-engine.png b/ej2-asp-core-mvc/pivot-table/images/excel-export-with-server-side-pivot-engine.png
new file mode 100644
index 0000000000..df2df37e0c
Binary files /dev/null and b/ej2-asp-core-mvc/pivot-table/images/excel-export-with-server-side-pivot-engine.png differ
diff --git a/ej2-asp-core-mvc/pivot-table/images/export-as-pivot.png b/ej2-asp-core-mvc/pivot-table/images/export-as-pivot.png
new file mode 100644
index 0000000000..d2d3292587
Binary files /dev/null and b/ej2-asp-core-mvc/pivot-table/images/export-as-pivot.png differ
diff --git a/ej2-asp-core-mvc/pivot-table/images/multiple-axis-sorting.png b/ej2-asp-core-mvc/pivot-table/images/multiple-axis-sorting.png
new file mode 100644
index 0000000000..7df1266798
Binary files /dev/null and b/ej2-asp-core-mvc/pivot-table/images/multiple-axis-sorting.png differ
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/code-block.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/code-block.md
new file mode 100644
index 0000000000..d2d1116267
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/code-block.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Code Block in ##Platform_Name## Rich Text Editor Component | Syncfusion
+description: Learn here all about Code Block in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Code Block
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Code Block in ##Platform_Name## Rich Text Editor control
+
+The Code Block feature in the Rich Text Editor, enabling users to insert and format code snippets effectively. It covers configuring supported languages, integrating syntax highlighters, editing tips, and enabling tab-based indentation, making it ideal for technical documentation, tutorials, and code-heavy content. While live code block highlighting is not supported during editing, syntax highlighting can be applied when content is displayed on the frontend.
+
+## Inserting a code block
+
+The Code Block feature allows users to embed formatted code snippets within the Rich Text Editor. To insert a code block:
+
+- **Using the Toolbar**: Click the **CodeBlock** button in the editor’s toolbar, typically represented by a code icon.
+- **Using the Shortcut**: Press `Ctrl+Shift+B` (or `Cmd+Shift+B` on macOS) to insert a code block at the cursor’s position.
+- A dropdown menu appears, allowing selection of the programming language for the code block, such as **JavaScript**, **Python**, **HTML**, or others configured in the system.
+
+The code block is rendered with a monospaced font and preserved indentation for readability. Language selection applies syntax-specific formatting and prepares the block for syntax highlighting when displayed on the frontend.
+
+## Configuring code block languages
+
+The Code Block feature supports customizable programming languages via the `CodeBlockSettings` property, specifically the `Languages` and `DefaultLanguage` options. The `Languages` property accepts an array of objects defining available languages, while `DefaultLanguage` sets the default language for new code blocks. This allows developers to customize the editor for project-specific languages.
+
+Below is an example of how to configure the `CodeBlockSettings` using the Rich Text Editor:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-block/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-block/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-block/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-block/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+In this example:
+
+* The **Languages** array defines four supported languages: JavaScript, Python, HTML, and CSS.
+* The **DefaultLanguage** is set to **javascript**, so new code blocks default to JavaScript.
+* Each language object specifies a **language** (for internal use, e.g., syntax highlighting) and a **label** (displayed in the dropdown).
+
+## Integrating syntax highlighters
+
+To enhance code block readability, integrate a third-party syntax highlighter like [Prism.js](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/), which supports numerous languages and customizable themes. Although live code block highlighting (real-time syntax highlighting during editing) is not possible in the Rich Text Editor, The highlighter can apply color-coded formatting to code blocks when the content is displayed on the frontend, such as in blog posts, website content, or preview mode. This ensures a polished presentation for end users.
+
+## Tips for editing around code blocks
+
+Editing content around code blocks requires care to preserve code integrity and maintain clean formatting. Follow these tips for a smooth editing experience:
+* **Inserting Text Before a Code Block**: Place the cursor at the start of the code block’s first line and press `Enter` to create an empty line above. Press Enter again to start a new paragraph for text.
+* **Inserting Text After a Code Block**: Place the cursor at the end of the code block’s last line and press `Enter` three times to exit the code block and create a new paragraph below.
+* **Preserving Formatting When Pasting**: Paste code into a code block using `Ctrl+Shift+V` (or `Cmd+Shift+V` on macOS) to avoid external formatting (e.g., fonts or colors) and maintain the monospaced style.
+* **Changing Languages**: When switching the language of a code block via the dropdown, verify that the code aligns with the new language for accurate syntax highlighting in the rendered output.
+* **Previewing Content**: Since live syntax highlighting is not available during editing, use the editor’s preview mode to verify how code blocks render with syntax highlighting before publishing.
+
+## Enabling tab-based line indentation in code blocks
+
+The Code Block feature supports tab-based indentation to align code properly, crucial for languages like Python where indentation is syntactically significant. The Rich Text Editor does not provide a specific property to configure the indentation character, but indentation can be enabled using the editor’s default behavior for the Tab key, toolbar commands, or custom event handling.
+
+To enable tab-based indentation:
+
+* **Using the Tab Key**: Pressing `Tab` within a code block typically inserts a tab character (\t) or spaces (usually four, depending on the editor’s default configuration). Use `Shift+Tab` to outdent selected lines.
+* **Toolbar Commands**: Include the `Indent` and `Outdent` buttons in the toolbar to increase or decrease indentation.
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md
index 153c4273c0..7088669cd0 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md
@@ -141,23 +141,20 @@ Refer `rename.cs` controller file for configure the server-side.
{% endtabs %}
{% endif %}
+### Uploading Audio with Authentication
-### Restricting Audio by Size
-
-You can restrict the audio uploaded from the local machine when the uploaded audio file size is greater than the allowed size by using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
-
-> The file size in the argument will be returned in `bytes`.
+You can add additional data with the audio uploaded from the Rich Text Editor on the client side, which can even be received on the server side by using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
-In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
+N> By default, it doesn't support the `UseDefaultCredentials` property; we need to manually append the default credentials with the upload request.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-audio-size/tagHelper %}
+{% include code-snippet/rich-text-editor/audio-authenticate/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
+{% include code-snippet/rich-text-editor/audio-authenticate/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -165,28 +162,28 @@ In the following illustration, the audio size has been validated before uploadin
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-audio-size/razor %}
+{% include code-snippet/rich-text-editor/audio-authenticate/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
+{% highlight c# tabtitle="SaveFile.cs" %}
+{% include code-snippet/rich-text-editor/audio-authenticate/saveFile.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
-### Uploading Audio with Authentication
+## Maximum file size restriction
-You can add additional data with the audio uploaded from the Rich Text Editor on the client side, which can even be received on the server side by using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can restrict the audio uploaded from the local machine when the uploaded audio file size is greater than the allowed size by using the [InsertAudioSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorAudioSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorAudioSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes.
-N> By default, it doesn't support the `UseDefaultCredentials` property; we need to manually append the default credentials with the upload request.
+In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/tagHelper %}
+{% include code-snippet/rich-text-editor/check-audio-size/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/controller.cs %}
+{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -194,10 +191,10 @@ N> By default, it doesn't support the `UseDefaultCredentials` property; we need
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/razor %}
+{% include code-snippet/rich-text-editor/check-audio-size/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="SaveFile.cs" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/saveFile.cs %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md
index c2b6a8ee9e..d35d4fe5b7 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md
@@ -109,17 +109,13 @@ N> The runnable demo application is available in this [Github](https://github.co
### Image Renaming Feature
-You can use the [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property, to specify the server handler to upload the selected image. Then by binding the [FileUploadSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploadSuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.
+You can use the [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property, to specify the server handler to upload the selected image. Then by binding the [ImageUploadSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ImageUploadSuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.
-### Size-based Image Restrictions
-
-You can restrict the image uploaded from the local machine when the uploaded image file size is greater than the allowed size by using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
-
-> The file size in the argument will be returned in `bytes`.
+Refer the section [Rename images before inserting it in Rich Text Editor](https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/how-to/rename-images-in-server) for code snippets and examples.
### Secure Image Upload with Authentication
-You can add additional data with the image uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `CustomFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can add additional data with the image uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [ImageUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ImageUploading) event and its `CustomFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
@@ -146,6 +142,36 @@ You can add additional data with the image uploaded from the Rich Text Editor on
{% endtabs %}
{% endif %}
+## Maximum file size restriction
+
+You can restrict the image uploaded from the local machine when the uploaded image file size is greater than the allowed size by using the [InsertImageSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes. You can configure this size as follows.
+
+In the following example, the image size has been validated before uploading and determined whether the image has been uploaded or not.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/check-image-size/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-image-size/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/check-image-size/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-image-size/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
## Image Replacement Functionality
Once a image file has been inserted, you can replace it using the Rich Text Editor [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings) `ImageReplace` option. You can replace the image file either by using the web URL or the browse option in the image dialog.
@@ -190,7 +216,7 @@ The following sample explains, how to configure `RemoveUrl` to remove a saved im
## Adjusting Image Dimensions
-Sets the default width and height of the image when it is inserted in the Rich Text Editor using [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Width) and [Height](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Height) of the [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_) property.
+Sets the default width and height of the image when it is inserted in the Rich Text Editor using [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Width) and [Height](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Height) of the [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property.
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.
@@ -209,7 +235,7 @@ By clicking the Image Caption, the image will get wrapped in an image element wi
## Configuring Image Display Position
-Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_). It has two possible options: 'inline' and 'block'.
+Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings). It has two possible options: 'inline' and 'block'.
{% if page.publishingplatform == "aspnet-core" %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md
index c38319e1de..2294ef8cb9 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md
@@ -146,22 +146,20 @@ Refer `rename.cs` controller file for configure the server-side.
{% endtabs %}
{% endif %}
-### Restricting Video by Size
-
-You can restrict the video uploaded from the local machine when the uploaded video file size is greater than the allowed size by using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
+### Uploading Video with Authentication
-> The file size in the argument will be returned in `bytes`.
+You can add additional data with the video uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `CustomFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
-In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
+N> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-video-size/tagHelper %}
+{% include code-snippet/rich-text-editor/video-authenticate/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
+{% include code-snippet/rich-text-editor/video-authenticate/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -169,29 +167,28 @@ In the following example, the video size has been validated before uploading and
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-video-size/razor %}
+{% include code-snippet/rich-text-editor/video-authenticate/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
+{% highlight c# tabtitle="SaveFile.cs" %}
+{% include code-snippet/rich-text-editor/video-authenticate/saveFile.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
+## Maximum file size restrictions
-### Uploading Video with Authentication
-
-You can add additional data with the video uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [FileUploading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `CustomFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can restrict the video uploaded from the local machine when the uploaded video file size is greater than the allowed size by using the [InsertVideoSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes. You can configure this size as follows.
-N> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
+In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/video-authenticate/tagHelper %}
+{% include code-snippet/rich-text-editor/check-video-size/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/video-authenticate/controller.cs %}
+{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -199,10 +196,10 @@ N> By default, it doesn't support the `UseDefaultCredentials` property, you can
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/video-authenticate/razor %}
+{% include code-snippet/rich-text-editor/check-video-size/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="SaveFile.cs" %}
-{% include code-snippet/rich-text-editor/video-authenticate/saveFile.cs %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-position.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-position.md
new file mode 100644
index 0000000000..6d1d89aab6
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-position.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: Toolbar position in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Toolbar position in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Toolbar position
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Toolbar position in the ##Platform_Name## Rich Text Editor Control
+
+The Rich Text Editor allows you to configure the toolbar's position using the [position](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Position) field in the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The available positions are:
+
+1. Top
+2. Bottom
+
+## Configuring the toolbar position
+
+The Rich Text Editor allows you to position the toolbar at the top or bottom of the content area, depending on your layout requirements.
+
+By default, the toolbar is displayed at the top of the editor, making all formatting and editing tools immediately accessible above the content.
+
+To position the toolbar at the bottom, use the [position](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Position) property in the [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) configuration and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/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/toolbar/toolbar-types.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-types.md
index 55eda1045c..8f19e9a27b 100644
--- 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
@@ -21,6 +21,7 @@ The Rich Text Editor allows you to configure different types of toolbar using [t
1. Expand
2. MultiRow
3. Scrollable
+4. Popup
## Expanding the toolbar
@@ -101,6 +102,33 @@ Setting the `type` to `Scrollable` in [toolbarSettings](https://help.syncfusion.
{% endtabs %}
{% endif %}
+## Configuring a popup toolbar
+
+Setting the `type` to `Popup` in [toolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display overflowing toolbar items into a popup container, optimizing the toolbar layout for limited space and smaller screens.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/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.
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
index 282bcdf4a3..96da99a47c 100644
--- 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
@@ -141,6 +141,14 @@ The table quicktoolbar provides options for table editing within the Rich Text E
| 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']} |
+### Horizontal Line
+
+Horizontal lines visually separate sections of content in the editor, enhancing readability and layout clarity.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Horizontal Line |  | Allows you to insert horizontal line.|toolbarSettings: { items: ['HorizontalLine']} |
+
### Undo & redo
These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions.
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
index 38f99322c1..010fce463d 100644
--- 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
@@ -232,3 +232,32 @@ Both the `FontColor` and `BackgroundColor` properties offer two modes: `Picker`
{% endhighlight %}
{% endtabs %}
{% endif %}
+
+### Show recent color
+
+The [ShowRecentColors](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ShowRecentColors) feature in the Rich Text Editor allows users to quickly access a row of recently used colors displayed below the main palette. This helps streamline the editing process by making frequently used colors readily available, improving efficiency and consistency in styling.
+
+This feature can be enabled separately for the [RichTextEditorFontColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html) and [RichTextEditorBackgroundColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBackgroundColor.html) tools, giving users flexibility based on their formatting needs. It's especially useful when working with recurring color themes, as it eliminates the need to manually search through the full color palette each time.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/show-recent-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/show-recent-color/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/show-recent-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/show-recent-color/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/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md
index 8411772b79..ade6f4d139 100644
--- 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
@@ -1,6 +1,6 @@
---
layout: post
-title: Text formatting and Structure in ##Platform_Name## Rich Text Editor Control | Syncfusion
+title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | 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
@@ -381,24 +381,22 @@ Use the `Blockquote` tool in the editor below to see the feature in action.
> In a markdown editor, blockquotes are represented using the `>` symbol.
-## Insert code
+## Horizontal line
-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.
+The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (
) help visually separate sections of content, enhancing readability and structural clarity.
-### Enabling code block formatting
+To insert a horizontal line, place the cursor at the desired location and click the `HorizontalLine` icon in the toolbar. A full-width line will be added, creating a clear visual break between sections of text or other elements.
-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.
+Use the `HorizontalLine` 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/code-format/tagHelper %}
+{% include code-snippet/rich-text-editor/horizontal-line/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% include code-snippet/rich-text-editor/horizontal-line/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -406,48 +404,14 @@ Below are examples and code snippets demonstrating how to add and effectively us
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/code-format/razor %}
+{% include code-snippet/rich-text-editor/horizontal-line/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% include code-snippet/rich-text-editor/horizontal-line/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.
@@ -504,7 +468,7 @@ For more details on keyboard navigation, refer to the [Keyboard support](../keyb
> 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.
+Additionally, You can perform the format painter actions programmatically using the [executeCommand](../exec-command) public method.
## Clear formatting
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/undo-redo.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/undo-redo.md
index 7d6fa62ccf..5eab2cb04a 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/undo-redo.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/undo-redo.md
@@ -50,4 +50,35 @@ Here's an example of how to customize both the Undo/Redo timer and steps:
{% include code-snippet/rich-text-editor/undo-redo/controller.cs %}
{% endhighlight %}
{% endtabs %}
+{% endif %}
+
+## Clear Undo/Redo stack
+
+The Rich Text Editor automatically maintains an undo/redo stack, allowing users to revert or redo changes made during editing.
+
+To clear the entire undo and redo stack, use the public `clearUndoRedo` method. This is helpful when loading new content dynamically or resetting the editor to its initial state.
+
+Here's an example of how to customize both the Undo/Redo timer and steps:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/code-block.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/code-block.md
new file mode 100644
index 0000000000..fb0d0fac92
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/code-block.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Code Block in ##Platform_Name## Rich Text Editor control | Syncfusion
+description: Learn here all about Code Block in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Code Block
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Code Block in ##Platform_Name## Rich Text Editor control
+
+The Code Block feature in the Rich Text Editor, enabling users to insert and format code snippets effectively. It covers configuring supported languages, integrating syntax highlighters, editing tips, and enabling tab-based indentation, making it ideal for technical documentation, tutorials, and code-heavy content. While live code block highlighting is not supported during editing, syntax highlighting can be applied when content is displayed on the frontend.
+
+## Inserting a code block
+
+The Code Block feature allows users to embed formatted code snippets within the Rich Text Editor. To insert a code block:
+
+- **Using the Toolbar**: Click the **CodeBlock** button in the editor’s toolbar, typically represented by a code icon.
+- **Using the Shortcut**: Press `Ctrl+Shift+B` (or `Cmd+Shift+B` on macOS) to insert a code block at the cursor’s position.
+- A dropdown menu appears, allowing selection of the programming language for the code block, such as **JavaScript**, **Python**, **HTML**, or others configured in the system.
+
+The code block is rendered with a monospaced font and preserved indentation for readability. Language selection applies syntax-specific formatting and prepares the block for syntax highlighting when displayed on the frontend.
+
+## Configuring code block languages
+
+The Code Block feature supports customizable programming languages via the [e-richtexteditor-codeblocksettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorCodeBlockSettings.html) property, specifically the `languages` and `defaultLanguage` options. The `languages` property accepts an array of objects defining available languages, while `defaultLanguage` sets the default language for new code blocks. This allows developers to customize the editor for project-specific languages.
+
+Below is an example of how to configure the [e-richtexteditor-codeblocksettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorCodeBlockSettings.html) using the Rich Text Editor:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-block/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-block/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/code-block/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/code-block/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+In this example:
+
+* The **languages** array defines four supported languages: JavaScript, Python, HTML, and CSS.
+* The **defaultLanguage** is set to **javascript**, so new code blocks default to JavaScript.
+* Each language object specifies a **language** (for internal use, e.g., syntax highlighting) and a **label** (displayed in the dropdown).
+
+## Integrating syntax highlighters
+
+To enhance code block readability, integrate a third-party syntax highlighter like [Prism.js](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/), which supports numerous languages and customizable themes. Although live code block highlighting (real-time syntax highlighting during editing) is not possible in the Rich Text Editor, The highlighter can apply color-coded formatting to code blocks when the content is displayed on the frontend, such as in blog posts, website content, or preview mode. This ensures a polished presentation for end users.
+
+## Tips for editing around code blocks
+
+Editing content around code blocks requires care to preserve code integrity and maintain clean formatting. Follow these tips for a smooth editing experience:
+* **Inserting Text Before a Code Block**: Place the cursor at the start of the code block’s first line and press `Enter` to create an empty line above. Press Enter again to start a new paragraph for text.
+* **Inserting Text After a Code Block**: Place the cursor at the end of the code block’s last line and press `Enter` three times to exit the code block and create a new paragraph below.
+* **Preserving Formatting When Pasting**: Paste code into a code block using `Ctrl+Shift+V` (or `Cmd+Shift+V` on macOS) to avoid external formatting (e.g., fonts or colors) and maintain the monospaced style.
+* **Changing Languages**: When switching the language of a code block via the dropdown, verify that the code aligns with the new language for accurate syntax highlighting in the rendered output.
+* **Previewing Content**: Since live syntax highlighting is not available during editing, use the editor’s preview mode to verify how code blocks render with syntax highlighting before publishing.
+
+## Enabling tab-based line indentation in code blocks
+
+The Code Block feature supports tab-based indentation to align code properly, crucial for languages like Python where indentation is syntactically significant. The Rich Text Editor does not provide a specific property to configure the indentation character, but indentation can be enabled using the editor’s default behavior for the Tab key, toolbar commands, or custom event handling.
+
+To enable tab-based indentation:
+
+* **Using the Tab Key**: Pressing `Tab` within a code block typically inserts a tab character (\t) or spaces (usually four, depending on the editor’s default configuration). Use `Shift+Tab` to outdent selected lines.
+* **Toolbar Commands**: Include the `Indent` and `Outdent` buttons in the toolbar to increase or decrease indentation.
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
index f74a7d0d28..b24dcd89e5 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md
@@ -141,23 +141,20 @@ Refer `rename.cs` controller file for configure the server-side.
{% endtabs %}
{% endif %}
+### Uploading Audio with Authentication
-### Restricting Audio by Size
-
-You can restrict the audio uploaded from the local machine when the uploaded audio file size is greater than the allowed size by using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
-
-> The file size in the argument will be returned in `bytes`.
+You can add additional data with the audio uploaded from the Rich Text Editor on the client side, which can even be received on the server side by using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
-In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
+N> By default, it doesn't support the `UseDefaultCredentials` property; we need to manually append the default credentials with the upload request.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-audio-size/tagHelper %}
+{% include code-snippet/rich-text-editor/audio-authenticate/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
+{% include code-snippet/rich-text-editor/audio-authenticate/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -165,28 +162,28 @@ In the following illustration, the audio size has been validated before uploadin
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-audio-size/razor %}
+{% include code-snippet/rich-text-editor/audio-authenticate/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
+{% highlight c# tabtitle="SaveFile.cs" %}
+{% include code-snippet/rich-text-editor/audio-authenticate/saveFile.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
-### Uploading Audio with Authentication
+## Maximum file size restriction
-You can add additional data with the audio uploaded from the Rich Text Editor on the client side, which can even be received on the server side by using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can restrict the audio uploaded from the local machine when the uploaded audio file size is greater than the allowed size by using the [InsertAudioSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorAudioSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorAudioSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes..
-N> By default, it doesn't support the `UseDefaultCredentials` property; we need to manually append the default credentials with the upload request.
+In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/tagHelper %}
+{% include code-snippet/rich-text-editor/check-audio-size/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/controller.cs %}
+{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -194,10 +191,10 @@ N> By default, it doesn't support the `UseDefaultCredentials` property; we need
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/razor %}
+{% include code-snippet/rich-text-editor/check-audio-size/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="SaveFile.cs" %}
-{% include code-snippet/rich-text-editor/audio-authenticate/saveFile.cs %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-audio-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
index 168aa65b8e..0a32fdc943 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md
@@ -10,7 +10,7 @@ documentation: ug
# Images in ##Platform_Name## Rich Text Editor Control
-Rich Text Editor allows to insert images in your content from online sources as well as local computer. For inserting an image to the Rich Text Editor, the following list of options have been provided in the [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_)
+Rich Text Editor allows to insert images in your content from online sources as well as local computer. For inserting an image to the Rich Text Editor, the following list of options have been provided in the [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings)
## Configuring Image Tool in the Toolbar
@@ -109,17 +109,13 @@ Set the [insertImageSettings.saveFormat](https://help.syncfusion.com/cr/aspnetco
### Image Renaming Feature
-You can use the [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property, to specify the server handler to upload the selected image. Then by binding the [fileUploadSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploadSuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.
+You can use the [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property, to specify the server handler to upload the selected image. Then by binding the [ImageUploadSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ImageUploadSuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.
-### Size-based Image Restrictions
-
-You can restrict the image uploaded from the local machine when the uploaded image file size is greater than the allowed size by using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
-
-> The file size in the argument will be returned in `bytes`.
+Refer the section [Rename images before inserting it in Rich Text Editor](https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/how-to/rename-images-in-server) for code snippets and examples.
### Secure Image Upload with Authentication
-You can add additional data with the image uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can add additional data with the image uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [ImageUploading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ImageUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
@@ -146,6 +142,35 @@ You can add additional data with the image uploaded from the Rich Text Editor on
{% endtabs %}
{% endif %}
+## Maximum file size restriction
+
+You can restrict the image uploaded from the local machine when the uploaded image file size is greater than the allowed size by using the [InsertImageSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes. You can configure this size as follows.
+
+In the following example, the image size has been validated before uploading and determined whether the image has been uploaded or not.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/check-image-size/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-image-size/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/check-image-size/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-image-size/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
## Image Replacement Functionality
Once a image 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) `imageReplace` option. You can replace the image file either by using the web URL or the browse option in the image dialog.
@@ -209,7 +234,7 @@ By clicking the Image Caption, the image will get wrapped in an image element wi
## Configuring Image Display Position
-Sets the default display for an image when it is inserted in the Rich Text Editor using [display](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_). It has two possible options: 'inline' and 'block'.
+Sets the default display for an image when it is inserted in the Rich Text Editor using [display](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings). It has two possible options: 'inline' and 'block'.
{% if page.publishingplatform == "aspnet-core" %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
index a2c2ba5d11..7d8fe9010b 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md
@@ -146,22 +146,20 @@ Refer `rename.cs` controller file for configure the server-side.
{% endtabs %}
{% endif %}
-### Restricting video by size
-
-You can restrict the video uploaded from the local machine when the uploaded video file size is greater than the allowed size by using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event.
+### Uploading video with authentication
-> The file size in the argument will be returned in `bytes`.
+You can add additional data with the video uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
-In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
+N> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-video-size/tagHelper %}
+{% include code-snippet/rich-text-editor/video-authenticate/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
+{% include code-snippet/rich-text-editor/video-authenticate/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -169,28 +167,28 @@ In the following example, the video size has been validated before uploading and
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/check-video-size/razor %}
+{% include code-snippet/rich-text-editor/video-authenticate/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
+{% highlight c# tabtitle="SaveFile.cs" %}
+{% include code-snippet/rich-text-editor/video-authenticate/saveFile.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
-### Uploading video with authentication
+## Maximum file size restrictions
-You can add additional data with the video uploaded from the Rich Text Editor on the client side, which can even be received on the server side. By using the [fileUploading](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_FileUploading) event and its `customFormData` argument, you can pass parameters to the controller action. On the server side, you can fetch the custom headers by accessing the form collection from the current request, which retrieves the values sent using the POST method.
+You can restrict the video uploaded from the local machine when the uploaded video file size is greater than the allowed size by using the [InsertVideoSettings.MaxFileSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MaxFileSize) property. By default, the maximum file size is 30000000 bytes. You can configure this size as follows.
-N> By default, it doesn't support the `UseDefaultCredentials` property, you can manually append the default credentials with the upload request.
+In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
{% if page.publishingplatform == "aspnet-core" %}
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/video-authenticate/tagHelper %}
+{% include code-snippet/rich-text-editor/check-video-size/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/video-authenticate/controller.cs %}
+{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -198,10 +196,10 @@ N> By default, it doesn't support the `UseDefaultCredentials` property, you can
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/video-authenticate/razor %}
+{% include code-snippet/rich-text-editor/check-video-size/razor %}
{% endhighlight %}
-{% highlight c# tabtitle="SaveFile.cs" %}
-{% include code-snippet/rich-text-editor/video-authenticate/saveFile.cs %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/check-video-size/controller.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-position.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-position.md
new file mode 100644
index 0000000000..14acee89b6
--- /dev/null
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-position.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: Toolbar position in ##Platform_Name## Rich Text Editor Control | Syncfusion
+description: Learn here all about Toolbar position in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Toolbar position
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Toolbar position in the ##Platform_Name## Rich Text Editor Control
+
+The Rich Text Editor allows you to configure the toolbar's position using the [position](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Position) field in the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) property. The available positions are:
+
+1. Top
+2. Bottom
+
+## Configuring the toolbar position
+
+The Rich Text Editor allows you to position the toolbar at the top or bottom of the content area, depending on your layout requirements.
+
+By default, the toolbar is displayed at the top of the editor, making all formatting and editing tools immediately accessible above the content.
+
+To position the toolbar at the bottom, use the [position](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Position) property in the [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) configuration and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-bottom/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/toolbar/toolbar-types.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-types.md
index 877dd795f0..a2ddd53560 100644
--- 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
@@ -21,6 +21,7 @@ The Rich Text Editor allows you to configure different types of toolbar using [t
1. Expand
2. MultiRow
3. Scrollable
+4. Popup
## Expanding the toolbar
@@ -101,6 +102,33 @@ Setting the `type` to `Scrollable` in [toolbarSettings](https://help.syncfusion.
{% endtabs %}
{% endif %}
+## Configuring a popup toolbar
+
+Setting the `type` to `Popup` in [toolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_ToolbarSettings) will display overflowing toolbar items into a popup container, optimizing the toolbar layout for limited space and smaller screens.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/toolbar-popup/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.
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
index e727c5dde1..ae7b931fb2 100644
--- 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
@@ -141,6 +141,14 @@ The table quicktoolbar provides options for table editing within the Rich Text E
| 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']} |
+### Horizontal Line
+
+Horizontal lines visually separate sections of content in the editor, enhancing readability and layout clarity.
+
+| Name | Icons | Summary | Initialization |
+|----------------|---------|---------|------------------------------------------|
+| Horizontal Line |  | Allows you to insert horizontal line.|toolbarSettings: { items: ['HorizontalLine']} |
+
### Undo & redo
These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions.
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
index ed09633cc5..1978b49a90 100644
--- 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
@@ -232,3 +232,32 @@ Both the `FontColor` and `BackgroundColor` properties offer two modes: `Picker`
{% endhighlight %}
{% endtabs %}
{% endif %}
+
+### Show recent color
+
+The [ShowRecentColors](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFontColor_ShowRecentColors) feature in the Rich Text Editor provides quick access to a row of recently used colors displayed below the main palette. This streamlines editing by keeping frequently used colors easily accessible, improving styling efficiency and consistency.
+
+This feature can be enabled separately for the [RichTextEditorFontColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFontColor.html) and [RichTextEditorBackgroundColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBackgroundColor.html) tools, giving flexibility based on formatting needs. It is especially helpful when working with consistent color themes, eliminating the need to repeatedly search through the full palette.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/show-recent-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/show-recent-color/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/show-recent-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/show-recent-color/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/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md
index 8183458077..5c632cc674 100644
--- 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
@@ -1,6 +1,6 @@
---
layout: post
-title: Text formatting and Structure in ##Platform_Name## Rich Text Editor Control | Syncfusion
+title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | 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
@@ -381,24 +381,22 @@ Use the `Blockquote` tool in the editor below to see the feature in action.
> In a markdown editor, blockquotes are represented using the `>` symbol.
-## Insert code
+## Horizontal line
-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.
+The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (
) help visually separate sections of content, enhancing readability and structural clarity.
-### Enabling code block formatting
+To insert a horizontal line, place the cursor at the desired location and click the `HorizontalLine` icon in the toolbar. A full-width line will be added, creating a clear visual break between sections of text or other elements.
-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.
+Use the `HorizontalLine` 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/code-format/tagHelper %}
+{% include code-snippet/rich-text-editor/horizontal-line/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% include code-snippet/rich-text-editor/horizontal-line/controller.cs %}
{% endhighlight %}
{% endtabs %}
@@ -406,51 +404,17 @@ Below are examples and code snippets demonstrating how to add and effectively us
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/rich-text-editor/code-format/razor %}
+{% include code-snippet/rich-text-editor/horizontal-line/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
-{% include code-snippet/rich-text-editor/code-format/controller.cs %}
+{% include code-snippet/rich-text-editor/horizontal-line/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.
+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
@@ -471,7 +435,7 @@ The following code example shows how to add the format painter tool in the Rich
### 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.
+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.
@@ -504,7 +468,7 @@ For more details on keyboard navigation, refer to the [Keyboard support](../keyb
> 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.
+Additionally, You can perform the format painter actions programmatically using the [executeCommand](../exec-command) public method.
## Clear formatting
diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/undo-redo.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/undo-redo.md
index 63fae3ac9c..6253916e08 100644
--- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/undo-redo.md
+++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/undo-redo.md
@@ -50,4 +50,35 @@ Here's an example of how to customize both the Undo/Redo timer and steps:
{% include code-snippet/rich-text-editor/undo-redo/controller.cs %}
{% endhighlight %}
{% endtabs %}
+{% endif %}
+
+## Clear Undo/Redo stack
+
+The Rich Text Editor automatically maintains an undo/redo stack, allowing users to revert or redo changes made during editing.
+
+To clear the entire undo and redo stack, use the public `clearUndoRedo` method. This is helpful when loading new content dynamically or resetting the editor to its initial state.
+
+Here's an example of how to customize both the Undo/Redo timer and steps:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/clear-undo-redo/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/rich-text-editor/images/horizontal-icon.png b/ej2-asp-core-mvc/rich-text-editor/images/horizontal-icon.png
new file mode 100644
index 0000000000..4160041c35
Binary files /dev/null and b/ej2-asp-core-mvc/rich-text-editor/images/horizontal-icon.png differ
diff --git a/ej2-asp-core-mvc/spreadsheet/docker-deployment.md b/ej2-asp-core-mvc/spreadsheet/docker-deployment.md
index 0927a96826..bb4827c486 100644
--- a/ej2-asp-core-mvc/spreadsheet/docker-deployment.md
+++ b/ej2-asp-core-mvc/spreadsheet/docker-deployment.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
-This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 6.0.
+This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 8.0.
You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker).
@@ -46,7 +46,7 @@ services:
# Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
ports:
- - "6002:80"
+ - "6002:8080"
```
**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file.
@@ -110,7 +110,7 @@ services:
LANGUAGE: de_DE.UTF-8
LANG: de_DE.UTF-8
ports:
- - "6002:80"
+ - "6002:8080"
```
-Please refer to these getting started pages to create a Spreadsheet in [`Angular`](https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started), [`Vue`](https://ej2.syncfusion.com/vue/documentation/spreadsheet/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core), and [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc).
\ No newline at end of file
+Please refer to these getting started pages to create a Spreadsheet in [`Angular`](https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started), [`Vue`](https://ej2.syncfusion.com/vue/documentation/spreadsheet/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core), and [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc).
diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/identify-the-context-menu-opened.md b/ej2-asp-core-mvc/spreadsheet/how-to/identify-the-context-menu-opened.md
index faa03b04cc..8b8f11ed52 100644
--- a/ej2-asp-core-mvc/spreadsheet/how-to/identify-the-context-menu-opened.md
+++ b/ej2-asp-core-mvc/spreadsheet/how-to/identify-the-context-menu-opened.md
@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
documentation: ug
---
-## Identify the context menu opened in Spreadsheet control
+# Identify the context menu opened in Spreadsheet control
The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears.
diff --git a/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg b/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg
new file mode 100644
index 0000000000..e3f49179ea
Binary files /dev/null and b/ej2-asp-core-mvc/spreadsheet/images/fileSize_and_dataLimit.jpg differ
diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md
index 170bf0664d..02685641ea 100644
--- a/ej2-asp-core-mvc/spreadsheet/open-save.md
+++ b/ej2-asp-core-mvc/spreadsheet/open-save.md
@@ -447,6 +447,38 @@ The following code snippet demonstrates how to configure the deserialization opt
{% endtabs %}
{% endif %}
+### Improving Excel file open performance with parsing options
+
+Opening large Excel files into the EJ2 Spreadsheet control can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles and number formats—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption.
+
+To address this, we've introduced parsing options that allow users to selectively skip non-essential features during the open process. By enabling options like `IgnoreStyle` and `IgnoreFormat`, you can reduce the amount of data processed, resulting in:
+* Faster load times
+* Lower memory usage
+* Smaller JSON responses
+
+These enhancements are especially beneficial for users working with large or complex Excel files, offering a more efficient and responsive experience.
+
+> **Note:** These options are ideal when styles and number formats are not critical to your use case and the focus is on loading the actual data efficiently.
+
+The code example below demonstrates how to configure the `IgnoreStyle` and `IgnoreFormat` parsing options on the `server-side`.
+
+**Code Snippet:**
+
+**Server-Side Configuration:**
+```csharp
+public IActionResult Open(IFormCollection openRequest)
+{
+ OpenRequest open = new OpenRequest();
+ ...
+ open.ParseOptions = new WorkbookParseOptions() {
+ IgnoreStyle = true,
+ IgnoreFormat = true
+ };
+ ...
+ return Content(Workbook.Open(open));
+}
+```
+
### Chunk response processing
When opening large Excel files with many features and data, the server response can become very large. This might cause memory issues or connection problems during data transmission. The `Chunk Response Processing` feature solves this by dividing the server response into smaller parts, called chunks, and sending them to the client in parallel. The client receives these chunks and combines them to load the Excel data smoothly into the spreadsheet.
diff --git a/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md b/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md
new file mode 100644
index 0000000000..fb8e032fdc
--- /dev/null
+++ b/ej2-asp-core-mvc/spreadsheet/performance-best-practices.md
@@ -0,0 +1,276 @@
+---
+layout: post
+title: Performance Best Practices in ##Platform_Name## Syncfusion Spreadsheet Component
+description: Learn here all about performance best practices in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Performance
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Performance Best Practices in ##Platform_Name## Spreadsheet control
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+Performance optimization is crucial when working with large datasets in the [Syncfusion® ASP.NET Core Spreadsheet](https://www.syncfusion.com/aspnet-core-ui-controls/spreadsheet). This documentation outlines best practices to enhance data handling efficiency and ensure a smooth, responsive user experience during various spreadsheet operations.
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+Performance optimization is crucial when working with large datasets in the [Syncfusion® ASP.NET MVC Spreadsheet](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet). This documentation outlines best practices to enhance data handling efficiency and ensure a smooth, responsive user experience during various spreadsheet operations.
+
+{% endif %}
+
+## How to improve performance when opening Excel files in the Spreadsheet?
+
+### Virtual scrolling
+
+Virtual scrolling is an essential performance feature in the Spreadsheet that enhances rendering efficiency when handling large datasets. Instead of loading all rows and columns into the DOM at once, it renders only the cells visible within the viewport. As the user scrolls, additional rows or columns are dynamically loaded and rendered.
+
+This approach significantly reduces initial load time, DOM size, and memory usage — resulting in smoother rendering and interaction, especially when working with thousands of rows or columns.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+For more details, refer to the [virtual scrolling documentation](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling#virtual-scrolling).
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+For more details, refer to the [virtual scrolling documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/scrolling#virtual-scrolling).
+
+{% endif %}
+
+### Chunk response processing
+
+When opening large Excel files with extensive data and features, server responses can become too large—leading to memory issues or connection failures during transmission. The Chunk Response Processing feature addresses this by breaking the response into smaller chunks and sending them in parallel to the client.
+
+These chunks are combined on the client side to load the Excel data smoothly into the Spreadsheet. This approach avoids transmission failures due to memory constraints and ensures reliable and efficient loading of large files.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+To enable the chunk response processing feature, you can refer to the following UG section:
+* [Chunk Response Processing](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#chunk-response-processing)
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+To enable the chunk response processing feature, you can refer to the following UG section:
+* [Chunk Response Processing](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#chunk-response-processing)
+
+{% endif %}
+
+### Configure JSON serialization options during open
+
+Serialization options in the Spreadsheet allows you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the `openFromJson` method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
+
+This is particularly useful when:
+* You need only the raw data without formatting.
+* You're opening the `Workbook JSON object` in the Spreadsheet using the `openFromJson` method.
+* You want to minimize the size of the JSON payload and optimize processing speed.
+
+Refer to the following UG section to learn how to configure these options:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+* [Configure JSON serialization options during open](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-deserialization-options)
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+* [Configure JSON serialization options during open](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#configure-json-deserialization-options)
+
+{% endif %}
+
+### Configuring threshold limits
+
+To improve performance when importing large Excel files into the Spreadsheet component, you can configure thresholds for both the maximum number of cells `MaximumDataLimit` and the file size `MaximumFileSize`. These limits help prevent delays or potential server timeouts by restricting excessively large files from being imported.
+
+When these thresholds are exceeded:
+* The Spreadsheet displays an alert dialog indicating that the file is large.
+ 
+* Clicking **Cancel** aborts the open process.
+* Clicking **OK** proceeds with the open process.
+
+You can configure the `MaximumDataLimit` and `MaximumFileSize` thresholds on the server side using the following code example:
+
+**Code Snippet:**
+
+```csharp
+public IActionResult Open(IFormCollection openRequest)
+{
+ OpenRequest open = new OpenRequest();
+ open.File = openRequest.Files[0];
+ open.Guid = openRequest["Guid"];
+
+ // Set maximum allowed number of cells
+ open.ThresholdLimit.MaximumDataLimit = 1000000; // 1,000,000 cells
+
+ // Set maximum allowed file size in bytes (e.g., 5MB)
+ open.ThresholdLimit.MaximumFileSize = 5000000;
+
+ var openbook = Content(Workbook.Open(open));
+ return openbook;
+}
+```
+
+### Optimize Excel open with parsing options
+
+To improve performance when opening large Excel files, use parsing options like `IgnoreStyle` and `IgnoreFormat` to skip unnecessary styles and formats. This reduces memory usage, speeds up loading, and minimizes JSON size—especially helpful for files with many styled but empty cells.
+
+To learn how to configure these parsing options, please refer to the UG section below.
+* [Configure Parsing Options](./open-save#improving-excel-file-open-performance-with-parsing-options)
+
+## How to improve performance on formula calculation in Spreadsheet?
+
+### Manual calculation mode
+
+Manual Calculation Mode in the Spreadsheet is a performance optimization feature that allows you to delay formula recalculations until they are explicitly triggered. By default, the Spreadsheet automatically recalculates formulas whenever a dependent cell is edited or changed. While this behavior works well for small datasets, it can result in noticeable lag or UI freezing when working with large spreadsheets that contain many formulas or complex calculation chains.
+
+To prevent such performance issues during bulk operations—such as importing data, applying formats, or setting multiple formulas — manual calculation mode gives developers control over when recalculations should occur.
+
+Enabling manual mode is highly beneficial when:
+* Importing large Excel or JSON files with formula-heavy sheets.
+* Performing bulk updates (e.g., updating rows or columns via code).
+* Applying formulas dynamically to a large number of cells.
+* You want to postpone calculations until all content or changes are finalized.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/formulas#manual-mode).
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/formulas#manual-mode).
+
+{% endif %}
+
+## How to improve save performance in the Spreadsheet?
+
+### Handling large file saves with `isFullPost` option
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook.
+
+To mitigate these issues during the save operation, you can set the `isFullPost` property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet.
+
+The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook.
+
+To mitigate these issues during the save operation, you can set the `isFullPost` property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet.
+
+The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("/Home/Open").SaveUrl("/Home/Save").BeforeSave("beforeSave").Render()
+
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Configure JSON serialization options during save
+
+Serialization options in the Spreadsheet allows you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the `saveAsJson` method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
+
+This is particularly useful when:
+* You need only the raw data without formatting.
+* You're saving the `Workbook JSON object` using the `saveAsJson` method in the Spreadsheet.
+* You want to minimize the size of the JSON payload and optimize processing speed.
+
+Proper use of serialization options during save improves performance and reduces the time taken during the save process.
+
+Refer to the following UG section to learn how to configure these options:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+* [Configure JSON serialization options during save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-serialization-options)
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+* [Configure JSON serialization options during save](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save#configure-json-serialization-options)
+
+{% endif %}
+
+## How to improve cell selection performance in Spreadsheet?
+
+### Disabling aggregate calculation
+
+When working with large datasets in the Spreadsheet, user interactions such as selecting a large range of cells can experience delays. This occurs because, by default, the Spreadsheet performs aggregate calculations (e.g., SUM, AVERAGE, COUNT, MIN, and MAX) on the selected range and displays the results in the sheet tab panel at the bottom-right corner.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowAggregate) property.
+
+Benefits:
+* Reduces selection lag when dealing with large data ranges.
+* Prevents real-time computation of formulas like SUM, AVERAGE, MIN, and MAX for large selections.
+* Keeps the UI responsive during large selection operations.
+
+You can disable aggregate calculation using the following code example:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowAggregate) property.
+
+Benefits:
+* Reduces selection lag when dealing with large data ranges.
+* Prevents real-time computation of formulas like SUM, AVERAGE, MIN, and MAX for large selections.
+* Keeps the UI responsive during large selection operations.
+
+You can disable aggregate calculation using the following code example:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("/Home/Open").SaveUrl("/Home/Save").ShowAggregate(false).Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## See Also
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+* [Open and Save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save)
+* [Docker Deployment](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/docker-deployment)
+* [Scrolling](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling)
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+* [Open and Save](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/open-save)
+* [Docker Deployment](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/docker-deployment)
+* [Scrolling](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/scrolling)
+
+{% endif %}
\ No newline at end of file
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 75d0e88052..78c7999ea4 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -298,9 +298,20 @@
Block Editor
-
+
Breadcrumb
@@ -506,6 +517,7 @@
Trendlines
Markers
Data Labels
+ Last Value Label
Annotations
Legend
Tooltip
@@ -950,6 +962,7 @@
Feature modules
Import
Export
+ Ribbon
Collaborative Editing
FAQ
@@ -1190,6 +1204,7 @@
Responsive Columns
Checkbox Column
Column Spanning
+ WBS Column
Timeline
@@ -1204,6 +1219,7 @@
Scheduling Tasks
Taskbar
@@ -1434,6 +1450,7 @@
Accessibility
Clipboard
Context Menu
+ Integrate Chart in Grid
Style and Appearance
Troubleshooting
@@ -2323,6 +2342,7 @@
Toolbar
@@ -2379,6 +2399,7 @@
List Formatting
Link
Table
+ Code Block
Remove Formatting
Format Painter
Paste Cleanup
@@ -2675,6 +2696,7 @@
Undo and Redo
Ribbon
Print
+ Performance Best Practices
Globalization
Accessibility
Keyboard Shortcuts
@@ -3180,7 +3202,7 @@
Release Notes
- - 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.*
+
Timeline
@@ -1152,6 +1167,7 @@
Scheduling Tasks
Taskbar
@@ -1273,7 +1289,8 @@
- Microsoft SQL Server
- MySQL Server
- - PostgreSQL Server
+ - PostgreSQL Server
+ - PostgreSQL Server
- SQLite Server
- Dapper
- Entity Framework
@@ -1385,6 +1402,7 @@
- Accessibility
- Clipboard
- Context Menu
+ - Integrate Chart in Grid
- Style and Appearance
- Troubleshooting
@@ -2282,6 +2302,7 @@
- Toolbar
@@ -2338,6 +2359,7 @@
- List Formatting
- Link
- Table
+ - Code Block
- Remove Formatting
- Format Painter
- Paste Cleanup
@@ -2638,6 +2660,7 @@
- Undo and Redo
- Ribbon
- Print
+ - Performance Best Practices
- Globalization
- Accessibility
- Keyboard Shortcuts
@@ -3144,7 +3167,7 @@
Release Notes
- - 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
+ - 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.*
- 2022 Volume 4 - 20.4.*
- 2022 Volume 3 - 20.3.*
- 2022 volume 2 - 20.2.*