Skip to content

Commit 5eb242a

Browse files
BackiarajBackiaraj
committed
Added Blazor Block Editor component UG documentation
1 parent 7fea9f0 commit 5eb242a

File tree

6 files changed

+471
-0
lines changed

6 files changed

+471
-0
lines changed

‎blazor-toc.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -955,6 +955,20 @@
955955
</li>
956956
</ul>
957957
</li>
958+
<li>Block Editor
959+
<ul>
960+
<li>Getting Started
961+
<ul>
962+
<li>
963+
<a href="/blazor/blockeditor/getting-started-with-web-app">Blazor Web App</a>
964+
</li>
965+
<li>
966+
<a href="/blazor/blockeditor/getting-started-wasm-app">Blazor WASM App</a>
967+
</li>
968+
</ul>
969+
</li>
970+
</ul>
971+
</li>
958972
<li>Breadcrumb
959973
<ul>
960974
<li>Getting Started

‎blazor/blockeditor/getting-started-wasm-app.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
layout: post
3+
title: Getting Started with Syncfusion BlockEditor Component in Blazor WASM App
4+
description: Check out and learn here about the documentation for getting started with Blazor BlockEditor Component in Blazor WASM App. Explore here to more details.
5+
platform: Blazor
6+
component: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Getting Started with Blazor Block Editor Component
11+
12+
This section briefly explains about how to include `Blazor Block Editor` component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
13+
14+
{% tabcontents %}
15+
16+
{% tabcontent Visual Studio %}
17+
18+
## Prerequisites
19+
20+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
21+
22+
## Create a new Blazor App in Visual Studio
23+
24+
Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
25+
26+
![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
27+
28+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BlockEditor and Themes NuGet in the App
29+
30+
To add the **Blazor Block Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
31+
32+
{% tabs %}
33+
{% highlight C# tabtitle="Package Manager" %}
34+
35+
Install-Package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }}
36+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
37+
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
42+
43+
{% endtabcontent %}
44+
45+
{% tabcontent Visual Studio Code %}
46+
47+
## Prerequisites
48+
49+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
50+
51+
## Create a new Blazor App in Visual Studio Code
52+
53+
Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
54+
55+
Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
56+
57+
{% tabs %}
58+
59+
{% highlight c# tabtitle="Blazor WASM App" %}
60+
61+
dotnet new blazorwasm -o BlazorApp
62+
cd BlazorApp
63+
64+
{% endhighlight %}
65+
66+
{% endtabs %}
67+
68+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BlockEditor and Themes NuGet in the App
69+
70+
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
71+
* Ensure you’re in the project root directory where your `.csproj` file is located.
72+
* Run the following command to install a [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
73+
74+
{% tabs %}
75+
76+
{% highlight c# tabtitle="Package Manager" %}
77+
78+
dotnet add package Syncfusion.Blazor.BlockEditor -v {{ site.releaseversion }}
79+
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
80+
dotnet restore
81+
82+
{% endhighlight %}
83+
84+
{% endtabs %}
85+
86+
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
87+
88+
{% endtabcontent %}
89+
90+
{% tabcontent .NET CLI %}
91+
92+
### Prerequisites
93+
94+
Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
95+
96+
{% tabs %}
97+
{% highlight c# tabtitle=".NET CLI" %}
98+
99+
dotnet --version
100+
101+
{% endhighlight %}
102+
{% endtabs %}
103+
104+
### Create a Blazor WebAssembly App using .NET CLI
105+
106+
Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
107+
108+
{% tabs %}
109+
{% highlight c# tabtitle=".NET CLI" %}
110+
111+
dotnet new blazorwasm -o BlazorApp
112+
cd BlazorApp
113+
114+
{% endhighlight %}
115+
{% endtabs %}
116+
117+
### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BlockEditor and Themes NuGet in the App
118+
119+
To add the **Blazor Block Editor** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
120+
121+
{% tabs %}
122+
{% highlight c# tabtitle=".NET CLI" %}
123+
124+
dotnet add package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }}
125+
dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
126+
dotnet restore
127+
128+
{% endhighlight %}
129+
{% endtabs %}
130+
131+
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
132+
133+
{% endtabcontent %}
134+
135+
{% endtabcontents %}
136+
137+
## Add Import Namespaces
138+
139+
Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BlockEditor` namespaces.
140+
141+
{% tabs %}
142+
{% highlight C# tabtitle="~/_Imports.razor" %}
143+
144+
@using Syncfusion.Blazor
145+
@using Syncfusion.Blazor.BlockEditor
146+
147+
{% endhighlight %}
148+
{% endtabs %}
149+
150+
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
151+
152+
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
153+
154+
{% tabs %}
155+
{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
156+
157+
using Microsoft.AspNetCore.Components.Web;
158+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
159+
using Syncfusion.Blazor;
160+
161+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
162+
builder.RootComponents.Add<App>("#app");
163+
builder.RootComponents.Add<HeadOutlet>("head::after");
164+
165+
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
166+
167+
builder.Services.AddSyncfusionBlazor();
168+
await builder.Build().RunAsync();
169+
....
170+
171+
{% endhighlight %}
172+
{% endtabs %}
173+
174+
## Add stylesheet and script resources
175+
176+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
177+
178+
```html
179+
<head>
180+
....
181+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
182+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
183+
</head>
184+
```
185+
186+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
187+
188+
## Add Blazor Block Editor component
189+
190+
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Pages/Index.razor** file.
191+
192+
{% tabs %}
193+
{% highlight razor %}
194+
195+
<SfBlockEditor ID="block-editor" />
196+
197+
{% endhighlight %}
198+
{% endtabs %}
199+
200+
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the default web browser.
201+
202+
![Blazor Block Editor Component](images/blazor-black-editor-component.png)

0 commit comments

Comments
 (0)