Skip to content

Commit 1ea99c1

Browse files
manikandan-mariappanmanikandan-mariappan
committed
998260: UG corrections Phase 1
1 parent 0e670bc commit 1ea99c1

File tree

11 files changed

+144
-99
lines changed

11 files changed

+144
-99
lines changed

‎blazor/blockeditor/built-in-blocks/built-in-blocks.md‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
22
layout: post
3-
title: Blocks in Blazor BlockEditor Component | Syncfusion
4-
description: Checkout and learn about Blocks in Syncfusion Blazor BlockEditor component and more.
3+
title: Blocks in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn about Blocks in Syncfusion Blazor Block Editor component and more.
55
platform: Blazor
6-
control: BlockEditor
6+
control: Block Editor
77
documentation: ug
88
---
99

10-
# Blocks in Blazor BlockEditor component
10+
# Blocks in Blazor Block Editor component
1111

1212
The Syncfusion Block Editor uses **Blocks** as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the `Blocks` property.
1313

1414
## Blocks
1515

16-
Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Code snippet` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
16+
Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Callout` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
1717

18-
You can configure blocks with various properties such as `ID`, `BlockType`, `Content`to create a rich, structured editor.
18+
You can configure blocks with various properties such as `ID`, `BlockType`, `Content` to create a rich, structured editor.
1919

2020
## Block types
2121

