Skip to content

Commit 96bd0d4

Browse files
manikandan-mariappanmanikandan-mariappan
committed
Merge branch '979389-block-editor' of https://github.com/syncfusion-content/blazor-docs into 979389-block-editor
2 parents ef8a9b8 + 75ca6c6 commit 96bd0d4

File tree

8 files changed

+498
-0
lines changed

8 files changed

+498
-0
lines changed

‎blazor-toc.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -980,7 +980,15 @@
980980
<li><a href="/blazor/blockeditor/paste-cleanup">Paste Cleanup</a></li>
981981
<li><a href="/blazor/blockeditor/undo-redo">Undo and redo</a></li>
982982
<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>
983985
<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>
984992
</ul>
985993
</li>
986994
<li>Breadcrumb

‎blazor/blockeditor/appearance.md‎

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

‎blazor/blockeditor/editor-menus.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ The following example demonstrates how to customize the Block action menu.
318318
{
319319
ID = "block-info-action",
320320
Label = "Block Info",
321+
IconCss = "e-icons e-circle-info",
321322
Tooltip = "Show block information"
322323
}
323324
};

‎blazor/blockeditor/images/appearance.png‎

48.8 KB
Loading

‎blazor/blockeditor/images/customStyles.png‎

164 KB
Loading

0 commit comments

Comments
 (0)