Paste Clean-up in Blazor RichTextEditor

29 Nov 202410 minutes to read

The Rich Text Editor offers a built-in option to paste content from Microsoft Word, Microsoft Outlook, Microsoft Excel, and other websites by filtering out tags, attributes, and styles. Copy content from Microsoft Office or other websites and paste it into the editor, where it is cleaned up and pasted based on the settings in the PasteCleanupSetting property values.

Paste settings

When pasting content into the editor, you can control the formatting and styles by using the PasteCleanupSettings property. The following settings are available to clean up the content:

API	Description	Default Value	Type
Prompt	To invoke prompt dialog with paste options on pasting the content in editor.	false	boolean
PlainText	To paste the content as plain text.	false	boolean
KeepFormat	To keep the same format with copied content.	true	boolean
DeniedTags	To ignore the tags when pasting HTML content.	null	string[]
DeniedAttributes	To paste the content by filtering out these attributes from the content.	null	string[]
AllowedStyleProperties	To paste the content by accepting these style attributes and removing other style attributes.	[background, background-color, border, border-bottom, border-left, border-radius, border-right, border-style, border-top, border-width, clear, color, cursor, direction, display, float, font, font-family, font-size, font-weight, font-style, height, left, line-height, margin, margin-top, margin-left, margin-right, margin-bottom, max-height, max-width, min-height, min-width, overflow, overflow-x, overflow-y, padding, padding-bottom, padding-left, padding-right, padding-top, position, right, table-layout, text-align, text-decoration, text-indent, top, vertical-align, visibility, white-space, width]	string[]

Paste options in prompt dialog

When Prompt is set to true, pasting the content in the editor opens a dialog box with three options as radio buttons: keep, clean, and plain text.

Keep: To keep the same format with copied content.
Clean: To clear all the style formats with copied content.
Plain Text: To paste the copied content as plain text without any formatting or style (including the removal of all tags).

NOTE

When the Prompt value is set to true, the API properties PlainText and KeepFormat will not be considered for processing when pasting the content.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorPasteCleanupSettings Prompt="true"/>
    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
    <p><b>Paste Cleanup properties:</b></p>
    <ul>
        <li><p>prompt - specifies whether to enable the prompt when pasting in Rich Text Editor.</p></li>
    </ul>
</SfRichTextEditor>

Blazor RichTextEditor with prompt

Paste as plain text

When PlainText is set to true, the copied content will be converted to plain text by removing all the HTML tags and styles applied to it, and only the plain text is pasted in the editor.

NOTE

When PlainText value is set true, the API property Prompt should be set to false, and KeepFormat will not be considered for processing when pasting the content.

RAZOR
@using Syncfusion.Blazor.RichTextEditor  

<SfRichTextEditor> 

 <RichTextEditorPasteCleanupSettings PlainText="true" Prompt="false"/> 

 <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p> 

 </SfRichTextEditor>

Blazor RichTextEditor with plain text

Keep format

When KeepFormat is set to true, the copied content will maintain all the style formatting allowed in the AllowedStyleProperties when pasting the content in the editor.

When KeepFormat is set to false, the style in the copied content will be removed without considering the allowed styles in the AllowedStyleProperties when pasting the content in the editor.

NOTE

When the KeepFormat value is set to true, the API properties Prompt and PlainText should be set to false.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorPasteCleanupSettings KeepFormat="true" PlainText="false" Prompt="false"/>
    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
    <p><b>Paste Cleanup properties:</b></p>
    <ul>
        <li><p>keepFormat- specifies whether to keep or remove the format when pasting in Rich Text Editor.</p></li>
    </ul>
</SfRichTextEditor>

Blazor RichTextEditor with keep format

Denied tags

The DeniedTags specify the tags to restrict when pasting the content into the Rich Text Editor.

a: Paste the content by filtering out anchor tags.
a[!href]: Paste the content by filtering out anchor tags that do not have the ‘href’ attribute.
a[href, target]: Paste the content by filtering out anchor tags that have the ‘href’ and ‘target’ attributes.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorPasteCleanupSettings DeniedTags="@DeniedTag" />
    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
    <p><b>Paste Cleanup properties:</b></p>
    <ul>
        <li><p>deniedTags - specifies the tags to restrict when pasting in Rich Text Editor.</p></li>
    </ul>
</SfRichTextEditor>

@code {
    private string[] DeniedTag = new string[] { "a", "a[!href]" };
}

Blazor RichTextEditor with denied tags

Denied attributes

The DeniedAttributes property specifies the attributes to restrict when pasting the content into the Rich Text Editor.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorPasteCleanupSettings DeniedAttributes="@DeniedAttributes" />
    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
    <p><b>Paste Cleanup properties:</b></p>
    <ul>
        <li><p>deniedAttributes - specifies the attributes to restrict when pasting in Rich Text Editor.</p></li>
    </ul>
</SfRichTextEditor>

@code {
    private string[] DeniedAttributes = new string[] { "class", "title", "id" };
}

Blazor RichTextEditor with denied attribute

Allowed style properties

When you configure AllowedStyleProperties, only the styles that match the allowed style properties list are allowed. All other style properties will be removed on pasting the content into the editor.

For Example, public string[] AllowedStyles = new string[] { “color”, “margin” }; This will allow only the style properties ‘color’ and ‘margin’ in each pasted element.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorPasteCleanupSettings AllowedStyleProperties="@AllowedStyles" />
    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
    <p><b>Paste Cleanup properties:</b></p>
    <ul>
        <li><p>allowedStyleProperties - specifies the allowed style properties when pasting in Rich Text Editor.</p></li>
    </ul>
</SfRichTextEditor>

@code {
    private string[] AllowedStyles = new string[] { "color", "margin", "font-size" };
}

Blazor RichTextEditor with allowed styles

Pasting large text content

When pasting a large text into the editor it displays Attempting to reconnect and then the text gets inserted. To achieve this, you can increase the SignalR size at the application level by adding the signalR method with a larger buffer size(1024000000).

Blazor Server App

For .NET 6 and .NET 7 app, open the ~/Program.cs file and register the Syncfusion^® Blazor Service.

.NET 6 & .NET 7 (~/Program.cs)
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();
services.AddSignalR(e => { e.MaximumReceiveMessageSize = 1024000000; });

var app = builder.Build();
....

Blazor WebAssembly App

Open ~/Program.cs file and register the Syncfusion^® Blazor Service in the client web app.

.NET 6 & .NET 7 (~/Program.cs)
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSignalR(e => { e.MaximumReceiveMessageSize = 1024000000; });
await builder.Build().RunAsync();
....

Get pasted content

You can get the pasted text as HTML text using the AfterPasteCleanup event argument value.

RAZOR
<SfRichTextEditor @ref="RteObj" @bind-Value="htmlText" EditorMode="EditorMode.HTML">
    <RichTextEditorEvents AfterPasteCleanup="@AfterPasteCleanupHandler" />
</SfRichTextEditor>

@code {
    public void AfterPasteCleanupHandler(PasteCleanupArgs args)
    {
        // Here you can get the pasted Html string using args.Value
    }
}

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to know how to render and configure the rich text editor tools.