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
> **Ready to streamline your Syncfusion<supstyle="font-size:70%">®</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<supstyle="font-size:70%">®</sup> Blazor components with Syncfusion<supstyle="font-size:70%">®</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<supstyle="font-size:70%">®</sup> CodeStudio and more. [Explore Syncfusion<supstyle="font-size:70%">®</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview)
15
15
@@ -23,19 +23,19 @@ This section briefly explains about how to include [Blazor Rich Text Editor](htt
23
23
24
24
## Create a new Blazor Web App in Visual Studio
25
25
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<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.
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<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.
27
27
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.
29
29
30
30

31
31
32
32
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
33
33
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/).
35
35
36
-
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.
36
+
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.
37
37
38
-
Alternatively, you can utilize the following package manager command to achieve the same.
38
+
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.
49
+
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
60
60
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<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.
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<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.
62
62
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.
64
64
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.
66
66
67
67
{% tabs %}
68
68
{% highlight c# tabtitle="Blazor Web App" %}
@@ -74,13 +74,13 @@ cd BlazorWebApp.Client
74
74
{% endhighlight %}
75
75
{% endtabs %}
76
76
77
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor RichTextEditor and Themes NuGet in the App
77
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
78
78
79
-
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.
79
+
If the app uses `WebAssembly` or `Auto` render modes, install the Syncfusion<supstyle="font-size:70%">®</sup> Blazor NuGet packages in the Client project.
80
80
81
81
* 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.
84
84
85
85
{% tabs %}
86
86
@@ -94,15 +94,15 @@ dotnet restore
94
94
95
95
{% endtabs %}
96
96
97
-
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.
97
+
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.
98
98
99
99
{% endtabcontent %}
100
100
101
101
{% tabcontent .NET CLI %}
102
102
103
103
## Prerequisites
104
104
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:
106
106
107
107
{% tabs %}
108
108
{% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ dotnet --version
114
114
115
115
## Create a Blazor Web App using .NET CLI
116
116
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.
118
118
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.
120
120
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:
122
122
123
123
{% tabs %}
124
124
{% highlight c# tabtitle=".NET CLI" %}
@@ -130,13 +130,13 @@ cd BlazorApp.Client
130
130
{% endhighlight %}
131
131
{% endtabs %}
132
132
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.
134
134
135
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor RichTextEditor and Themes NuGet in the App
135
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rich Text Editor and Themes NuGet in the App
136
136
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).
138
138
139
-
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.
139
+
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.
140
140
141
141
{% tabs %}
142
142
{% highlight c# tabtitle=".NET CLI" %}
@@ -148,15 +148,15 @@ dotnet restore
148
148
{% endhighlight %}
149
149
{% endtabs %}
150
150
151
-
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.
151
+
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.
152
152
153
153
{% endtabcontent %}
154
154
155
155
{% endtabcontents %}
156
156
157
157
## Add Import Namespaces
158
158
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.
160
160
161
161
{% tabs %}
162
162
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -169,9 +169,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
169
169
170
170
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
171
171
172
-
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
172
+
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
173
173
174
-
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.
174
+
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.
@@ -334,9 +334,9 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items]
334
334
335
335
## Insert images and links
336
336
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.
338
338
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.
340
340
341
341
{% tabs %}
342
342
{% highlight razor %}
@@ -447,7 +447,7 @@ To retrieve the editor contents in HTML format, use the [Value](https://help.s
447
447
448
448
## Retrieve the number of characters
449
449
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.
0 commit comments