diff --git a/blazor/smart-rich-text-editor/getting-started-webapp.md b/blazor/smart-rich-text-editor/getting-started-webapp.md index 188867f841..d942bfd103 100644 --- a/blazor/smart-rich-text-editor/getting-started-webapp.md +++ b/blazor/smart-rich-text-editor/getting-started-webapp.md @@ -1,80 +1,50 @@ --- layout: post -title: Getting Started with Syncfusion Smart Rich Text Editor in Web App +title: Getting Started Smart Rich Text Editor Blazor Web App | Syncfusion description: Learn how to create and run Syncfusion Blazor Smart Rich Text Editor component in Blazor Web App with server interactivity. platform: Blazor control: Smart Rich Text Editor documentation: ug --- -# Getting Started with Smart Rich Text Editor in Blazor Web App +# Getting Started with Blazor Smart Rich Text Editor in Blazor Web App -This section explains how to add the [Syncfusion® Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component in your Blazor Web 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/). +This section explains how to add the [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component in your Blazor Web 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/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio - -Create a **Blazor Web 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® 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. +Create a **Blazor Web 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 [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. {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio Code - -Create a **Blazor Web 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® 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. - -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet new blazor -o BlazorWebApp --interactivity Auto {% endhighlight %} {% endtabs %} +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} - -dotnet --version - -{% endhighlight %} -{% endtabs %} - -## Create a Blazor Web App using .NET CLI - -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 the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. - -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet new blazor -o BlazorWebApp --interactivity Auto {% endhighlight %} {% endtabs %} @@ -85,59 +55,54 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +## Install the required Blazor packages -## Install Syncfusion® Blazor Smart Rich Text Editor and Themes NuGet +Install the [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -Install the following NuGet packages in your project: +{% tabcontents %} -* [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) +{% tabcontent Visual Studio %} -You can install these packages using different methods as shown below: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartRichTextEditor` and `Syncfusion.Blazor.Themes`) and install them. -{% tabcontents %} +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% tabcontent Visual Studio %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -1. In Visual Studio Navigate to: +Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +{% endhighlight %} +{% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio (Package Manager Console) %} - -1. In Visual Studio Navigate to: +{% tabcontent Visual Studio Code %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SmartRichTextEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.SmartRichTextEditor --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SmartRichTextEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -146,14 +111,12 @@ dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} {% endtabcontents %} -N> Syncfusion® 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. +## Add import namespaces -## Register Syncfusion® Blazor Service - -Open **~/_Imports.razor** file in the Components folder and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartRichTextEditor` namespace. +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartRichTextEditor` namespaces. {% tabs %} -{% highlight razor tabtitle="~/Components/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartRichTextEditor @@ -161,29 +124,22 @@ Open **~/_Imports.razor** file in the Components folder and import the `Syncfusi {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="3 10" %} +{% highlight c# tabtitle="Program.cs" %} -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; +.... using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorPages(); -builder.Services.AddServerSideBlazor(); +.... builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); .... {% endhighlight %} {% endtabs %} - ## Configure AI Service Follow the instructions below to register an AI model in your application. @@ -201,42 +157,43 @@ You can install these packages using different methods as shown below: {% tabcontent Visual Studio %} -1. In Visual Studio Navigate to: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -{% tabcontent Visual Studio (Package Manager Console) %} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI -1. In Visual Studio Navigate to: +{% endhighlight %} +{% endtabs %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Microsoft.Extensions.AI dotnet add package Microsoft.Extensions.AI.OpenAI @@ -297,43 +254,45 @@ You can install these packages using different methods as shown below: {% tabcontent Visual Studio %} -1. In Visual Studio Navigate to: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -{% tabcontent Visual Studio (Package Manager Console) %} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +Install-Package Azure.AI.OpenAI -1. In Visual Studio Navigate to: +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI -Install-Package Azure.AI.OpenAI +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Microsoft.Extensions.AI dotnet add package Microsoft.Extensions.AI.OpenAI @@ -390,34 +349,32 @@ N> To configure other AI services, refer to the following sections [Ollama AI Se ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page: - -* For **Blazor Web App**, include it in the **~/Components/App.razor** file. - -```html - - .... - - - - - .... - - -``` +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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... + + +{% endhighlight %} +{% endtabs %} 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. -## Add Syncfusion® Blazor Smart Rich Text Editor component +## Add Blazor Smart Rich Text Editor component -Add the Syncfusion® **Blazor Smart Rich Text Editor** component in the **~/Components/Pages/Home.razor** or any other page file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component inside the razor file. -N> Notice the `@rendermode InteractiveServer` directive on the page. This is required for Blazor Web App to enable server-side interactivity. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="~/Components/Pages/Home.razor" %} +{% highlight razor tabtitle="Home.razor" %} + +@rendermode InteractiveAuto -@rendermode InteractiveServer @using Syncfusion.Blazor.SmartRichTextEditor @@ -435,7 +392,47 @@ N> Notice the `@rendermode InteractiveServer` directive on the page. This is req {% endhighlight %} {% endtabs %} -* To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Smart Rich Text Editor component in the default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Rich Text Editor component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} * Start typing content and use the AI tools in the toolbar to enhance your editing experience. diff --git a/blazor/smart-rich-text-editor/getting-started.md b/blazor/smart-rich-text-editor/getting-started.md index ba9dd5eb39..af1a1be3b8 100644 --- a/blazor/smart-rich-text-editor/getting-started.md +++ b/blazor/smart-rich-text-editor/getting-started.md @@ -1,78 +1,50 @@ --- layout: post -title: Getting Started with Blazor Smart Rich Text Editor | Syncfusion +title: Getting Started Smart Rich Text Editor Blazor Server App | Syncfusion description: Checkout and learn here all about Getting started with Syncfusion Blazor Smart Rich Text Editor component in Blazor Server App and more. platform: Blazor control: Smart Rich Text Editor documentation: ug --- -# Getting Started with Smart Rich Text Editor Component +# Getting Started with Blazor Smart Rich Text Editor in Server App -This section explains how to add the [Syncfusion® Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component to a Blazor Server 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/). +This section explains how to add the [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component to a Blazor Server 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/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio - -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server 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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio Code - -Create a **Blazor Server 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. - -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +dotnet new blazor -o BlazorServerApp --interactivity Server {% endhighlight %} - {% endtabs %} +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} - -dotnet --version - -{% endhighlight %} -{% endtabs %} - -## Create a Blazor Server App using .NET CLI - -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +dotnet new blazor -o BlazorApp --interactivity Server {% endhighlight %} {% endtabs %} @@ -83,58 +55,54 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor Smart Rich Text Editor and Themes NuGet in the App - -Install the following NuGet packages in your project: +## Install the required Blazor packages -* [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) - -You can install these packages using different methods as shown below: +Install the [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. {% tabcontents %} {% tabcontent Visual Studio %} -1. In Visual Studio Navigate to: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartRichTextEditor` and `Syncfusion.Blazor.Themes`) and install them. - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -{% tabcontent Visual Studio (Package Manager Console) %} +Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} -1. In Visual Studio Navigate to: +{% endhighlight %} +{% endtabs %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SmartRichTextEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.SmartRichTextEditor --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SmartRichTextEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -143,14 +111,12 @@ dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} {% endtabcontents %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +## Add import namespaces -## Register Syncfusion® Blazor Service - -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartRichTextEditor` namespace. +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartRichTextEditor` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartRichTextEditor @@ -158,23 +124,17 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="4 11" %} +{% highlight c# tabtitle="Program.cs" %} -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; +.... using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorPages(); -builder.Services.AddServerSideBlazor(); +.... builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); .... {% endhighlight %} @@ -197,42 +157,43 @@ You can install these packages using different methods as shown below: {% tabcontent Visual Studio %} -1. In Visual Studio Navigate to: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} -{% tabcontent Visual Studio (Package Manager Console) %} +{% endtabcontent %} -1. In Visual Studio Navigate to: +{% tabcontent Visual Studio Code %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Microsoft.Extensions.AI dotnet add package Microsoft.Extensions.AI.OpenAI @@ -290,43 +251,45 @@ You can install these packages using different methods as shown below: {% tabcontent Visual Studio %} -1. In Visual Studio Navigate to: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. - **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for the required packages. -3. Select the package and click **Install**. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -{% tabcontent Visual Studio (Package Manager Console) %} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +Install-Package Azure.AI.OpenAI -1. In Visual Studio Navigate to: +{% endhighlight %} +{% endtabs %} - **Tools → NuGet Package Manager → Package Manager Console** -2. Run the following commands: +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Microsoft.Extensions.AI -Install-Package Microsoft.Extensions.AI.OpenAI -Install-Package Azure.AI.OpenAI +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code / .NET CLI %} +{% tabcontent .NET CLI %} -1. Open your project. -2. Open the terminal: - - In Visual Studio Code: use the integrated terminal (Ctrl + `) - - Or use any system terminal for CLI -3. Run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Install Packages" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Microsoft.Extensions.AI dotnet add package Microsoft.Extensions.AI.OpenAI @@ -380,28 +343,32 @@ N> To configure other AI services, refer to the following sections [Ollama AI Se ## Add stylesheet and script resources -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 in the **~/Components/App.razor** file. - -```html - - -.... +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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... - -``` + +{% endhighlight %} +{% endtabs %} 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. -## Add Syncfusion® Blazor Smart Rich Text Editor component +## Add Blazor Smart Rich Text Editor component -Add the Syncfusion® **Blazor Smart Rich Text Editor** component in the **~/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component inside the razor file. -N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="~/Home.razor" %} +{% highlight razor tabtitle="Home.razor" %} @rendermode InteractiveServer + @using Syncfusion.Blazor.SmartRichTextEditor @@ -419,7 +386,45 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Smart Rich Text Editor component in the default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Rich Text Editor component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} * Start typing content and use the AI tools in the toolbar to enhance your editing experience.