@@ -45,7 +45,7 @@ By default, the `Indent` property is set to `0`.
4545
4646
@using Syncfusion.Blazor.BlockEditor
4747
48-
<div class="paste-blockeditor">
48+
<div class="wrapper">
4949
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
5050
</div>
5151
@code {
@@ -80,7 +80,7 @@ By default, the `Indent` property is set to `0`.
8080
8181
```
8282

83-
![Blazor BlockEditor Blocks Indent](./images/indent.png)
83+
![Blazor Block Editor Blocks Indent](./images/indent.png)
8484

8585
## Configure CSS Class
8686

@@ -92,7 +92,7 @@ Custom CSS classes allow you to define specialized styling for specific blocks i
9292
9393
@using Syncfusion.Blazor.BlockEditor
9494
95-
<div class="paste-blockeditor">
95+
<div class="wrapper">
9696
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
9797
</div>
9898
@@ -143,6 +143,50 @@ Custom CSS classes allow you to define specialized styling for specific blocks i
143143
};
144144
}
145145
146+
<style>
147+
/* Custom CSS for blocks */
148+
.e-block.info-block, .e-block.warning-block, .e-block.success-block, .e-block.error-block {
149+
padding-top: 10px;
150+
padding-bottom: 10px;
151+
border-radius: 4px;
152+
margin-bottom: 5px;
153+
border-left: 4px solid;
154+
}
155+
156+
.e-block.info-block {
157+
background-color: #e6f3ff;
158+
border-left-color: #007bff;
159+
color: #004085;
160+
}
161+
162+
.e-block.warning-block {
163+
background-color: #fff8e1;
164+
border-left-color: #ffc107;
165+
color: #856404;
166+
}
167+
168+
.e-block.success-block {
169+
background-color: #e8f5e9;
170+
border-left-color: #28a745;
171+
color: #155724;
172+
}
173+
174+
.e-block.error-block {
175+
background-color: #fdecea;
176+
border-left-color: #dc3545;
177+
color: #721c24;
178+
}
179+
180+
.e-block.custom-font {
181+
font-family: 'Georgia', serif;
182+
font-size: 18px;
183+
color: #4a4a4a;
184+
border-bottom: 2px dotted #ccc;
185+
padding-top: 10px;
186+
padding-bottom: 10px;
187+
}
188+
<style>
189+
146190
```
147191

148-
![Blazor BlockEditor Blocks CssClass](./images/cssClass.png)
192+
![Blazor Block Editor Blocks CssClass](./images/cssClass.png)

‎blazor/blockeditor/built-in-blocks/embed.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
layout: post
3-
title: Embed in Blazor BlockEditor Component | Syncfusion
4-
description: Checkout and learn about Embed in Syncfusion Blazor BlockEditor component and more.
3+
title: Embed in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn about Embed in Syncfusion Blazor Block Editor component and more.
55
platform: Blazor
6-
control: BlockEditor
6+
control: Block Editor
77
documentation: ug
88
---
99

10-
# Embed Blocks in Blazor BlockEditor component
10+
# Embed Blocks in Blazor Block Editor component
1111

1212
The Block Editor supports the addition of embeds to help you organize and showcase visual content effectively.
1313

@@ -21,38 +21,38 @@ You can render an `Image` block by setting the `BlockType` property to `Image` i
2121

2222
#### Global Image Settings
2323

24-
You can configure global settings for image blocks using the `ImageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display.
24+
You can configure global settings for image blocks using the `ImageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for all images in the editor.
2525

2626
The `ImageBlockSettings` property supports the following options:
2727

2828
| Property | Description | Default Value |
2929
|----------|-------------|---------------|
30-
| saveFormat | Specifies the format to save the image. | `Base64` |
31-
| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` |
32-
| width | Specifies the default display width of the image. | `auto` |
33-
| height | Specifies the default display height of the image. | `auto` |
34-
| enableResize | Enables or disables image resizing. | `true` |
35-
| minWidth | Minimum width allowed for resizing. | `''` |
36-
| maxWidth | Maximum width allowed for resizing. | `''` |
37-
| minHeight | Minimum height allowed for resizing. | `''` |
38-
| maxHeight | Maximum height allowed for resizing. | `''` |
30+
| SaveFormat | Specifies the format to save the image. | `Base64` |
31+
| AllowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` |
32+
| Width | Specifies the default display width of the image. | `auto` |
33+
| Height | Specifies the default display height of the image. | `auto` |
34+
| EnableResize | Enables or disables image resizing. | `true` |
35+
| MinWidth | Minimum width allowed for resizing. | `''` |
36+
| MaxWidth | Maximum width allowed for resizing. | `''` |
37+
| MinHeight | Minimum height allowed for resizing. | `''` |
38+
| MaxHeight | Maximum height allowed for resizing. | `''` |
3939

4040
#### Configure Image Block Properties
4141

4242
The `Image` block `Properties` property supports the following options:
4343

4444
| Property | Description | Default Value |
4545
|----------|-------------|---------------|
46-
| src | Specifies the image path. | `''` |
47-
| width | Specifies the display width of the image. | `''` |
48-
| height | Specifies the display height of the image. | `''` |
49-
| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
46+
| Src | Specifies the image path. | `''` |
47+
| Width | Specifies the display width of the image. | `''` |
48+
| Height | Specifies the display height of the image. | `''` |
49+
| AltText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
5050

5151
```cshtml
5252
5353
@using Syncfusion.Blazor.BlockEditor
5454
55-
<div class="paste-blockeditor">
55+
<div class="wrapper">
5656
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
5757
</div>
5858
@@ -74,4 +74,4 @@ The `Image` block `Properties` property supports the following options:
7474
7575
```
7676

77-
![Blazor BlockEditor Image Block](./images/image-block.png)
77+
![Blazor Block Editor Image Block](./images/image-block.png)

‎blazor/blockeditor/built-in-blocks/inline-content.md‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
layout: post
3-
title: Inline content in Blazor BlockEditor Component | Syncfusion
4-
description: Checkout and learn about Inline content in Syncfusion Blazor BlockEditor component and more.
3+
title: Inline content in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn about Inline content in Syncfusion Blazor Block Editor component and more.
55
platform: Blazor
6-
control: BlockEditor
6+
control: Block Editor
77
documentation: ug
88
---
99

10-
# Inline Content in Blazor BlockEditor component
10+
# Inline Content in Blazor Block Editor component
1111

1212
In the Syncfusion Block Editor, all content is organized within blocks. Each block contains a `Content` property, which is an array of inline elements that define the text and functionality within that block.
1313

@@ -21,7 +21,6 @@ The Block Editor supports several inline content types through the `ContentType`
2121
|------------------------|-------------------------------------|
2222
| Text | Represents plain text content. |
2323
| Link | Represents a hyperlink. |
24-
| Code | Represents a code snippet. |
2524
| Mention | Represents a user mention. |
2625
| Label | Represents a label or tag. |
2726

@@ -31,7 +30,7 @@ By default, the content type is set to `Text`.
3130

3231
To configure text content, set the `ContentType` property to `Text`. This is the default content type if none is specified.
3332

34-
### Type
33+
### Type
3534

3635
```cshtml
3736
// Adding inline text
@@ -52,9 +51,9 @@ Link settings control the behavior and properties of hyperlinks in your content.
5251

5352
Link settings are configured through the `Properties` property, which accepts the following options:
5453

55-
| Option | Description | Default Value |
56-
| --------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
57-
| [url] | Specifies the destination URL of the link. | `''` |
54+
| Property | Description | Default Value |
55+
|----------|-------------|---------------|
56+
| Url | Specifies the destination URL of the link. | `''` |
5857

5958
### Type & Props
6059

@@ -68,18 +67,18 @@ Link settings are configured through the `Properties` property, which accepts th
6867

6968
## Configure Label
7069

71-
To render labels, set the `ContentType` property to `Label`. The `Properties` property allows you to specify which label to display.
70+
To render labels, set the `ContentType` property to `Label`. Specify the `LabelID` of the particular label in `Properties` to render a label.
7271

7372
### Built-in items
7473

75-
The Block Editor comes with offers different built-in options. These include:
74+
The Block Editor comes with different built-in label items. These includes:
7675

7776
- **Progress**: In-progress, On-hold, Done
7877
- **Priority**: High, Medium, Low
7978

8079
### Customize label
8180

82-
You can customize the labels by using the `Properties` property with contentType `Label`.
81+
You can customize the labels by using the `Properties` property along with contentType `Label`.
8382

8483
### Type & Props
8584

@@ -88,7 +87,9 @@ You can customize the labels by using the `Properties` property with contentType
8887
new BlockModel
8988
{
9089
BlockType = BlockType.Paragraph,
91-
Content = {new ContentModel{ContentType = ContentType.label, Content = "Name of the label"}}
90+
Content = {new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {
91+
LabelID = "progress"
92+
}}}
9293
}
9394
```
9495

@@ -121,15 +122,15 @@ The below sample demonstrates the customization of labels in the Block Editor.
121122

122123
## Configure mention
123124

124-
Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`.
125+
Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`. Specify the `UserID` of particular user in `Properties` to render a mention.
125126

126127
Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor.
127128

128129
```cshtml
129130
130131
@using Syncfusion.Blazor.BlockEditor
131132
132-
<div class="paste-blockeditor">
133+
<div class="wrapper">
133134
<SfBlockEditor Blocks="BlockData" Users="@BlockUser"></SfBlockEditor>
134135
</div>
135136
@@ -143,7 +144,7 @@ Mentions are typically triggered by the `@` character and are linked to the `Use
143144
new BlockModel
144145
{
145146
BlockType = BlockType.Heading,
146-
Properties= new HeadingBlockSettings {Level = 2},
147+
Properties = new HeadingBlockSettings {Level = 2},
147148
Content = {new ContentModel {ContentType = ContentType.Text, Content = "Different Content Types"}}
148149
},
149150
new BlockModel
@@ -154,9 +155,9 @@ Mentions are typically triggered by the `@` character and are linked to the `Use
154155
new ContentModel{ContentType = ContentType.Link, Content = "hyperlinks", Properties = new LinkContentSettings { Url = "https://ej2.syncfusion.com/documentation/"} },
155156
new ContentModel{ContentType = ContentType.Text, Content = ", inline "},
156157
new ContentModel{ContentType = ContentType.Text, Content = "\nUser mentions like"},
157-
new ContentModel{ContentType = ContentType.Mention, Content = "user1"},
158+
new ContentModel{ContentType = ContentType.Mention, Properties = new MentionContentSettings() { UserID = "user1" } },
158159
new ContentModel{ContentType = ContentType.Text, Content = ", and labels such as"},
159-
new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {LabelID = "label1" } },
160+
new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {LabelID = "progress" } },
160161
new ContentModel{ContentType = ContentType.Text, Content = "."},
161162
]
162163
}
@@ -169,29 +170,29 @@ Mentions are typically triggered by the `@` character and are linked to the `Use
169170

170171
The Block Editor allows you to apply rich formatting to `Text`, `Link`, and `Code` elements using the `Styles` property.
171172

172-
The `styles` property supports the following options:
173+
The `Styles` property supports the following options:
173174

174175
| Style Property | Description | Default Value |
175176
| ------------------------- | ------------------------------------------ | ------------- |
176177
| `Bold` | Makes the text bold. | `false` |
177-
| `italic` | Makes the text italicized. | `false` |
178-
| `underline` | Adds an underline to the text. | `false` |
179-
| `strikethrough` | Adds a line through the text. | `false` |
180-
| `color` | Sets the text color (HEX or RGBA format). | `''` |
181-
| `backgroundColor` | Sets the background color for the text. | `''` |
182-
| `superscript` | Renders the text as superscript. | `false` |
183-
| `subscript` | Renders the text as subscript. | `false` |
184-
| `uppercase` | Converts the text to uppercase. | `false` |
185-
| `lowercase` | Converts the text to lowercase. | `false` |
186-
| `inlineCode` | Converts the text to InlineCode. | `''` |
178+
| `Italic` | Makes the text italicized. | `false` |
179+
| `Underline` | Adds an underline to the text. | `false` |
180+
| `Strikethrough` | Adds a line through the text. | `false` |
181+
| `Color` | Sets the text color (HEX or RGBA format). | `''` |
182+
| `BackgroundColor` | Sets the background color for the text. | `''` |
183+
| `Superscript` | Renders the text as superscript. | `false` |
184+
| `Subscript` | Renders the text as subscript. | `false` |
185+
| `Uppercase` | Converts the text to uppercase. | `false` |
186+
| `Lowercase` | Converts the text to lowercase. | `false` |
187+
| `InlineCode` | Converts the text to inline code. | `false` |
187188

188189
You can apply one or more of these styles to any supported content element for rich text formatting.
189190

190191
```cshtml
191192
192193
@using Syncfusion.Blazor.BlockEditor
193194
194-
<div class="paste-blockeditor">
195+
<div class="wrapper">
195196
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
196197
</div>
197198
@@ -249,4 +250,4 @@ You can apply one or more of these styles to any supported content element for r
249250
250251
```
251252

252-
![Blazor BlockEditor Content Styles](./images/content-styles.png)
253+
![Blazor Block Editor Content Styles](./images/content-styles.png)

0 commit comments

Comments
 (0)