Skip to content

Commit 14b0968

Browse files
premanandh2205premanandh2205
committed
979389: Added a blazor documentation for block editor
1 parent f059e80 commit 14b0968

File tree

8 files changed

+405
-0
lines changed

8 files changed

+405
-0
lines changed

‎blazor/block-editor/build-in-blocks/build-in-blocks.md‎

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

‎blazor/block-editor/build-in-blocks/embed.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: Embed in Blazor BlockEditor Component | Syncfusion
4+
description: Checkout and learn about Embed with Blazor BlockEditor component in Blazor WebAssembly App.
5+
platform: Blazor
6+
control: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Embed Blocks in Blazor BlockEditor component
11+
12+
Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively.
13+
14+
## 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 Image blocks by setting the [BlockType] property as `Image`. By setting the `Properties` property, you can configure the image source, allowed file types, and display dimensions etc.
21+
22+
The image [Properties] property supports the following options:
23+
24+
| Property | Description | Default Value |
25+
|----------|-------------|---------------|
26+
| SaveFormat | Specifies the format to save the image | Base64 |
27+
| Src | Specifies the image path | ' '|
28+
| AllowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] |
29+
| Width | Specifies the display width of the image | ' ' |
30+
| Height | Specifies the display height of the image | ' '|
31+
| MinWidth | Specifies the minimum width of the image in pixels or as a string unit | 40|
32+
| MaxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '|
33+
| MinHeight | Specifies the minimum height of the image in pixels or as a string unit | 40|
34+
| MaxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '|
35+
| AltText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '|
36+
| CssClass | Specifies one or more CSS classes to be applied to the image element | ' ' |
37+
| ReadOnly | Specifies whether the image is in read-only mode | false
38+
39+
```cshtml
40+
41+
@using Syncfusion.Blazor.BlockEditor
42+
43+
<div class="paste-blockeditor">
44+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
45+
</div>
46+
47+
@code {
48+
private List<BlockModel> BlockData = new List<BlockModel>
49+
{
50+
new BlockModel
51+
{
52+
BlockType = BlockType.Image,
53+
Properties = new ImageBlockSettings {Src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", AltText = "Sample image"}
54+
},
55+
new BlockModel
56+
{
57+
BlockType = BlockType.Paragraph,
58+
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."}}
59+
}
60+
};
61+
}
62+
63+
```
64+
65+
![Blazor BlockEditor Image Block](./images/image-block.png)

0 commit comments

Comments
 (0)