From 7fec35b465df8c2384b0e6b5c06a40e5b25cdeef Mon Sep 17 00:00:00 2001 From: sf4442 <159988198+sf4442@users.noreply.github.com> Date: Tue, 9 Dec 2025 18:14:37 +0530 Subject: [PATCH 1/3] 997757: Need to provide documentation for the line height feature --- .../line-height-cs1/controller.cs | 37 +++++++++++++++++++ .../rich-text-editor/line-height-cs1/razor | 1 + .../line-height-cs1/tagHelper | 5 +++ .../line-height/controller.cs | 9 +++++ .../rich-text-editor/line-height/razor | 1 + .../rich-text-editor/line-height/tagHelper | 3 ++ .../EJ2_ASP.MVC/tools/text-formatting.md | 33 +++++++++++++++++ 7 files changed, 89 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs new file mode 100644 index 0000000000..762857f886 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs @@ -0,0 +1,37 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.

Key features:

"; + object size1 = new + { + text = "8 px", + value = "8px" + }; + object size2 = new + { + text = "10 px", + value = "10px" + }; + object size3 = new + { + text = "12 px", + value = "12px" + }; + object size4 = new + { + text = "14 px", + value = "14px" + }; + object size5 = new + { + text = "42 px", + value = "42px" + }; + + ViewBag.items = new[] { "LineHeight" }; + ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 }; + return View(); + } + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor new file mode 100644 index 0000000000..20734ab7fa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("10px").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper new file mode 100644 index 0000000000..07009de176 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper @@ -0,0 +1,5 @@ + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs new file mode 100644 index 0000000000..e2dcb066b6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs @@ -0,0 +1,9 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.

Key features:

"; + ViewBag.items = new[] { "LineHeight" }; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor new file mode 100644 index 0000000000..3308b4b9dc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor @@ -0,0 +1 @@ +@Html.EJS().RichTextEditor("line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper new file mode 100644 index 0000000000..d7e65a060b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper @@ -0,0 +1,3 @@ + + + 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 50ce849adc..1d9b56f9eb 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 @@ -463,6 +463,39 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} +## Line Height + +The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document. + +### Built-in line height + +You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. + ## Horizontal line 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. From b6b85a64145bef33020f705a5d364b01d034e867 Mon Sep 17 00:00:00 2001 From: sf4442 <159988198+sf4442@users.noreply.github.com> Date: Tue, 9 Dec 2025 18:18:26 +0530 Subject: [PATCH 2/3] 997757: Need to provide documentation for the line height feature --- .../EJ2_ASP.MVC/tools/text-formatting.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) 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 1d9b56f9eb..7ff34880c6 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 @@ -496,6 +496,35 @@ You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [ The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. +### Custom line height + +The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. + +The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Horizontal line 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. From da1f99015677a2ea6d2f996ba70bb8416ccf792d Mon Sep 17 00:00:00 2001 From: yaswinVikhaash-sf4272 <147583552+yaswinVikhaash-sf4272@users.noreply.github.com> Date: Wed, 10 Dec 2025 12:03:08 +0530 Subject: [PATCH 3/3] 997757: Need to provide documentation for the line height feature --- .../line-height-cs1/controller.cs | 39 +++++++---- .../rich-text-editor/line-height-cs1/razor | 2 +- .../line-height-cs1/tagHelper | 2 +- .../EJ2_ASP.NETCORE/tools/text-formatting.md | 64 ++++++++++++++++++- 4 files changed, 92 insertions(+), 15 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs index 762857f886..8c55172c87 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs @@ -5,33 +5,48 @@ public ActionResult Index() ViewBag.value = @"

The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.

Key features:

"; object size1 = new { - text = "8 px", - value = "8px" + text = "1", + value = "1" }; object size2 = new { - text = "10 px", - value = "10px" + text = "1.15", + value = "1.15" }; object size3 = new { - text = "12 px", - value = "12px" + text = "1.5", + value = "1.5" }; object size4 = new { - text = "14 px", - value = "14px" + text = "2", + value = "2" }; object size5 = new { - text = "42 px", - value = "42px" + text = "2.5", + value = "2.5" }; - + object size6 = new + { + text = "3", + value = "3" + }; + object size6 = new + { + text = "3.5", + value = "3.5" + }; + object size7 = new + { + text = "4", + value = "4" + }; + ViewBag.items = new[] { "LineHeight" }; ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 }; return View(); } - + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor index 20734ab7fa..d7e149e361 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor @@ -1 +1 @@ -@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("10px").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render() \ No newline at end of file +@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("2").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper index 07009de176..9fdf2181ed 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper @@ -1,5 +1,5 @@ - + 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 c9478d0274..e25a10e051 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 @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Formatting in the ##Platform_Name## Rich Text Editor Control +# Text Formatting in the ASP.NET Core Rich Text Editor Control ## Basic text styling @@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} +## Line Height + +The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document. + +### Built-in line height + +You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. + +### Custom line height + +The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. + +The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/line-height-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Horizontal line 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.