Skip to content

Commit 081216e

Browse files
revanthKrishnanrevanthKrishnan
authored
Merge pull request #4675 from syncfusion-content/997757-line-asp
997757: Need to provide documentation for the line height feature
2 parents bcef95d + da1f990 commit 081216e

File tree

8 files changed

+196
-1
lines changed

8 files changed

+196
-1
lines changed

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
public class HomeController : Controller
2+
{
3+
public ActionResult Index()
4+
{
5+
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>";
6+
object size1 = new
7+
{
8+
text = "1",
9+
value = "1"
10+
};
11+
object size2 = new
12+
{
13+
text = "1.15",
14+
value = "1.15"
15+
};
16+
object size3 = new
17+
{
18+
text = "1.5",
19+
value = "1.5"
20+
};
21+
object size4 = new
22+
{
23+
text = "2",
24+
value = "2"
25+
};
26+
object size5 = new
27+
{
28+
text = "2.5",
29+
value = "2.5"
30+
};
31+
object size6 = new
32+
{
33+
text = "3",
34+
value = "3"
35+
};
36+
object size6 = new
37+
{
38+
text = "3.5",
39+
value = "3.5"
40+
};
41+
object size7 = new
42+
{
43+
text = "4",
44+
value = "4"
45+
};
46+
47+
ViewBag.items = new[] { "LineHeight" };
48+
ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 };
49+
return View();
50+
}
51+
52+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@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()

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ejs-richtexteditor id="custom-line-height" value="@ViewBag.value">
2+
<e-richtexteditor-lineheight default="2" items="@ViewBag.LineHeightItems" supportAllValues="true">
3+
</e-richtexteditor-lineheight>
4+
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
5+
</ejs-richtexteditor>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
public class HomeController : Controller
2+
{
3+
public ActionResult Index()
4+
{
5+
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>";
6+
ViewBag.items = new[] { "LineHeight" };
7+
return View();
8+
}
9+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ejs-richtexteditor id="line-height" value="@ViewBag.value">
2+
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
3+
</ejs-richtexteditor>

‎ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin
463463
{% endtabs %}
464464
{% endif %}
465465

466+
## Line Height
467+
468+
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.
469+
470+
### Built-in line height
471+
472+
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.
473+
474+
{% if page.publishingplatform == "aspnet-core" %}
475+
476+
{% tabs %}
477+
{% highlight cshtml tabtitle="CSHTML" %}
478+
{% include code-snippet/rich-text-editor/line-height/tagHelper %}
479+
{% endhighlight %}
480+
{% highlight c# tabtitle="Controller.cs" %}
481+
{% include code-snippet/rich-text-editor/line-height/controller.cs %}
482+
{% endhighlight %}
483+
{% endtabs %}
484+
485+
{% elsif page.publishingplatform == "aspnet-mvc" %}
486+
487+
{% tabs %}
488+
{% highlight razor tabtitle="CSHTML" %}
489+
{% include code-snippet/rich-text-editor/line-height/razor %}
490+
{% endhighlight %}
491+
{% highlight c# tabtitle="Controller.cs" %}
492+
{% include code-snippet/rich-text-editor/line-height/controller.cs %}
493+
{% endhighlight %}
494+
{% endtabs %}
495+
{% endif %}
496+
497+
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.
498+
499+
### Custom line height
500+
501+
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.
502+
503+
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.
504+
505+
{% if page.publishingplatform == "aspnet-core" %}
506+
507+
{% tabs %}
508+
{% highlight cshtml tabtitle="CSHTML" %}
509+
{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %}
510+
{% endhighlight %}
511+
{% highlight c# tabtitle="Controller.cs" %}
512+
{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
513+
{% endhighlight %}
514+
{% endtabs %}
515+
516+
{% elsif page.publishingplatform == "aspnet-mvc" %}
517+
518+
{% tabs %}
519+
{% highlight razor tabtitle="CSHTML" %}
520+
{% include code-snippet/rich-text-editor/line-height-cs1/razor %}
521+
{% endhighlight %}
522+
{% highlight c# tabtitle="Controller.cs" %}
523+
{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
524+
{% endhighlight %}
525+
{% endtabs %}
526+
{% endif %}
527+
466528
## Horizontal line
467529

468530
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.

‎ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Text Formatting in the ##Platform_Name## Rich Text Editor Control
11+
# Text Formatting in the ASP.NET Core Rich Text Editor Control
1212

1313
## Basic text styling
1414

@@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin
463463
{% endtabs %}
464464
{% endif %}
465465

466+
## Line Height
467+
468+
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.
469+
470+
### Built-in line height
471+
472+
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.
473+
474+
{% if page.publishingplatform == "aspnet-core" %}
475+
476+
{% tabs %}
477+
{% highlight cshtml tabtitle="CSHTML" %}
478+
{% include code-snippet/rich-text-editor/line-height/tagHelper %}
479+
{% endhighlight %}
480+
{% highlight c# tabtitle="Controller.cs" %}
481+
{% include code-snippet/rich-text-editor/line-height/controller.cs %}
482+
{% endhighlight %}
483+
{% endtabs %}
484+
485+
{% elsif page.publishingplatform == "aspnet-mvc" %}
486+
487+
{% tabs %}
488+
{% highlight razor tabtitle="CSHTML" %}
489+
{% include code-snippet/rich-text-editor/line-height/razor %}
490+
{% endhighlight %}
491+
{% highlight c# tabtitle="Controller.cs" %}
492+
{% include code-snippet/rich-text-editor/line-height/controller.cs %}
493+
{% endhighlight %}
494+
{% endtabs %}
495+
{% endif %}
496+
497+
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.
498+
499+
### Custom line height
500+
501+
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.
502+
503+
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.
504+
505+
{% if page.publishingplatform == "aspnet-core" %}
506+
507+
{% tabs %}
508+
{% highlight cshtml tabtitle="CSHTML" %}
509+
{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %}
510+
{% endhighlight %}
511+
{% highlight c# tabtitle="Controller.cs" %}
512+
{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
513+
{% endhighlight %}
514+
{% endtabs %}
515+
516+
{% elsif page.publishingplatform == "aspnet-mvc" %}
517+
518+
{% tabs %}
519+
{% highlight razor tabtitle="CSHTML" %}
520+
{% include code-snippet/rich-text-editor/line-height-cs1/razor %}
521+
{% endhighlight %}
522+
{% highlight c# tabtitle="Controller.cs" %}
523+
{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
524+
{% endhighlight %}
525+
{% endtabs %}
526+
{% endif %}
527+
466528
## Horizontal line
467529

468530
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.

0 commit comments

Comments
 (0)