diff --git a/blazor-toc.html b/blazor-toc.html index 0f7750691a..73eb53a9d9 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -4157,6 +4157,7 @@
  • Table manipulation
  • Code Block
  • Paste Clean-up
    • +
  • Clipboard Clean-up
  • Enter Key Configuration
  • Undo Redo Manager
  • Import/Export
    • diff --git a/blazor/rich-text-editor/clipboard-cleanup.md b/blazor/rich-text-editor/clipboard-cleanup.md new file mode 100644 index 0000000000..27cfd408a8 --- /dev/null +++ b/blazor/rich-text-editor/clipboard-cleanup.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Clipboard Clean-up in Blazor Rich Text Editor | Syncfusion +description: Checkout and learn here all about Clipboard Clean-up in Syncfusion Blazor Rich Text Editor component and more. +platform: Blazor +control: RichTextEditor +documentation: ug +--- + +# Clipboard Clean-up in Blazor Rich Text Editor + +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. + +It can be verified by following the below steps: + +- Copy or cut content within the Rich Text Editor. +- Paste the content back into the editor. +- Observe that unnecessary inline styles are removed while essential elements such as tables, lists, and images remain intact. + +By default, `EnableClipboardCleanup` is set to `true`. Check with the below demonstration: + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/clipboard-cleanup-default.razor %} + +{% endhighlight %} +{% endtabs %} + +![Blazor RichTextEditor with default clipboard cleanup](./images/blazor-richtexteditor-clipboard-cleanup-default.png) + +When set to `false`, the browser’s default copy and cut behavior applies. Check with the below demonstration: + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/clipboard-cleanup-custom.razor %} + +{% endhighlight %} +{% endtabs %} + +![Blazor RichTextEditor with clipboard cleanup disabled](./images/blazor-richtexteditor-clipboard-cleanup-custom.png) diff --git a/blazor/rich-text-editor/code-snippet/clipboard-cleanup-custom.razor b/blazor/rich-text-editor/code-snippet/clipboard-cleanup-custom.razor new file mode 100644 index 0000000000..61f6c1a1fe --- /dev/null +++ b/blazor/rich-text-editor/code-snippet/clipboard-cleanup-custom.razor @@ -0,0 +1,11 @@ +@using Syncfusion.Blazor.RichTextEditor + + +

    Clipboard Cleanup Disabled

    +

    The Rich Text Editor uses the browser’s default copy and cut behavior when clipboard cleanup is disabled.

    +

    Key Points:

    + +     \ No newline at end of file diff --git a/blazor/rich-text-editor/code-snippet/clipboard-cleanup-default.razor b/blazor/rich-text-editor/code-snippet/clipboard-cleanup-default.razor new file mode 100644 index 0000000000..3dafb8fee0 --- /dev/null +++ b/blazor/rich-text-editor/code-snippet/clipboard-cleanup-default.razor @@ -0,0 +1,11 @@ +@using Syncfusion.Blazor.RichTextEditor + + +

    Clipboard Cleanup – Default Behavior

    +

    The Rich Text Editor automatically cleans up clipboard content during copy and cut operations to ensure clean formatting.

    +

    Key Features:

    + +     \ No newline at end of file diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-custom.png b/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-custom.png new file mode 100644 index 0000000000..c31b8d8dc5 Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-custom.png differ diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-default.png b/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-default.png new file mode 100644 index 0000000000..73d2c2066d Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-clipboard-cleanup-default.png differ 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 9e4996133b..bf10d5857b 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 + +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. + +### 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.