diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-line-height.png b/blazor/rich-text-editor/images/blazor-richtexteditor-line-height.png new file mode 100644 index 0000000000..995071164f Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-line-height.png differ diff --git a/blazor/rich-text-editor/tools/code-snippet/line-height.razor b/blazor/rich-text-editor/tools/code-snippet/line-height.razor new file mode 100644 index 0000000000..20101442c8 --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/line-height.razor @@ -0,0 +1,30 @@ +@using Syncfusion.Blazor.RichTextEditor; + + + +

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:

+ +
+@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.LineHeight }, + }; + private List LineHeightItems = new() + { + new DropDownItemModel { Text = "Default", Value = "" }, + new DropDownItemModel { Text = "1", Value = "1" }, + new DropDownItemModel { Text = "1.15", Value = "1.15" }, + new DropDownItemModel { Text = "1.5", Value = "1.5" }, + new DropDownItemModel { Text = "2", Value = "2" }, + new DropDownItemModel { Text = "2.5", Value = "2.5" }, + new DropDownItemModel { Text = "3", Value = "3" } + }; +} \ No newline at end of file diff --git a/blazor/rich-text-editor/tools/text-formatting.md b/blazor/rich-text-editor/tools/text-formatting.md index 069da4b317..647f97c3cf 100644 --- a/blazor/rich-text-editor/tools/text-formatting.md +++ b/blazor/rich-text-editor/tools/text-formatting.md @@ -280,6 +280,40 @@ While the toolbar does not provide a direct method to apply blockquote formattin ![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-nested-quotation-formatting.png) +## LineHeight + +The Rich Text Editor supports applying line-height to block elements such as paragraphs, list items, headings, and table cells. It can be configured through a dedicated LineHeight dropdown in the toolbar and is saved as inline style on the affected blocks. + +### Key behaviors: +- Applies to full blocks. If a partial inline selection is made, the line height is applied to the parent block element. +- Works with undo/redo. Each change is tracked as a single history step. +- Saved HTML persists line-height via inline styles (for example, style="line-height: 1.5"). +- Mixed selection shows the first block’s value in the dropdown. + +### Configure LineHeight in the toolbar + +You can add the `LineHeight` tool in the Rich Text Editor using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +### Built-in LineHeight items + +The following table lists the default LineHeight items. + +| Default Key | Default Value | +|-----|--------------------------------------| +| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorLineHeight.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorLineHeight_Items) | new List<DropDownItemModel>()
{
    new DropDownItemModel() { Text = "Default", Value = "" },
    new DropDownItemModel() { Text = "1", Value = "1" },
    new DropDownItemModel() { Text = "1.15", Value = "1.15" },
    new DropDownItemModel() { Text = "1.5", Value = "1.5" },
    new DropDownItemModel() { Text = "2", Value = "2" },
    new DropDownItemModel() { Text = "2.5", Value = "2.5" },
    new DropDownItemModel() { Text = "3", Value = "3"}
}; | + +Example: Add the LineHeight tool and configure items + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/line-height.razor %} + +{% endhighlight %} +{% endtabs %} + +![Blazor RichTextEditor with LineHeight](../images/blazor-richtexteditor-line-height.png) + ## 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.