Blazor Block Editor Example - Paste Cleanup
Smart Paste Cleanup
Pasting content from external sources often introduces unwanted styles and inconsistent formatting. The Block Editor provides a powerful cleanup mechanism with customization options to maintain consistency and security.
Features
- Removes inline styles for cleaner markup.
- Preserves semantic structure like headings and paragraphs.
- Converts rich text into clean blocks for easy editing.
- Extracts links and mentions without clutter.
Customization options
You can configure paste cleanup behavior using the following settings:
- PlainText
- KeepFormat
- AllowedStyles
- DeniedTags
Events
Hooks for before and after paste actions:
Paste modes
- Keep Format: Retains allowed styles and structure.
- Plain Paste: Strips all styles and converts to plain text.
Why cleanup matters
Clean content improves:
- Readability: No distracting styles.
- Accessibility: Proper semantic tags.
- Consistency: Uniform styling across platforms.
- Security: Prevents malicious scripts or embeds.
Tip: Use paste cleanup to remove inline styles while retaining semantic structure.
Clean content is clear content.
Workflow
- Paste content from external sources.
- Review the cleaned output.
- Apply additional formatting if needed.
- Save and publish.
Insert Link
Properties
This sample demonstrates the Block Editor paste cleanup feature, which allows you to control how content is handled when pasted into the editor.
Use the following pasteCleanup settings to refine the pasted content:
- Plain Text: Pastes content as plain text.
- Keep Format: Retains the original formatting of the copied content.
- Denied tags: Specify tags to ignore when pasting HTML content.
['a[!href]']– Filters out anchor tags that do not include thehrefattribute.['a[href, target]']– Allows only anchor tags with thehrefandtargetattributes.
- AllowedStyles:Restrict pasted content to specific CSS style attributes.
['color', 'margin']– Allows only thecolorandmarginstyles on each pasted element.