diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/controller.cs new file mode 100644 index 0000000000..e48b667d74 --- /dev/null +++ b/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 = @"

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

Key features:

Sky with sun
"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/razor new file mode 100644 index 0000000000..848d9952d4 --- /dev/null +++ b/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() + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/tagHelper new file mode 100644 index 0000000000..84641b65fd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clear-undo-redo/tagHelper @@ -0,0 +1,11 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/controller.cs new file mode 100644 index 0000000000..e48b667d74 --- /dev/null +++ b/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 = @"

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

Key features:

Sky with sun
"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/razor new file mode 100644 index 0000000000..38f2c2438a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.RichTextEditor + +
+ @Html.EJS().RichTextEditor("toolbar-position").ToolbarSettings(e => { e.Type(ToolbarPosition.Bottom);}).Value(ViewBag.value).Render() +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/tagHelper new file mode 100644 index 0000000000..3485e752b6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-bottom/tagHelper @@ -0,0 +1,5 @@ +
+ + + +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/controller.cs new file mode 100644 index 0000000000..e48b667d74 --- /dev/null +++ b/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 = @"

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

Key features:

Sky with sun
"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/razor new file mode 100644 index 0000000000..90545720af --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/razor @@ -0,0 +1,5 @@ +@using Syncfusion.EJ2.RichTextEditor + +
+ @Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.Popup);}).Value(ViewBag.value).Render() +
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/tagHelper new file mode 100644 index 0000000000..87f19f2b3c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/toolbar-popup/tagHelper @@ -0,0 +1,5 @@ +
+ + + +
\ No newline at end of file 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..7bae949d33 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 @@ -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. 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/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..c40164d6d8 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 @@ -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. 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-toc.html b/ej2-asp-core-toc.html index 14d8a8f3be..6451e01511 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -2333,6 +2333,7 @@
  • Toolbar
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index af4967229c..ed08c13cba 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -2292,6 +2292,7 @@
  • Toolbar