997757: Need to provide documentation for the line height feature

Author: sf4442

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 = @"<p>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.</p><p><b> Key features:</b></p> <ul> <li><p>Provides a <b>Line Height</b> dropdown in the toolbar for easy access.</p></li><li><p>Supports applying line-height to paragraphs, headings, lists, and table cells.</p></li><li><p>Applies line-height as inline styles for consistent and precise text rendering.</p></li><li><p>Ensures consistent appearance across devices and print layouts.</p></li><li><p>Improves text readability and overall document aesthetics.</p></li></ul>";
+        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();
+    }
+
+}

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()

ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper

@@ -0,0 +1,5 @@
+<ejs-richtexteditor id="custom-line-height" value="@ViewBag.value">
+    <e-richtexteditor-lineheight default="10 px" items="@ViewBag.LineHeightItems" supportAllValues="true">
+    </e-richtexteditor-lineheight>
+    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
+</ejs-richtexteditor>

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 = @"<p>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.</p><p><b> Key features:</b></p> <ul> <li><p>Provides a <b>Line Height</b> dropdown in the toolbar for easy access.</p></li><li><p>Supports applying line-height to paragraphs, headings, lists, and table cells.</p></li><li><p>Applies line-height as inline styles for consistent and precise text rendering.</p></li><li><p>Ensures consistent appearance across devices and print layouts.</p></li><li><p>Improves text readability and overall document aesthetics.</p></li></ul>";
+        ViewBag.items = new[] { "LineHeight" };
+        return View();
+    }
+}

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()

ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper

@@ -0,0 +1,3 @@
+<ejs-richtexteditor id="line-height" value="@ViewBag.value">
+    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
+</ejs-richtexteditor>

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 (<hr>) help visually separate sections of content, enhancing readability and structural clarity.