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: components/editor/paste-cleanup.md
+27-38Lines changed: 27 additions & 38 deletions
Original file line number
Diff line number
Diff line change
@@ -9,19 +9,14 @@ position: 70
9
9
10
10
# Editor Paste Cleanup
11
11
12
-
The Telerik Editor component for Blazor can improve the quality of the content pasted into it by removing tags and attributes, and by fixing issues such as lists pasted from Microsoft Word.
The Telerik Editor component for Blazor can improve the quality of pasted content by removing invalid or unwanted tags and attributes. The Editor can also fix issues such as non-semantic lists pasted from Microsoft Word.
20
13
21
14
22
15
## Basics
23
16
24
-
To control the behavior of the editor when content is pasted, you can set the desired parameters to its `EditorPasteSettings` tag that you can find under the `EditorSettings` tag.
17
+
To enable paste cleanup, add the `<EditorPasteSettings>` tag as a child of the `<EditorSettings>` tag. The Editor does not perform paste cleanup by default.
18
+
19
+
To configure the behavior of the Editor when content is pasted, set the desired parameters in the `EditorPasteSettings` tag.
25
20
26
21
>caption Set pasting behaviors in the Telerik Editor
27
22
@@ -42,7 +37,7 @@ To control the behavior of the editor when content is pasted, you can set the de
42
37
</EditorSettings>
43
38
</TelerikEditor>
44
39
45
-
The editor content as a string so you can see the differences with the original content above:
40
+
The Editor content as a string so you can see the differences with the original content above:
46
41
<br />
47
42
@EditorValue
48
43
@@ -53,9 +48,10 @@ The editor content as a string so you can see the differences with the original
53
48
}
54
49
````
55
50
56
-
## Paste Settings Features
57
51
58
-
The following list describes the behaviors and functionality each parameter of the `EditorPasteSettings` provides:
52
+
## Paste Settings
53
+
54
+
The following list describes the behaviors and functionality of each parameter of `EditorPasteSettings`. The default values apply only if the `<EditorPasteSettings>` tag is present in the Editor markup.
59
55
60
56
*`ConvertMsList` - `bool` - If set to `true` (defaults to `true`), MS Word lists will be converted into HTML lists. By default, Word's list are paragraphs with the respective styling which is not accurate in html.
61
57
@@ -73,49 +69,42 @@ For example, `<!-- comment --> <p> content </p>` will result in `<p> content </p
73
69
*`RemoveAttributes` - `List<string>` - Specifies the DOM attributes that should be removed from the HTML. For example, when set to `{ "lang" }` , pasting `<p><span lang=EN-US>content</span></p>` will result in `<p><span>content</span></p>`.
74
70
75
71
72
+
## Paste Images from Microsoft Word
76
73
77
-
## Notes
78
-
79
-
This section provides information on a few key concepts and behaviors that you should be aware of:
80
-
81
-
*[Content Size](#content-size)
82
-
*[Content Sanitization](#content-sanitization)
83
-
*[Paste Text and Image from MS Word](#paste-text-and-image-from-ms-word)
74
+
If you copy both text and an image from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.
84
75
76
+
Instead of reading the image data and loading it as a `base64` string to the `src` attribute of the `<img> `element, the browser generates an `<img>` tag which points to the clipboard location of the file on the client machine.
A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: `"Not allowed to load local resource: <some image path>"`.
88
79
89
-
### Content Sanitization
80
+
You can read more about this in <ahref="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource"target="_blank">this StackOverflow thread</a>.
90
81
91
-
>caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be intercepted and altered maliciously if the application is not secured. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
To work around this browser behavior, copy only the text or a single image from the MS Word document, and paste the image in the content area of the Editor separately.
95
85
96
-
The editor clears `<script>` tags and removes DOM event handler attributes (e.g., `<img onerror="code();" onclick="otherCode();" alt="lorem ipsum" />` will become `<img alt="lorem ipsum" />`). The user can still alter this and data can be modified during transmission as well, as explained above.
86
+
By default, the browser allows you to copy and paste a single image from Word in the Editor by converting its `src` to a `base64` string.
97
87
98
-
>tip To clean up content and ensure it is safe, before you store and reuse it, you can consider ready-made HTML sanitization libraries that are available on free package sources like nuget.org. While Telerik is not in a position to recommend particular packages, we recommend you consider such an approach.
88
+
If you paste more images at the same time, their `src` attributes will not be converted to `base64` strings and the browser will paste them with their `http` protocol and `URL` pointing to the physical folder which will result in the error described above.
99
89
100
-
### Paste Text and Image from MS Word
101
90
102
-
If you copy both text and an image from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.
91
+
## Content Size
103
92
104
-
Instead of reading the image data and loading it as a `base64` string to the `src` attribute of the `<img> `element, the browser generates an `<img>` tag which points to the clipboard location of the file on the client machine.
A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: `"Not allowed to load local resource: <some image path>"`.
95
+
## Content Sanitization
107
96
108
-
You can read more about this in <ahref="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource"target="_blank">this StackOverflow thread</a>.
97
+
>caution The content cleaning the Editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be intercepted and altered maliciously if the application is not secured. Therefore, the paste cleanup functionality of the Editor cannot and does not replace content sanitization according to the application's standards and logic.
To work around this browser behavior, copy only the text or a single image from the MS Word document, and paste the image in the content area of the Editor separately.
102
+
The Editor clears `<script>` tags and removes DOM event handler attributes (e.g., `<img onerror="code();" onclick="otherCode();" alt="lorem ipsum" />` will become `<img alt="lorem ipsum" />`). The user can still alter this and data can be modified during transmission as well, as explained above.
113
103
114
-
By default, the browser allows you to copy and paste a single image from Word in the Editor by converting its `src` to a `base64` string.
104
+
>tip To clean up content and ensure it is safe, before you store and reuse it, you can consider ready-made HTML sanitization libraries that are available on free package sources like nuget.org. While Telerik is not in a position to recommend particular packages, we recommend you consider such an approach.
115
105
116
-
If you paste more images at the same time, their `src` attributes will not be converted to `base64` strings and the browser will paste them with their `http` protocol and `URL` pointing to the physical folder which will result in the error described above.
The following code snippets show the built-in toolset configurations in `EditorToolSets`. See the [Built-in Editor Tools]({%slug editor-built-in-tools%}) article for more information on each tool.
0 commit comments