Skip to content

Commit b7c7f32

Browse files
premanandh2205premanandh2205
committed
Merge branch '979389-block-editor' of https://github.com/syncfusion-content/blazor-docs into development
2 parents 677741c + f0acdc5 commit b7c7f32

File tree

2 files changed

+383
-0
lines changed

2 files changed

+383
-0
lines changed

‎blazor/block-editor/globalization.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: post
3+
title: Globalization in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn about Globalization with Blazor Block Editor component in Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Block Editor
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Globalization in Blazor Block Editor Component
12+
13+
The Syncfusion Blazor Block Editor component supports globalization features like `Localization` and `Right-to-Left (RTL)` alignment, enabling it to be adapted for different cultures and languages.
14+
15+
## Localization
16+
17+
Block Editor can be localized for any culture by translating its static text labels. The default locale is `en` (English). The following table lists the default text values for the `en` culture that can be translated.
18+
19+
|KEY|Text|
20+
|----|----|
21+
|`paragraph`|Write something or '/' for commands.|
22+
|`heading1`|Heading 1|
23+
|`heading2`|Heading 2|
24+
|`heading3`|Heading 3|
25+
|`heading4`|Heading 4|
26+
|`collapsibleParagraph`|Collapsible Paragraph|
27+
|`collapsibleHeading1`|Collapsible Heading 1|
28+
|`collapsibleHeading2`|Collapsible Heading 2|
29+
|`collapsibleHeading3`|Collapsible Heading 3|
30+
|`collapsibleHeading4`|Collapsible Heading 4|
31+
|`bulletList`|Add item|
32+
|`numberedList`|Add item|
33+
|`checklist`|Todo|
34+
|`callout`|Write a callout|
35+
|`addIconTooltip`|Click to insert below|
36+
|`dragIconTooltipActionMenu`|Click to open|
37+
|`dragIconTooltip`|(Hold to drag)|
38+
|`insertLink`|Insert Link|
39+
|`linkText`|Text|
40+
|`linkTextPlaceholder`|Link text|
41+
|`linkUrl`|URL|
42+
|`linkUrlPlaceholder`|https://example.com|
43+
|`linkTitle`|Title|
44+
|`linkTitlePlaceholder`|Link title|
45+
|`linkOpenInNewWindow`|Open in new window|
46+
|`linkInsert`|Insert|
47+
|`linkRemove`|Remove|
48+
|`linkCancel`|Cancel|
49+
|`codeCopyTooltip`|Copy code|
50+
51+
Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation to localize Syncfusion Blazor components.
52+
53+
## Right-to-Left (RTL)
54+
55+
The Right-to-Left (RTL) feature reverses the component's layout and text direction to support languages that are read from right to left, such as Arabic or Hebrew. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.

