Skip to content

Commit 58f32b1

Browse files
authored
Merge pull request #6766 from syncfusion-content/983303-getting-started-d
983303: Updated getting-started.md
2 parents e3d0a03 + d2f8251 commit 58f32b1

File tree

4 files changed

+109
-107
lines changed

4 files changed

+109
-107
lines changed

blazor/rich-text-editor/getting-started-webapp.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Blazor Rich Text Editor in Blazor Web App
1111

12-
This section briefly explains about how to include [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
12+
This section .explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
1313

1414
> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview)
1515
@@ -23,19 +23,19 @@ This section briefly explains about how to include [Blazor Rich Text Editor](htt
2323

2424
## Create a new Blazor Web App in Visual Studio
2525

26-
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.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 [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
26+
Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
2727

28-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
28+
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App.
2929

3030
![Create Blazor Web App](images/blazor-create-web-app.png)
3131

3232
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the App
3333

34-
To add **Blazor Rich Text Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
34+
To add the **Blazor Rich Text 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.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
3535

36-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
36+
If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
3737

38-
Alternatively, you can utilize the following package manager command to achieve the same.
38+
Alternatively, use the following Package Manager commands:
3939

4040
{% tabs %}
4141
{% highlight C# tabtitle="Package Manager" %}
@@ -46,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
4646
{% endhighlight %}
4747
{% endtabs %}
4848

49-
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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
49+
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 complete list of packages and component details.
5050

5151
{% endtabcontent %}
5252

@@ -58,11 +58,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
5858

5959
## Create a new Blazor Web App in Visual Studio Code
6060

61-
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.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 [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
61+
Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
6262

63-
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
63+
Configure the appropriate interactive render mode and interactivity location when setting up the Blazor Web App. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation.
6464

65-
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
65+
For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
6666

6767
{% tabs %}
6868
{% highlight c# tabtitle="Blazor Web App" %}
@@ -74,13 +74,13 @@ cd BlazorWebApp.Client
7474
{% endhighlight %}
7575
{% endtabs %}
7676

77-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor and Themes NuGet in the App
77+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the App
7878

79-
If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
79+
If the app uses `WebAssembly` or `Auto` render modes, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
8080

8181
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
82-
* Ensure you’re in the project root directory where your `.csproj` file is located.
83-
* Run the following command to install a [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
82+
* Ensure the current directory contains your `.csproj` file.
83+
* Run the following commands to install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
8484

8585
{% tabs %}
8686

@@ -94,15 +94,15 @@ dotnet restore
9494

9595
{% endtabs %}
9696

97-
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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
97+
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 available NuGet packages list with component details.
9898

9999
{% endtabcontent %}
100100

101101
{% tabcontent .NET CLI %}
102102

103103
## Prerequisites
104104

105-
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
105+
Install the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in your terminal or command prompt:
106106

107107
{% tabs %}
108108
{% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ dotnet --version
114114

115115
## Create a Blazor Web App using .NET CLI
116116

117-
Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
117+
Run the following command to create a new Blazor Web App. For detailed instructions, refer to [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
118118

119-
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
119+
Configure the appropriate interactive render mode and interactivity location when setting up the project. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation.
120120

121-
For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
121+
For example, to create a Blazor Web App with the `Auto` interactive render mode, run:
122122

123123
{% tabs %}
124124
{% highlight c# tabtitle=".NET CLI" %}
@@ -130,13 +130,13 @@ cd BlazorApp.Client
130130
{% endhighlight %}
131131
{% endtabs %}
132132

133-
This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
133+
This command creates a new Blazor Web App in a directory named `BlazorApp` at the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) for more details.
134134

135-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor and Themes NuGet in the App
135+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the App
136136

137-
Here's an example of how to add **Blazor RichTextEditor** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
137+
Use the following commands to add the **Blazor Rich Text Editor** component to the application by installing [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. For details, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
138138

139-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
139+
If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
140140

141141
{% tabs %}
142142
{% highlight c# tabtitle=".NET CLI" %}
@@ -148,15 +148,15 @@ dotnet restore
148148
{% endhighlight %}
149149
{% endtabs %}
150150

151-
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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
151+
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 complete list of packages and component details.
152152

153153
{% endtabcontent %}
154154

155155
{% endtabcontents %}
156156

157157
## Add Import Namespaces
158158

159-
Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespace .
159+
Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespaces.
160160

161161
{% tabs %}
162162
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -169,9 +169,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
169169

170170
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
171171

172-
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
172+
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
173173

174-
If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
174+
If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
175175

176176
{% tabs %}
177177
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -334,9 +334,9 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items]
334334

335335
## Insert images and links
336336

337-
The **Image** inserts an image into Rich Text Editor's content area, and the **Link** links an external resources such as website URLs to the selected text in the Rich Text Editor's content respectively.
337+
The **Image** inserts an image into Rich Text Editor content, and the **Link** links an external resources such as website URLs to the selected text in the Rich Text Editor's content respectively.
338338

339-
Specifies the items to be rendered in quick toolbar based on the target elements such as image, link and table element. The quick toolbar opens to customize the element by clicking the target element.
339+
The quick toolbar items can be configured for specific target elements such as images, links, and tables. The quick toolbar opens when clicking the target element, allowing customization of that element.
340340

341341
{% tabs %}
342342
{% highlight razor %}
@@ -447,7 +447,7 @@ To retrieve the editor contents in HTML format, use the [Value](https://help.s
447447

448448
## Retrieve the number of characters
449449

450-
To retrieve the maximum number of characters in the Rich Text Editor's content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
450+
To retrieve the number of characters in the Rich Text Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method.
451451

452452
{% tabs %}
453453
{% highlight razor %}

0 commit comments

Comments
 (0)