950709: UG documentation for bottom , popup toolbar and clear undo redo stack

ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/razor

@@ -0,0 +1,10 @@
+@Html.EJS().RichTextEditor("clear-undo-redo").Value(ViewBag.value).Render()
+
+<button id="clearundoredobtn" class="e-btn"> Clear Undo/Redo </button>
+
+<script>
+    document.getElementById('clearundoredobtn').addEventListener('click', function() {
+        var rte = document.getElementById("clear-undo-redo").ej2_instances[0];
+        rte.clearUndoRedo();
+    });
+</script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/tagHelper

@@ -0,0 +1,11 @@
+<ejs-richtexteditor id="clear-undo-redo" value="@ViewBag.value">
+    <e-richtexteditor-toolbarsettings ></e-richtexteditor-toolbarsettings>
+</ejs-richtexteditor>
+<button id="clearundoredobtn" class="e-btn">Clear Undo/Redo</button>
+
+<script>
+    document.getElementById('clearundoredobtn').addEventListener('click', function() {
+        var rte = document.getElementById("clear-undo-redo").ej2_instances[0];
+        rte.clearUndoRedo();
+    });
+</script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/razor

@@ -0,0 +1,5 @@
+@using Syncfusion.EJ2.RichTextEditor
+
+<div style="width:500px; margin:0 auto;">
+    @Html.EJS().RichTextEditor("toolbar-position").ToolbarSettings(e => { e.Type(ToolbarPosition.Bottom);}).Value(ViewBag.value).Render()
+</div> 

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/tagHelper

@@ -0,0 +1,5 @@
+<div style="width:500px; margin:0 auto;">
+    <ejs-richtexteditor id="toolbar-position" value="@ViewBag.value">
+        <e-richtexteditor-toolbarsettings position="Bottom"></e-richtexteditor-toolbarsettings>
+    </ejs-richtexteditor>
+</div>

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/razor

@@ -0,0 +1,5 @@
+@using Syncfusion.EJ2.RichTextEditor
+
+<div style="width:500px; margin:0 auto;">
+    @Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.Popup);}).Value(ViewBag.value).Render()
+</div>

ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/tagHelper

@@ -0,0 +1,5 @@
+<div style="width:500px; margin:0 auto;">
+    <ejs-richtexteditor id="toolbar-types" value="@ViewBag.value">
+        <e-richtexteditor-toolbarsettings type="Popup"></e-richtexteditor-toolbarsettings>
+    </ejs-richtexteditor>
+</div>

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)

ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/toolbar/toolbar-types.md

@@ -101,6 +101,34 @@ 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.

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 %}

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)

ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/toolbar/toolbar-types.md

@@ -101,6 +101,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.

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 %}

ej2-asp-core-toc.html

@@ -2333,6 +2333,7 @@
 		<li>Toolbar
 			<ul>
 				<li><a href="/ej2-asp-core/rich-text-editor/toolbar/toolbar-types">Toolbar Types</a></li>
+				<li><a href="/ej2-asp-core/rich-text-editor/toolbar/toolbar-position">Toolbar Position</a></li>
 				<li><a href="/ej2-asp-core/rich-text-editor/toolbar/quick-toolbar">Quick Toolbar</a></li>
 			</ul>
 		</li>

ej2-asp-mvc-toc.html

@@ -2292,6 +2292,7 @@
 		<li>Toolbar
 			<ul>
 				<li><a href="/ej2-asp-mvc/rich-text-editor/toolbar/toolbar-types">Toolbar Types</a></li>
+				<li><a href="/ej2-asp-core/rich-text-editor/toolbar/toolbar-position">Toolbar Position</a></li>
 				<li><a href="/ej2-asp-mvc/rich-text-editor/toolbar/quick-toolbar">Quick Toolbar</a></li>
 			</ul>
 		</li>