‎blazor/block-editor/paste-cleanup.md‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
---
2+
layout: post
3+
title: Paste Clean-up in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn about Paste Clean-up with Blazor Block Editor component in Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Block Editor
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Paste Clean-up in Blazor Block Editor component
12+
13+
The Block Editor component provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains styling and structural consistency. This feature helps remove unwanted formatting, scripts, and elements copied from external sources like web pages or word processors.
14+
15+
You can configure the paste behavior using the `BlockEditorPasteCleanup` tag directive, which allows you to define how content is handled when pasted into the editor.
16+
17+
## Configuring allowed styles
18+
19+
The `AllowedStyles` property lets you define which CSS styles are permitted in pasted content. Any style not in this list is stripped out, ensuring that only desired visual attributes are preserved.
20+
21+
By default, the following styles are allowed:
22+
23+
['font-weight', 'font-style', 'text-decoration', 'text-transform'].
24+
25+
In the below example, only `font-weight` and `font-style` styles will be retained from the pasted content. All other inline styles will be removed.
26+
27+
```cshtml
28+
29+
@using Syncfusion.Blazor.BlockEditor;
30+
31+
<div class="container" style="width: 40px; margin: 50px auto;">
32+
<SfBlockEditor>
33+
<BlockEditorPasteCleanup AllowedStyle="@(new string[] { "font-weight", "font-style" })"></BlockEditorPasteCleanup>
34+
</SfBlockEditor>
35+
</div>
36+
37+
```
38+
39+
## Setting denied tags
40+
41+
The `DeniedTags` property specifies a list of HTML tags to be removed from pasted content. This is useful for stripping potentially problematic elements like `<script>` or `<iframe>` tags. By default, this property is an empty array, so no tags are removed.
42+
43+
In the below example, any `<script>` or `<iframe>` tags found in the pasted content will be removed, preventing unwanted behavior or styling issues.
44+
45+
```cshtml
46+
47+
@using Syncfusion.Blazor.BlockEditor;
48+
49+
<div class="container" style="width: 40px; margin: 50px auto;">
50+
<SfBlockEditor>
51+
<BlockEditorPasteCleanup AllowedStyle="@(new string[] { "font-weight", "font-style" })"></BlockEditorPasteCleanup>
52+
</SfBlockEditor>
53+
</div>
54+
55+
```
56+
57+
Below example demonstrates the usage of paste settings that allows only specific styles and also removes the specific tags from the pasted content.
58+
59+
```cshtml
60+
61+
@using Syncfusion.Blazor.BlockEditor
62+
63+
<div id="container">
64+
<SfBlockEditor @ref="blockEditor" Blocks="@blockData" PasteCleanupCompleted="HandleAfterPaste">
65+
<BlockEditorPasteCleanup AllowedStyles="@(new string[] { "text-decoration" })"
66+
DeniedTags="@(new string[] { "script", "iframe" })"></BlockEditorPasteCleanup>
67+
</SfBlockEditor>
68+
69+
<div id="controls">
70+
<h4>Test Content to Copy and Paste:</h4>
71+
<div class="test-content">
72+
<div id="sampleContent" contenteditable="true">
73+
<h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
74+
<p style="background-color: yellow; font-style: italic;">
75+
This is a <span style="font-weight: bold;">bold paragraph</span> with
76+
<span style="color: blue; font-style: italic;">italic text</span> and
77+
<span style="text-decoration: underline;">underlined content</span>.
78+
</p>
79+
<script>console.log('This script should be removed');</script>
80+
<iframe src="about:blank" width="100" height="50"></iframe>
81+
<div style="border: 1px solid black; padding: 10px;">
82+
<span style="font-weight: 600;">Heavy text</span> and
83+
<span style="color: green; font-size: 18px;">colored text</span>
84+
</div>
85+
</div>
86+
</div>
87+
<div id="output">@output</div>
88+
</div>
89+
</div>
90+
91+
@code {
92+
private SfBlockEditor blockEditor;
93+
private string output = "";
94+
95+
private List<BlockModel> blockData = new List<BlockModel>()
96+
{
97+
new BlockModel { ID = "demo-block", BlockType = BlockType.Paragraph }
98+
};
99+
100+
private BlockEditorPasteCleanup pasteSettings = new BlockEditorPasteCleanup()
101+
{
102+
AllowedStyles = new string[] { "text-decoration" },
103+
DeniedTags = new string[] { "script", "iframe" }
104+
};
105+
106+
private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
107+
{
108+
output = $"After Paste Event: Processed content length: {args.Content.Length} characters";
109+
}
110+
111+
protected override void OnInitialized()
112+
{
113+
output = @"Paste Cleanup Settings Active:
114+
- Allowed Styles: ['text-decoration']
115+
- Denied Tags: ['script', 'iframe']
116+
117+
Copy content from the test area above and paste it into the editor to see the cleanup in action.";
118+
}
119+
}
120+
121+
<style>
122+
#container {
123+
margin: 50px;
124+
gap: 20px;
125+
display: flex;
126+
flex-direction: column;
127+
align-items: center;
128+
}
129+
130+
#controls {
131+
width: 100%;
132+
margin-top: 20px;
133+
padding: 20px;
134+
border: 1px solid #ddd;
135+
border-radius: 5px;
136+
}
137+
138+
.test-content {
139+
margin-bottom: 20px;
140+
padding: 15px;
141+
border-radius: 4px;
142+
}
143+
144+
#sampleContent {
145+
padding: 10px;
146+
border: 1px solid #ccc;
147+
border-radius: 4px;
148+
background-color: #f8f9fa;
149+
min-height: 150px;
150+
}
151+
152+
#output {
153+
margin-top: 15px;
154+
padding: 10px;
155+
background-color: #f8f9fa;
156+
border-radius: 4px;
157+
min-height: 50px;
158+
font-family: monospace;
159+
white-space: pre-wrap;
160+
}
161+
</style>
162+
163+
```
164+
165+
## Disable Keep format
166+
167+
By default, the editor retains the formatting of pasted content (e.g., bold, italics, links). You can disable this by setting the `KeepFormat` property to `false`. When disabled, the editor primarily pastes content as plain text, regardless of the `AllowedStyles` configuration.
168+
169+
```cshtml
170+
171+
@using Syncfusion.Blazor.BlockEditor;
172+
173+
<div class="container" style="width: 40px; margin: 50px auto;">
174+
<SfBlockEditor>
175+
<BlockEditorPasteCleanup KeepFormat=false></BlockEditorPasteCleanup>
176+
</SfBlockEditor>
177+
</div>
178+
179+
```
180+
181+
## Allowing plain text
182+
183+
To paste content as plain text, stripping all HTML tags and inline styles, set the `PlainText` property to `true` in `BlockEditorPasteCleanup` tag directive. This ensures that only raw text is inserted, which is ideal for maintaining strict content consistency. By default, this property is `false`.
184+
185+
```cshtml
186+
187+
@using Syncfusion.Blazor.BlockEditor;
188+
189+
<div class="container" style="width: 40px; margin: 50px auto;">
190+
<SfBlockEditor>
191+
<BlockEditorPasteCleanup PlainText=false></BlockEditorPasteCleanup>
192+
</SfBlockEditor>
193+
</div>
194+
195+
```
196+
197+
Below example demonstrates the usage of paste settings that disables the keep format and allows plain text.
198+
199+
```cshtml
200+
201+
@using Syncfusion.Blazor.BlockEditor
202+
203+
<div id="container">
204+
<SfBlockEditor @ref="blockEditor" Blocks="@blockData" PasteCleanupCompleted="HandleAfterPaste">
205+
<BlockEditorPasteCleanup PlainText="true" KeepFormat="false"></BlockEditorPasteCleanup>
206+
</SfBlockEditor>
207+
208+
<div id="controls">
209+
<h4>Test Content to Copy and Paste:</h4>
210+
<div class="test-content">
211+
<div id="sampleContent" contenteditable="true">
212+
<h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
213+
<p style="background-color: yellow; font-style: italic;">
214+
This is a <span style="font-weight: bold;">bold paragraph</span> with
215+
<span style="color: blue; font-style: italic;">italic text</span> and
216+
<span style="text-decoration: underline;">underlined content</span>.
217+
</p>
218+
<div style="border: 1px solid black; padding: 10px;">
219+
<span style="font-weight: 600;">Heavy text</span> and
220+
<span style="color: green; font-size: 18px;">colored text</span>
221+
</div>
222+
</div>
223+
</div>
224+
<div id="output">@output</div>
225+
</div>
226+
</div>
227+
228+
@code {
229+
private SfBlockEditor blockEditor;
230+
private string output = "";
231+
232+
private List<BlockModel> blockData = new List<BlockModel>()
233+
{
234+
new BlockModel { ID = "demo-block", BlockType = BlockType.Paragraph }
235+
};
236+
237+
private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
238+
{
239+
output = $"After Paste Event: Processed content length: {args.Content.Length} characters";
240+
}
241+
242+
protected override void OnInitialized()
243+
{
244+
output = @"Paste Cleanup Settings Active:
245+
- Keep Format: false
246+
- Plain Text: true
247+
248+
Copy content from the test area above and paste it into the editor to see the cleanup in action.";
249+
}
250+
}
251+
252+
<style>
253+
#container {
254+
margin: 50px;
255+
gap: 20px;
256+
display: flex;
257+
flex-direction: column;
258+
align-items: center;
259+
}
260+
261+
#controls {
262+
width: 100%;
263+
margin-top: 20px;
264+
padding: 20px;
265+
border: 1px solid #ddd;
266+
border-radius: 5px;
267+
}
268+
269+
.test-content {
270+
margin-bottom: 20px;
271+
padding: 15px;
272+
border-radius: 4px;
273+
}
274+
275+
#sampleContent {
276+
padding: 10px;
277+
border: 1px solid #ccc;
278+
border-radius: 4px;
279+
background-color: #f8f9fa;
280+
min-height: 150px;
281+
}
282+
283+
#output {
284+
margin-top: 15px;
285+
padding: 10px;
286+
background-color: #f8f9fa;
287+
border-radius: 4px;
288+
min-height: 50px;
289+
font-family: monospace;
290+
white-space: pre-wrap;
291+
}
292+
</style>
293+
294+
```
295+
296+
### Events
297+
298+
The Block Editor provides events to monitor and interact with the paste action.
299+
300+
|Name|Args|Description|
301+
|---|---|---|
302+
|`PasteCleanupStarting`|PasteCleanupStartingEventArgs|Triggers before the content is pasted into the editor.|
303+
|`PasteCleanupCompleted`|PasteCleanupCompletedEventArgs|Triggers after the content is pasted into the editor.|
304+
305+
Below example demonstrates how to configure above events in the editor.
306+
307+
```cshtml
308+
309+
@using Syncfusion.Blazor.BlockEditor;
310+
311+
<div class="container" style="width: 40px; margin: 50px auto;">
312+
<SfBlockEditor PasteCleanupStarting="HandleBeforePaste" PasteCleanupCompleted="HandleAfterPaste">
313+
</SfBlockEditor>
314+
</div>
315+
316+
@code {
317+
private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
318+
{
319+
// Your actions here
320+
}
321+
322+
private void HandleBeforePaste(PasteCleanupStartingEventArgs args)
323+
{
324+
// Your actions here
325+
}
326+
}
327+
328+
```

0 commit comments

Comments
 (0)