You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/getting-started-webapp.md
+30-30Lines changed: 30 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ documentation: ug
9
9
10
10
# Getting Started with Blazor Rich Text Editor in Blazor Web App
11
11
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.
13
13
14
14
{% tabcontents %}
15
15
@@ -21,19 +21,19 @@ This section briefly explains about how to include [Blazor Rich Text Editor](htt
21
21
22
22
## Create a new Blazor Web App in Visual Studio
23
23
24
-
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<supstyle="font-size:70%">®</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.
24
+
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<supstyle="font-size:70%">®</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.
25
25
26
-
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.
26
+
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.
27
27
28
28

29
29
30
30
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
31
31
32
-
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/).
32
+
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/).
33
33
34
-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
34
+
If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<supstyle="font-size:70%">®</sup> Blazor NuGet packages in the Client project.
35
35
36
-
Alternatively, you can utilize the following package manager command to achieve the same.
36
+
Alternatively, use the following Package Manager commands:
N> Syncfusion<supstyle="font-size:70%">®</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.
47
+
N> Syncfusion<supstyle="font-size:70%">®</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.
## Create a new Blazor Web App in Visual Studio Code
58
58
59
-
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<supstyle="font-size:70%">®</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.
59
+
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<supstyle="font-size:70%">®</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.
60
60
61
-
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).
61
+
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.
62
62
63
-
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
63
+
For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
64
64
65
65
{% tabs %}
66
66
{% highlight c# tabtitle="Blazor Web App" %}
@@ -72,13 +72,13 @@ cd BlazorWebApp.Client
72
72
{% endhighlight %}
73
73
{% endtabs %}
74
74
75
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor RichTextEditor and Themes NuGet in the App
75
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
76
76
77
-
If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
77
+
If the app uses `WebAssembly` or `Auto` render modes, install the Syncfusion<supstyle="font-size:70%">®</sup> Blazor NuGet packages in the Client project.
78
78
79
79
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
80
-
* Ensure you’re in the project root directory where your `.csproj` file is located.
81
-
* 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.
80
+
* Ensure the current directory contains your `.csproj` file.
81
+
* 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.
82
82
83
83
{% tabs %}
84
84
@@ -92,15 +92,15 @@ dotnet restore
92
92
93
93
{% endtabs %}
94
94
95
-
N> Syncfusion<supstyle="font-size:70%">®</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.
95
+
N> Syncfusion<supstyle="font-size:70%">®</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.
96
96
97
97
{% endtabcontent %}
98
98
99
99
{% tabcontent .NET CLI %}
100
100
101
101
## Prerequisites
102
102
103
-
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).
103
+
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:
104
104
105
105
{% tabs %}
106
106
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
112
112
113
113
## Create a Blazor Web App using .NET CLI
114
114
115
-
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.
115
+
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.
116
116
117
-
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).
117
+
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.
118
118
119
-
For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
119
+
For example, to create a Blazor Web App with the `Auto` interactive render mode, run:
120
120
121
121
{% tabs %}
122
122
{% highlight c# tabtitle=".NET CLI" %}
@@ -128,13 +128,13 @@ cd BlazorApp.Client
128
128
{% endhighlight %}
129
129
{% endtabs %}
130
130
131
-
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.
131
+
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.
132
132
133
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor RichTextEditor and Themes NuGet in the App
133
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
134
134
135
-
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.
135
+
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).
136
136
137
-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
137
+
If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<supstyle="font-size:70%">®</sup> Blazor NuGet packages in the Client project.
138
138
139
139
{% tabs %}
140
140
{% highlight c# tabtitle=".NET CLI" %}
@@ -146,15 +146,15 @@ dotnet restore
146
146
{% endhighlight %}
147
147
{% endtabs %}
148
148
149
-
N> Syncfusion<supstyle="font-size:70%">®</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.
149
+
N> Syncfusion<supstyle="font-size:70%">®</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.
150
150
151
151
{% endtabcontent %}
152
152
153
153
{% endtabcontents %}
154
154
155
155
## Add Import Namespaces
156
156
157
-
Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor`namespace .
157
+
Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor`namespaces.
158
158
159
159
{% tabs %}
160
160
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
167
167
168
168
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
169
169
170
-
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
170
+
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
171
171
172
-
If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
172
+
If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
@@ -332,9 +332,9 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items]
332
332
333
333
## Insert images and links
334
334
335
-
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.
335
+
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.
336
336
337
-
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.
337
+
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.
338
338
339
339
{% tabs %}
340
340
{% highlight razor %}
@@ -445,7 +445,7 @@ To retrieve the editor contents in HTML format, use the [Value](https://help.s
445
445
446
446
## Retrieve the number of characters
447
447
448
-
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.
448
+
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.
0 commit comments