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..8c55172c87 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs @@ -0,0 +1,52 @@ +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 = "1", + value = "1" + }; + object size2 = new + { + text = "1.15", + value = "1.15" + }; + object size3 = new + { + text = "1.5", + value = "1.5" + }; + object size4 = new + { + text = "2", + value = "2" + }; + object size5 = new + { + 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 new file mode 100644 index 0000000000..d7e149e361 --- /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("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 new file mode 100644 index 0000000000..9fdf2181ed --- /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 92258b869e..dcd04131f5 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,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/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. + +### 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. 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.