Skip to content

Commit d0815a9

Browse files
premanandh2205premanandh2205
committed
979389: Update the block editor
1 parent 1a32603 commit d0815a9

27 files changed

+1240
-0
lines changed

blazor/block-editor/built-in-blocks/built-in-blocks.md renamed to blazor/blockeditor/built-in-blocks/built-in-blocks.md

File renamed without changes.

blazor/block-editor/built-in-blocks/embed.md renamed to blazor/blockeditor/built-in-blocks/embed.md

File renamed without changes.

blazor/block-editor/built-in-blocks/inline-content.md renamed to blazor/blockeditor/built-in-blocks/inline-content.md

File renamed without changes.

blazor/block-editor/built-in-blocks/list-types.md renamed to blazor/blockeditor/built-in-blocks/list-types.md

File renamed without changes.

blazor/block-editor/built-in-blocks/table-block.md renamed to blazor/blockeditor/built-in-blocks/table-block.md

File renamed without changes.

blazor/block-editor/built-in-blocks/typography.md renamed to blazor/blockeditor/built-in-blocks/typography.md

File renamed without changes.

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
layout: post
3+
title: Blocks in Blazor BlockEditor Component | Syncfusion
4+
description: Checkout and learn about Blocks in Syncfusion Blazor BlockEditor component and more.
5+
platform: Blazor
6+
control: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Blocks in Blazor BlockEditor component
11+
12+
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.
13+
14+
## Blocks
15+
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.
17+
18+
You can configure blocks with various properties such as [ID], [BlockType], [Content] to create a rich, structured editor.
19+
20+
## Block types
21+
22+
The Block Editor supports multiple block types, each offering different formatting options and functionality:
23+
24+
| Built-in Block Types | Description |
25+
|-----------------------------------------|-----------------------------------------------------------------------------|
26+
| Paragraph | Default block type for regular text content. |
27+
| Heading1 to Heading4 | Different levels of headings for document structure. |
28+
| Table | Block for displaying data in a tabular format with rows and columns. |
29+
| Checklist | Interactive to-do lists with checkable items. |
30+
| BulletList | Unordered lists with bullet points. |
31+
| NumberedList | Ordered lists with sequential numbering. |
32+
| Quote | Styled block for quotations. |
33+
| Callout | Highlighted block for important information. |
34+
| Divider | Horizontal separator line. |
35+
| CollapsibleParagraph and CollapsibleHeading1-4 | Content blocks that can be expanded or collapsed to show or hide their children. |
36+
| Image | Block for displaying images. |
37+
38+
## Configure indent
39+
40+
You can specify the indentation level of a block using the [Indent] property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
41+
42+
By default, the [Indent] property is set to `0`.
43+
44+
```cshtml
45+
46+
@using Syncfusion.Blazor.BlockEditor
47+
48+
<div class="paste-blockeditor">
49+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
50+
</div>
51+
@code {
52+
private List<BlockModel> BlockData = new List<BlockModel>
53+
{
54+
new BlockModel
55+
{
56+
BlockType = BlockType.Paragraph,
57+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a paragraph with no indentation (indent: 0)"}},
58+
Indent = 0
59+
},
60+
new BlockModel
61+
{
62+
BlockType = BlockType.Paragraph,
63+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has one level of indentation (indent: 1)"}},
64+
Indent = 1
65+
},
66+
new BlockModel
67+
{
68+
BlockType = BlockType.Paragraph,
69+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has two levels of indentation (indent: 2)"}},
70+
Indent = 2
71+
},
72+
new BlockModel
73+
{
74+
BlockType = BlockType.Paragraph,
75+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "Back to no indentation"}},
76+
Indent = 0
77+
}
78+
};
79+
}
80+
81+
```
82+
83+
![Blazor BlockEditor Blocks Indent](./images/indent.png)
84+
85+
## Configure CSS Class
86+
87+
You can apply custom styling to individual blocks using the [CssClass] property. This property accepts a string containing one or more CSS class names.
88+
89+
Custom CSS classes allow you to define specialized styling for specific blocks in your editor.
90+
91+
```cshtml
92+
93+
@using Syncfusion.Blazor.BlockEditor
94+
95+
<div class="paste-blockeditor">
96+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
97+
</div>
98+
99+
@code {
100+
private List<BlockModel> BlockData = new List<BlockModel>
101+
{
102+
new BlockModel
103+
{
104+
BlockType = BlockType.Heading,
105+
Properties = new HeadingBlockSettings { Level = 1 },
106+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "Custom CSS Classes in Block Editor"}}
107+
},
108+
new BlockModel
109+
{
110+
BlockType = BlockType.Paragraph,
111+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "Default paragraph block"}}
112+
},
113+
new BlockModel
114+
{
115+
BlockType = BlockType.Paragraph,
116+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is an info block"}},
117+
CssClass = "info-block"
118+
},
119+
new BlockModel
120+
{
121+
BlockType = BlockType.Paragraph,
122+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a warning block"}},
123+
CssClass = "warning-block"
124+
},
125+
new BlockModel
126+
{
127+
BlockType = BlockType.Paragraph,
128+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a success block"}},
129+
CssClass = "success-block"
130+
},
131+
new BlockModel
132+
{
133+
BlockType = BlockType.Paragraph,
134+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a error block"}},
135+
CssClass = "error-block"
136+
},
137+
new BlockModel
138+
{
139+
BlockType = BlockType.Paragraph,
140+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a custom font block"}},
141+
CssClass = "custom-font"
142+
}
143+
};
144+
}
145+
146+
```
147+
148+
![Blazor BlockEditor Blocks CssClass](./images/cssClass.png)

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
layout: post
3+
title: Embed in Blazor BlockEditor Component | Syncfusion
4+
description: Checkout and learn about Embed in Syncfusion Blazor BlockEditor component and more.
5+
platform: Blazor
6+
control: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Embed Blocks in Blazor BlockEditor component
11+
12+
The Block Editor supports the addition of embeds to help you organize and showcase visual content effectively.
13+
14+
## Adding an Image Block
15+
16+
You can use the `Image` block to showcase an image content within your editor.
17+
18+
### Configure Image Block
19+
20+
You can render an `Image` block by setting the [BlockType] property to `Image` in the block model. The `Properties` property allows you to configure the image source, allowed file types, display dimensions, and more.
21+
22+
#### Global Image Settings
23+
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.
25+
26+
The `ImageBlockSettings` property supports the following options:
27+
28+
| Property | Description | Default Value |
29+
|----------|-------------|---------------|
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. | `''` |
39+
40+
#### Configure Image Block Properties
41+
42+
The `Image` block [Properties] property supports the following options:
43+
44+
| Property | Description | Default Value |
45+
|----------|-------------|---------------|
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. | `''` |
50+
51+
```cshtml
52+
53+
@using Syncfusion.Blazor.BlockEditor
54+
55+
<div class="paste-blockeditor">
56+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
57+
</div>
58+
59+
@code {
60+
private List<BlockModel> BlockData = new List<BlockModel>
61+
{
62+
new BlockModel
63+
{
64+
BlockType = BlockType.Image,
65+
Properties = new ImageBlockSettings {Src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", AltText = "Sample image"}
66+
},
67+
new BlockModel
68+
{
69+
BlockType = BlockType.Paragraph,
70+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "You can customize images further by configuring properties like allowedTypes for file upload restrictions, saveFormat for storage preferences, and cssClass for custom styling."}}
71+
}
72+
};
73+
}
74+
75+
```
76+
77+
![Blazor BlockEditor Image Block](./images/image-block.png)

0 commit comments

Comments
 (0)