Rich Text Editor / Paste Cleanup

Blazor Rich Text Editor Example - Paste Cleanup

Loading Syncfusion Blazor Server Demos…

Format Option
Denied Tags
Denied Attributes
Allowed Style Properties

This example demonstrates the paste options in the Rich Text Editor control. The Blazor Rich Text Editor offers built-in options to paste content from Microsoft Word, Microsoft Outlook, Microsoft Excel, and other websites by filtering out unwanted 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 properties panel.

The Rich Text Editor allows pasting HTML content from Microsoft Word, Microsoft Outlook, Microsoft Excel, and other websites. The editor cleans up the pasted HTML content by:

  • Converting unformatted HTML elements (MOS XML format) to standard HTML elements.
  • Converting Microsoft Office prefixed style properties to proper CSS style properties.
  • Removing unwanted tags, CSS styles, and comments from the copied content.

The Rich Text Editor cleans up the pasted content based on properties of RichTextEditorPasteCleanupSettings:

  • Select any option in the Format Option dropdown list for the paste content:

    • Select the Prompt option to invoke a prompt dialog with paste options.
    • Select the Plain Text option to paste content as plain text.
    • Select the Keep Format option to keep the same format in copied content.
    • Select the Clean Format option to remove style formatting from copied content.
  • Fill the Denied Tags textbox to ignore tags when pasting HTML content:

    • ['a[!href]'] - Paste content by filtering anchor tags without the 'href' attribute.
    • ['a[href, target]'] - Paste content by filtering anchor tags with 'href' and 'target' attributes.
  • Fill the Denied Attributes to paste content by filtering out these attributes:

    • ['id', 'title'] - Removes the 'id' and 'title' attributes from all tags.
  • Fill the Allowed Style Properties to paste content by accepting only these style attributes:

    • ['color', 'margin'] - Allows only 'color' and 'margin' style properties in each pasted element.
Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE