Skip to content

Commit 764e4e9

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #7252 from syncfusion-content/979389-block-editor
979389: Added a blazor documentation for block editor
2 parents 7483672 + e507890 commit 764e4e9

38 files changed

+2840
-8
lines changed

‎blazor-toc.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -967,6 +967,28 @@
967967
</li>
968968
</ul>
969969
</li>
970+
<li><a href="/blazor/blockeditor/built-in-blocks/built-in-blocks">Built-in Blocks</a>
971+
<ul>
972+
<li><a href="/blazor/blockeditor/built-in-blocks/typography">Typography</a></li>
973+
<li><a href="/blazor/blockeditor/built-in-blocks/table-block">Table Blocks</a></li>
974+
<li><a href="/blazor/blockeditor/built-in-blocks/list-types">List-Types</a></li>
975+
<li><a href="/blazor/blockeditor/built-in-blocks/inline-content">Inline Content</a></li>
976+
<li><a href="/blazor/blockeditor/built-in-blocks/embed">Embeds</a></li>
977+
</ul>
978+
</li>
979+
<li><a href="/blazor/blockeditor/editor-menus">Editor Menus</a></li>
980+
<li><a href="/blazor/blockeditor/paste-cleanup">Paste Cleanup</a></li>
981+
<li><a href="/blazor/blockeditor/undo-redo">Undo and redo</a></li>
982+
<li><a href="/blazor/blockeditor/globalization">Globalization</a></li>
983+
<li><a href="/blazor/blockeditor/keyboard-shortcuts">Keyboard Shortcuts</a></li>
984+
<li><a href="/blazor/blockeditor/appearance">Appearance</a></li>
985+
<li><a href="/blazor/blockeditor/events">Events</a></li>
986+
<li>Validation and Security
987+
<ul>
988+
<li><a href="/blazor/blockeditor/validation-security/cross-site-script">Cross-Site Scripting</a></li>
989+
<li><a href="/blazor/blockeditor/validation-security/read-only-mode">Controlling Editor Access</a></li>
990+
</ul>
991+
</li>
970992
</ul>
971993
</li>
972994
<li>Breadcrumb

‎blazor/blockeditor/appearance.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
---
2+
layout: post
3+
title: Appearance in Blazor Block Editor Component | Syncfusion
4+
description: Checkout and learn here all about Appearance with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Appearance in Blazor Block Editor component
11+
12+
The Block Editor component provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.
13+
14+
## Setting width and height
15+
16+
You can specify the width and height for the Block Editor component using the `Width` and `Height` properties.
17+
18+
```cshtml
19+
20+
@using Syncfusion.Blazor.BlockEditor;
21+
22+
<SfBlockEditor Width="100%" Height="80vh"></SfBlockEditor>
23+
24+
// Or with specific pixel values
25+
<SfBlockEditor Width="800px" Height="500px"></SfBlockEditor>
26+
27+
```
28+
29+
## Setting readonly mode
30+
31+
You can utilize the `ReadOnly` property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
32+
33+
```cshtml
34+
35+
@using Syncfusion.Blazor.BlockEditor;
36+
37+
<SfBlockEditor ReadOnly=true></SfBlockEditor>
38+
39+
```
40+
41+
## Customization using CSS Class
42+
43+
You can use the `CssClass` property to customize the appearance of the Block Editor component.
44+
45+
```cshtml
46+
47+
@using Syncfusion.Blazor.BlockEditor;
48+
49+
<SfBlockEditor Width="600px" Height="400px" CssClass="custom-editor-theme"></SfBlockEditor>
50+
51+
```
52+
53+
The following example demonstrates the usage of `Readonly` and `CssClass` properties of the Block Editor.
54+
55+
```cshtml
56+
57+
@using Syncfusion.Blazor.BlockEditor
58+
@using Syncfusion.Blazor.Buttons
59+
60+
<div id="container">
61+
<SfBlockEditor @ref="BlockEditorRef"
62+
CssClass="@CssClasses"
63+
ReadOnly="@IsReadonly"
64+
Blocks="@Blocks"
65+
Focus="OnEditorFocus"
66+
Blur="OnEditorBlur">
67+
</SfBlockEditor>
68+
69+
<div id="controls">
70+
<h3>Appearance Configuration Demo</h3>
71+
<div class="button-group">
72+
<SfButton @onclick="ToggleReadonly">Toggle Readonly Mode</SfButton>
73+
<SfButton @onclick="ApplyCustomTheme">Apply Custom Theme</SfButton>
74+
</div>
75+
76+
<div id="statusText" style="margin-top: 10px;">
77+
<strong>Current Status: </strong>@StatusMessage
78+
</div>
79+
</div>
80+
81+
<div id="output">@OutputMessage</div>
82+
</div>
83+
84+
@code {
85+
private SfBlockEditor? BlockEditorRef;
86+
87+
private bool IsReadonly { get; set; } = false;
88+
private string CurrentTheme { get; set; } = "default";
89+
private string StatusMessage { get; set; } = "Editable, Default Theme";
90+
private string OutputMessage { get; set; } = "";
91+
private string CssClasses => $"{CurrentTheme} {(IsReadonly ? "readonly-mode" : "")}".Trim();
92+
private List<BlockModel> Blocks => new List<BlockModel>
93+
{
94+
new BlockModel
95+
{
96+
BlockType = BlockType.Heading,
97+
Properties = new HeadingBlockSettings { Level = 1 },
98+
Content = new List<ContentModel>
99+
{
100+
new ContentModel { ContentType = ContentType.Text, Content = "Appearance Configuration Demo" }
101+
}
102+
},
103+
new BlockModel
104+
{
105+
BlockType = BlockType.Paragraph,
106+
Content = new List<ContentModel>
107+
{
108+
new ContentModel { ContentType = ContentType.Text, Content = "This demo showcases different appearance configurations including readonly mode and a custom CSS theme." }
109+
}
110+
},
111+
new BlockModel
112+
{
113+
BlockType = BlockType.Heading,
114+
Properties = new HeadingBlockSettings { Level = 2 },
115+
Content = new List<ContentModel>
116+
{
117+
new ContentModel { ContentType = ContentType.Text, Content = "Configured Custom Theme" }
118+
}
119+
},
120+
new BlockModel
121+
{
122+
BlockType = BlockType.BulletList,
123+
Content = new List<ContentModel>
124+
{
125+
new ContentModel { ContentType = ContentType.Text, Content = "Gradient background with modern styling" }
126+
}
127+
},
128+
new BlockModel
129+
{
130+
BlockType = BlockType.Paragraph,
131+
Content = new List<ContentModel>
132+
{
133+
new ContentModel
134+
{
135+
ContentType = ContentType.Text,
136+
Content = "Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes."
137+
}
138+
}
139+
}
140+
};
141+
142+
private void ToggleReadonly()
143+
{
144+
IsReadonly = !IsReadonly;
145+
146+
UpdateStatus();
147+
DisplayOutput($"Readonly mode {(IsReadonly ? "enabled" : "disabled")}. {(IsReadonly ? "Content is now view-only." : "Content is now editable.")}");
148+
}
149+
150+
private void ApplyCustomTheme()
151+
{
152+
CurrentTheme = "custom-theme";
153+
UpdateStatus();
154+
DisplayOutput("Custom theme applied. The editor now features a gradient background with modern styling and hover effects.");
155+
}
156+
157+
private void OnEditorFocus()
158+
{
159+
DisplayOutput("Editor focused. You can now type or edit content.");
160+
}
161+
162+
private void OnEditorBlur()
163+
{
164+
DisplayOutput("Editor lost focus.");
165+
}
166+
167+
protected override void OnInitialized()
168+
{
169+
UpdateStatus();
170+
}
171+
172+
private void UpdateStatus()
173+
{
174+
string mode = IsReadonly ? "Readonly" : "Editable";
175+
string theme = CurrentTheme == "default" ? "Default" : "Custom";
176+
StatusMessage = $"{mode}, {theme} Theme";
177+
}
178+
179+
private void DisplayOutput(string msg)
180+
{
181+
OutputMessage = msg;
182+
StateHasChanged();
183+
}
184+
}
185+
186+
<style>
187+
#container {
188+
margin: 50px;
189+
gap: 20px;
190+
display: flex;
191+
flex-direction: column;
192+
align-items: center;
193+
}
194+
195+
#controls {
196+
margin-bottom: 20px;
197+
padding: 20px;
198+
border: 1px solid #ddd;
199+
border-radius: 5px;
200+
background-color: #f8f9fa;
201+
}
202+
203+
.button-group {
204+
margin-bottom: 15px;
205+
}
206+
207+
.button-group button {
208+
margin: 5px;
209+
padding: 8px 16px;
210+
background-color: #17a2b8;
211+
color: white;
212+
border: none;
213+
border-radius: 4px;
214+
cursor: pointer;
215+
}
216+
217+
.button-group button:hover {
218+
background-color: #138496;
219+
}
220+
221+
.status-info {
222+
padding: 10px;
223+
background-color: #d1ecf1;
224+
border-left: 4px solid #17a2b8;
225+
border-radius: 4px;
226+
}
227+
228+
.status-info p {
229+
margin: 0;
230+
color: #0c5460;
231+
}
232+
233+
#output {
234+
margin-top: 15px;
235+
padding: 10px;
236+
background-color: #f8f9fa;
237+
border-radius: 4px;
238+
min-height: 50px;
239+
font-family: monospace;
240+
white-space: pre-wrap;
241+
}
242+
243+
/* Custom Theme CSS Class */
244+
.custom-theme {
245+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
246+
border-radius: 12px;
247+
}
248+
249+
.custom-theme .e-block {
250+
border-radius: 8px;
251+
margin-bottom: 10px;
252+
backdrop-filter: blur(10px);
253+
}
254+
255+
.custom-theme .e-block:hover {
256+
transform: translateY(-2px);
257+
transition: all 0.3s ease;
258+
}
259+
260+
.custom-theme .e-block-content,
261+
.custom-theme .e-floating-icon {
262+
color: #fff;
263+
font-weight: 500;
264+
}
265+
266+
/* Readonly Mode Styling */
267+
.readonly-mode {
268+
opacity: 0.8;
269+
cursor: not-allowed;
270+
}
271+
272+
.readonly-mode .e-block-content {
273+
color: #6c757d;
274+
}
275+
276+
.custom-theme.readonly-mode .e-block-content {
277+
color: #101111;
278+
}
279+
</style>
280+
281+
```
282+
![Blazor Block Editor Appearance](./images/appearance.png)
283+
284+
![Blazor Block Editor Custom Styles](./images/customStyles.png)

0 commit comments

Comments
 (0)