diff --git a/_contentTemplates/editor/general.md b/_contentTemplates/editor/general.md new file mode 100644 index 0000000000..da4476c87e --- /dev/null +++ b/_contentTemplates/editor/general.md @@ -0,0 +1,16 @@ +#app-must-sanitize-content +The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns). +#end + +#content-size-signalr +Content in the editor can become very large. For example, the user may have pasted an entire document, or pasted content has an image that will get converted to its `base64` representation that is rather large. With a server-side Blazor application, large content can cause the SignalR connection to drop because the content might exceed its limit. To cater for such cases, you may need to increase that packet limit. You can do that with a line similar to this: + + +**C#** + + services.AddServerSideBlazor().AddHubOptions(o => + { + o.MaximumReceiveMessageSize = 4 * 1024 * 1024; // 4MB + }); + +#end \ No newline at end of file diff --git a/components/editor/overview.md b/components/editor/overview.md index 394b3daf2b..8e78edbb58 100644 --- a/components/editor/overview.md +++ b/components/editor/overview.md @@ -96,9 +96,11 @@ You can use the following features to get or set the editor content: * The `ValueChanged` [event]({%slug editor-events%}) lets you receive the value and act on it. If you use the `ValueChanged` event (no two-way binding), you can effectively cancel the user's input by not updating the view-model, or you can even alter it with something else. ->important The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns). +>important @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content) +@[template](/_contentTemplates/editor/general.md#content-size-signalr) + ## Methods The editor [reference](#component-reference) exposes the `ExecuteAsync` method which lets you call programmatically the tools and commands of the editor (such as the Bold too, or a Back Color tool, or inserting HTML). diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md new file mode 100644 index 0000000000..d404624e67 --- /dev/null +++ b/components/editor/paste-cleanup.md @@ -0,0 +1,121 @@ +--- +title: Paste Cleanup +page_title: Editor - Paste Cleanup +description: Paste Cleanup of the content of the Editor for Blazor, such as from MS Word. +slug: editor-paste-cleanup +tags: telerik,blazor,editor,paste,cleanup +position: 70 +--- + +# Editor Paste Cleanup + +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. + +#### In this article + + +* [Basics](#basics) +* [Paste Settings Features](#paste-settings-features) +* [Notes](#notes) + + +## Basics + +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. + +>caption Set pasting behaviors in the Telerik Editor + +````CSHTML +

Copy this paragraph that has some inline font and inline styles and paste it in the Editor.

+ +@* Some sample paste cleanup settings to showcase their usage- the first three ones are commonly used for MS Word and these are their default values *@ + + + + + + + + +The editor content as a string so you can see the differences with the original content above: +
+@EditorValue + +@code { + public string EditorValue { get; set; } + public List RemoveAttributes { get; set; } = new List() { "data-id" }; + public List StripTags { get; set; } = new List() { "font" }; +} +```` + +## Paste Settings Features + +The following list describes the behaviors and functionality each parameter of the `EditorPasteSettings` provides: + +* `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. + +* `RemoveHtmlComments` - `bool` - If set to `true`, comments will be removed from the HTML. +For example, `

content

` will result in `

content

` + +* `RemoveAllAttributes` - `bool` - Determines whether all DOM attributes should be stripped. Takes precedence over `RemoveMsClasses`, `removeMsStyles`, `RemoveAttributes`. + +* `RemoveMsClasses` - `bool` - If set to `true` (defaults to `true`), class attributes starting with `Mso` will be removed from the HTML. These are usually classes that come with content pasted from MS Word. For example, `

pasted from MS Word

` will result in `

pasted from MS Word

`. + +* `RemoveMsStyles` - `bool`- If set to `true` (defaults to `true`), style attributes starting with `Mso` will be removed from the HTML. These are usually styles that come with content pasted from MS Word. For example, `

content

` will result in `

content

`. + +* `StripTags` - `List` - Specifies a list of tags to be removed from the HTML. Child nodes of removed tags will be kept in place. For example. when `StripTags` is `{ "span" }` , pasting `

content

` will result in `

content

`. + +* `RemoveAttributes` - `List` - Specifies the DOM attributes that should be removed from the HTML. For example, when set to `{ "lang" }` , pasting `

content

` will result in `

content

`. + + + +## Notes + +This section provides information on a few key concepts and behaviors that you should be aware of: + +* [Content Size](#content-size) +* [Content Sanitization](#content-sanitization) +* [Paste Text and Image from MS Word](#paste-text-and-image-from-ms-word) + + +### Content Size +@[template](/_contentTemplates/editor/general.md#content-size-signalr) + +### Content Sanitization + +>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. +> +> @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content) + + +The editor clears `