You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ej2-javascript/rich-text-editor/paste-cleanup.md
+43-24Lines changed: 43 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
layout: post
3
3
title: Paste cleanup in ##Platform_Name## Rich text editor control | Syncfusion
4
-
description: Learn here all about Paste cleanup in Syncfusion ##Platform_Name## Rich text editor control of Syncfusion Essential JS 2 and more.
4
+
description: Learn how to configure Paste Cleanup in the Syncfusion ##Platform_Name## Rich text editor control of Syncfusion Essential JS 2 and more.
5
5
platform: ej2-javascript
6
6
control: Paste cleanup
7
7
publishingplatform: ##Platform_Name##
@@ -11,75 +11,94 @@ domainurl: ##DomainURL##
11
11
12
12
# Paste Cleanup in ##Platform_Name## Rich Text Editor control
13
13
14
-
The Rich Text Editor simplifies the conversion of Microsoft Word content to HTML format, preserving formatting and styles. The `pasteCleanup` settings property allows you to control the formatting and styles when pasting content into the editor. The following settings are available to clean up the content:
14
+
The Rich Text Editor simplifies the conversion of Microsoft Word content to HTML format, preserving formatting and styles. The `pasteCleanup` settings property (see [pasteCleanupSettingsModel](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/)) allows you to control the formatting and styles when pasting content into the editor. The following settings are available to clean up the content:
|[prompt](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#prompt)|Displays a dialog box when content is pasted, allowing users to choose how the content should be inserted—either as plain text, with formatting, or cleaned HTML. | false | boolean |
19
+
|[plainText](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#plaintext)| Paste the content as plain text| false | boolean |
20
+
|[keepFormat](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#keepformat)|Retains the original formatting of the pasted content, including styles, fonts, and structure.| true | boolean |
21
+
|[deniedTags](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#deniedtags)|Specifies a list of HTML tags to be removed from the pasted content, such as `<script>`, `<iframe>`, or `<style>`. Helps eliminate unwanted or unsafe elements. | null | string[]|
22
+
|[deniedAttrs](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#deniedattrs)| Filters out specified attributes from the pasted content| null | string[]|
23
+
|[allowedStyleProps](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#allowedstyleprops)|See the full list of allowed properties in the [documentation link here](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#pastecleanupsettings)| string[]|
24
24
25
25
> Rich Text Editor features are segregated into individual feature-wise modules. To use paste cleanup, inject PasteCleanup module using the `RichTextEditor.Inject(PasteCleanup)`.
26
26
27
27
## Paste options in the prompt dialog
28
28
29
29
When `prompt` is set to true, pasting the content in the editor will open a dialog box that contains three options `Keep`, `Clean`, and `Plain Text` as radio buttons:
30
+
31
+
32
+
30
33
1.`Keep`: Maintains the same format as the copied content.
31
34
2.`Clean`: Clears all style formats from the copied content.
32
35
3.`Plain Text`: Pastes the copied content as plain text without any formatting or style. (including the removal of all tags).
33
36
34
-
> When `prompt` value is set true, the API properties [plainText](#plain-text) and [keepFormat](#keep-format) will not be considered for processing when pasting the content.
37
+
> When `prompt` value is set true, the API properties [plainText](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#plaintext) and [keepFormat](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#keepformat) will not be considered for processing when pasting the content.
35
38
36
-
## How to paste as plain text
39
+
## Plain text pasting
37
40
38
41
Setting `plainText` to true converts the copied content to plain text by removing all HTML tags and styles. Only the plain text is pasted into the editor.
39
42
40
43
>When `plainText` is set to true, set `prompt` to false. The `keepFormat` property will not be considered.
41
44
42
-
## Keep format option
45
+
## Keep format
43
46
44
-
When `keepFormat` is set to true, the copied content maintains all style formatting allowed in the `allowedStyleProps` when pasted into the editor.
47
+
When `keepFormat` is set to `true`, the pasted content retains its original formatting, including styles, fonts, and structure. However, the formatting is still subject to filtering based on the `allowedStyleProps`, `deniedTags`, and `deniedAttrs` settings:
45
48
46
-
If `keepFormat` is set to false, all styles in the copied content are removed, regardless of the `allowedStyleProps` settings.
49
+
* Only the style properties listed in `allowedStyleProps` will be preserved.
50
+
* Any HTML tags listed in `deniedTags` will be removed.
51
+
* Any attributes listed in `deniedAttrs` will be stripped from the pasted content.
52
+
53
+
This ensures that while the formatting is retained, it remains clean, safe, and consistent with your application's styling rules.
47
54
48
55
>When `keepFormat` is set to true, set both `prompt` and `plainText` to false.
49
56
50
-
## Cleaning formatting during paste
57
+
## Clean formating
58
+
59
+
When the `prompt`, `plainText`, and `keepFormat` options are all set to false, the Rich Text Editor performs clean format paste cleanup. In this mode, all inline styles from the pasted content are removed, eliminating any custom or external styling. This ensures a consistent and uniform appearance within the editor.
51
60
52
-
Setting `cleanFormat` to true removes all applied styles from the pasted content while retaining all other HTML tags in the editor.
61
+
Despite the removal of styling, essential structural HTML tags such as `<p>`, `<ul>`, `<table>`, and others are preserved. This maintains the original layout and semantic integrity of the content, allowing it to remain well-structured and readable.However, the formatting is still subject to filtering based on the `deniedTags`, and `deniedAttrs` settings:
53
62
54
-
>When `cleanFormat` is set to true, set `prompt`, `plainText`, and `keepFormat` to false.
63
+
-**`deniedTags`**: Tags listed here will still be removed from the pasted content.
64
+
-**`deniedAttrs`**: Attributes listed here will also be stripped from the pasted content.
55
65
56
-
## Denied tags during paste
66
+
> The `allowedStyleProps` setting only applies if `keepFormat` is enabled.
67
+
68
+
## Denied tags
57
69
58
70
When `deniedTags` values are set, the specified tags will be removed from the pasted content. For example,
59
71
60
72
*`'a'`: Removes all anchor tags.
61
73
*`'a[!href]'`: Removes anchor tags without the 'href' attribute.
62
74
*`'a[href, target]'`: Removes anchor tags with both 'href' and 'target' attributes.
63
75
64
-
## Denied attributes during paste
76
+
> This setting is ignored when `plainText` is set to `true`. <br>
77
+
It only works when either `keepFormat` is set to `true`, or when `prompt`, `plainText`, and `keepFormat` are all set to `false`, which triggers clean format behavior.
78
+
79
+
## Denied attributes
65
80
66
81
When `deniedAttrs` values are set, the specified attributes will be removed from all tags in the pasted content. For example,
67
82
68
83
`'id', 'title'`: Removes 'id' and 'title' attributes from all tags.
69
84
85
+
> This setting is ignored when `plainText` is set to `true`. <br>
86
+
It only works when either `keepFormat` is set to `true`, or when `prompt`, `plainText`, and `keepFormat` are all set to `false`, which triggers clean format behavior.
87
+
70
88
## Allowing specific style properties
71
89
72
-
By default, the following basic styles are allowed on pasting the content to the editor.
90
+
By default, a predefined set of basic style properties are allowed when content is pasted into the Rich Text Editor.
When you configure the [allowedStyleProps](https://ej2.syncfusion.com/documentation/api/rich-text-editor/pasteCleanupSettingsModel/#allowedstyleprops) setting, only the styles that match the specified list of allowed properties will be retained. All other style properties will be removed from the pasted content.
93
+
You can find the full list of allowed style properties in the [official Syncfusion documentation](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#pastecleanupsettings).
75
94
76
-
When you configure allowedStyleProps, the styles, which matches the ‘allowed style properties’ list are allowed, all other style properties will be removed on pasting the content in the editor.
95
+
> This setting works only when `keepFormat` is set to true. If `keepFormat` is `false` or `plainText` is `true`, style filtering via `allowedStyleProps` will not be applied.
77
96
78
97
For Example,
79
98
80
99
`allowedStyleProps: ['color', 'margin']'`: This will allow only the style properties ‘color’ and ‘margin’ in each pasted element.
81
100
82
-
In the following example, the paste cleanup related settings are explained with its module configuration:
101
+
In the following example, the paste cleanup related settings are explained with its module configuration:
83
102
84
103
{% if page.publishingplatform == "typescript" %}
85
104
@@ -139,9 +158,9 @@ You can get the pasted text as HTML using the [afterPasteCleanup](https://helpej
The Rich Text Editor enables the customization of copied content prior to pasting it into the editor. By configuring the [afterPasteCleanUp](https://helpej2.syncfusion.com/documentation/api/rich-text-editor/#afterpastecleanup) event, users can exercise precise control over formatting and content modifications after the paste action is executed.
163
+
The Rich Text Editor enables the customization of copied content prior to pasting it into the editor. By configuring the [afterPasteCleanUp](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#afterpastecleanup) event, users can exercise precise control over formatting and content modifications after the paste action is executed.
145
164
146
165
In the following example, the `afterPasteCleanUp` event is configured to remove images from the copied content. To understand this feature better, try pasting content that includes an image into the editor.
0 commit comments