Skip to content

Commit 7fea9f0

Browse files
saravanangnsaravanangn
authored
Merge pull request #7210 from syncfusion-content/990376-LineHeight
990376: Added UG Documentation for LineHeight and Clipboard cleanup feature.
2 parents 6aabd84 + 577da64 commit 7fea9f0

9 files changed

+129
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4157,6 +4157,7 @@
41574157
<li><a href="/blazor/rich-text-editor/tools/table-manipulation">Table manipulation</a></li>
41584158
<li><a href="/blazor/rich-text-editor/tools/code-block">Code Block</a></li>
41594159
<li> <a href="/blazor/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
4160+
<li> <a href="/blazor/rich-text-editor/clipboard-cleanup">Clipboard Clean-up</a></li>
41604161
<li> <a href="/blazor/rich-text-editor/enter-key">Enter Key Configuration</a></li>
41614162
<li> <a href="/blazor/rich-text-editor/undo-redo-manager">Undo Redo Manager</a></li>
41624163
<li> <a href="/blazor/rich-text-editor/import-and-export">Import/Export</a></li>

‎blazor/rich-text-editor/clipboard-cleanup.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
title: Clipboard Clean-up in Blazor Rich Text Editor | Syncfusion
4+
description: Checkout and learn here all about Clipboard Clean-up in Syncfusion Blazor Rich Text Editor component and more.
5+
platform: Blazor
6+
control: RichTextEditor
7+
documentation: ug
8+
---
9+
10+
# Clipboard Clean-up in Blazor Rich Text Editor
11+
12+
The Rich Text Editor now provides automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are removed while preserving important structural elements such as tables, lists, and images. This feature is enabled by default through [EnableClipboardCleanup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableClipboardCleanup) property.
13+
14+
It can be verified by following the below steps:
15+
16+
- Copy or cut content within the Rich Text Editor.
17+
- Paste the content back into the editor.
18+
- Observe that unnecessary inline styles are removed while essential elements such as tables, lists, and images remain intact.
19+
20+
By default, `EnableClipboardCleanup` is set to `true`. Check with the below demonstration:
21+
22+
{% tabs %}
23+
{% highlight razor %}
24+
25+
{% include_relative code-snippet/clipboard-cleanup-default.razor %}
26+
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
![Blazor RichTextEditor with default clipboard cleanup](./images/blazor-richtexteditor-clipboard-cleanup-default.png)
31+
32+
When set to `false`, the browser’s default copy and cut behavior applies. Check with the below demonstration:
33+
34+
{% tabs %}
35+
{% highlight razor %}
36+
37+
{% include_relative code-snippet/clipboard-cleanup-custom.razor %}
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
![Blazor RichTextEditor with clipboard cleanup disabled](./images/blazor-richtexteditor-clipboard-cleanup-custom.png)

‎blazor/rich-text-editor/code-snippet/clipboard-cleanup-custom.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using Syncfusion.Blazor.RichTextEditor
2+
3+
<SfRichTextEditor EnableClipboardCleanup="false">
4+
<h3>Clipboard Cleanup Disabled</h3>
5+
<p>The Rich Text Editor uses the browser’s default copy and cut behavior when clipboard cleanup is disabled.</p>
6+
<p><b>Key Points:</b></p>
7+
<ul>
8+
<li>No cleanup is applied; original styles remain intact.</li>
9+
<li>Content is copied exactly as it appears in the editor.</li>
10+
</ul>
11+
</SfRichTextEditor>

‎blazor/rich-text-editor/code-snippet/clipboard-cleanup-default.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using Syncfusion.Blazor.RichTextEditor
2+
3+
<SfRichTextEditor>
4+
<h3>Clipboard Cleanup – Default Behavior</h3>
5+
<p>The Rich Text Editor automatically cleans up clipboard content during copy and cut operations to ensure clean formatting.</p>
6+
<p><b>Key Features:</b></p>
7+
<ul>
8+
<li>Removes unwanted inline styles from copied or cut content.</li>
9+
<li>Preserves essential elements like tables, lists, and images.</li>
10+
</ul>
11+
</SfRichTextEditor>

‎blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-custom.png‎

30.1 KB
Loading

‎blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-default.png‎

5.7 KB
Loading

‎blazor/rich-text-editor/images/blazor-richtexteditor-line-height.png‎

68.4 KB
Loading

‎blazor/rich-text-editor/tools/code-snippet/line-height.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@using Syncfusion.Blazor.RichTextEditor;
2+
<SfRichTextEditor>
3+
<RichTextEditorToolbarSettings Items="@Items" />
4+
<RichTextEditorLineHeight Items="@LineHeightItems" Default="Default"></RichTextEditorLineHeight>
5+
<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>
6+
<p><b> Key features:</b></p>
7+
<ul>
8+
<li><p>Provides a <b>Line Height</b> dropdown in the toolbar for easy access.</p></li>
9+
<li><p>Supports applying line-height to paragraphs, headings, lists, and table cells.</p></li>
10+
<li><p>Applies line-height as inline styles for consistent and precise text rendering.</p></li>
11+
<li><p>Ensures consistent appearance across devices and print layouts.</p></li>
12+
<li><p>Improves text readability and overall document aesthetics.</p></li>
13+
</ul>
14+
</SfRichTextEditor>
15+
@code {
16+
private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
17+
{
18+
new ToolbarItemModel() { Command = ToolbarCommand.LineHeight },
19+
};
20+
private List<DropDownItemModel> LineHeightItems = new()
21+
{
22+
new DropDownItemModel { Text = "Default", Value = "" },
23+
new DropDownItemModel { Text = "1", Value = "1" },
24+
new DropDownItemModel { Text = "1.15", Value = "1.15" },
25+
new DropDownItemModel { Text = "1.5", Value = "1.5" },
26+
new DropDownItemModel { Text = "2", Value = "2" },
27+
new DropDownItemModel { Text = "2.5", Value = "2.5" },
28+
new DropDownItemModel { Text = "3", Value = "3" }
29+
};
30+
}

‎blazor/rich-text-editor/tools/text-formatting.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,40 @@ While the toolbar does not provide a direct method to apply blockquote formattin
280280

281281
![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-nested-quotation-formatting.png)
282282

283+
## LineHeight
284+
285+
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.
286+
287+
### Key behaviors:
288+
- Applies to full blocks. If a partial inline selection is made, the line height is applied to the parent block element.
289+
- Works with undo/redo. Each change is tracked as a single history step.
290+
- Saved HTML persists line-height via inline styles (for example, style="line-height: 1.5").
291+
- Mixed selection shows the first block’s value in the dropdown.
292+
293+
### Configure LineHeight in the toolbar
294+
295+
The `LineHeight` tool can be configured 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.
296+
297+
### Built-in LineHeight items
298+
299+
The following table lists the default LineHeight items.
300+
301+
| Default Key | Default Value |
302+
|-----|--------------------------------------|
303+
| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorLineHeight.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorLineHeight_Items) | new List&lt;DropDownItemModel&gt;()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Default", Value = "" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1", Value = "1" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1.15", Value = "1.15" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1.5", Value = "1.5" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "2", Value = "2" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "2.5", Value = "2.5" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "3", Value = "3"}<br>}; |
304+
305+
Example: Add the LineHeight tool and configure items
306+
307+
{% tabs %}
308+
{% highlight razor %}
309+
310+
{% include_relative code-snippet/line-height.razor %}
311+
312+
{% endhighlight %}
313+
{% endtabs %}
314+
315+
![Blazor RichTextEditor with LineHeight](../images/blazor-richtexteditor-line-height.png)
316+
283317
## Horizontal line
284318

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