Using the TinyMCE package with the Blazor framework

The Official TinyMCE Blazor component integrates TinyMCE into Blazor applications. This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: Microsoft .NET Blazor Tutorial - Build your first Blazor app.

Select from the following guides:

Using Visual Studio Code (VS Code)
Using Visual Studio
Using a command prompt or terminal

Using Visual Studio Code (VS Code)

Prerequisites

This procedure requires:

Alternatively, the .NET WinGet Configuration file can be downloaded to install the necessary dependencies.

Procedure

In VS Code, open the Command Palette by pressing Ctrl+Shift+P. Find .NET: New Project and select it to create a new project.
Select Blazor Web App from the list of templates and follow the steps to set up the project.
Using the Command Palette, find and select .NuGet: Add NuGet Package. Enter TinyMCE.Blazor and select the package along with the version to install.
To use the self-hosted version of TinyMCE, install the TinyMCE package from the Command Pallette.

Using Visual Studio

Prerequisites

This procedure requires:

Procedure

On the Visual Studio toolbar, click the New Project button.
Select the Blazor Web App template and follow the steps to set up the project.
Use the NuGet package manager console to install the TinyMCE.Blazor package, such as:
```
Install-Package TinyMCE.Blazor
```
Use the NuGet package manager console to install the TinyMCE package, such as:
```
Install-Package TinyMCE
```
To test the application, run the application by pressing Ctrl+F5.

Using a command prompt or terminal

Prerequisites

This procedure requires:

Microsoft .NET

Procedure

Create a new Blazor project:

dotnet new blazor -o BlazorApp --no-https

Change into the new application directory:
```
cd BlazorApp
```
Install the TinyMCE Blazor integration:
```
dotnet add package TinyMCE.Blazor
```
Install the TinyMCE package, such as:
```
dotnet add package TinyMCE
```
Test the application using the .NET development server.
- To start the development server, in the project’s root directory, run:
  dotnet watch run
  This will start a local development server accessible at http://localhost:{PORT}, where {PORT} is specified in the project’s Properties/launchSettings.json file.
- To stop the development server, select on the command line or command prompt and press Ctrl+C.

Post-installation

Verify the installation by checking the ItemGroup references in the project file. For example, if the project is named BlazorApp, the relevant file would be BlazorApp.csproj with the dependency referenced as follows:
```
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```

Add the tinymce-blazor.js script to the main page. If using the Blazor Web App, add the script in Components/App.razor, for example:

<script src="_framework/blazor.web.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>

The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide.

If using Blazor Server, add the script in Pages/_Host.cshtml, for example:

<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>

If using WASM, add the script in wwwroot/index.html, for example:

<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

Add the Editor component to a page by either:

Using the using directive:

@using TinyMCE.Blazor
<Editor />

For example:

File: Pages/Index.razor

@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
<h2>Welcome to your new app.</h2>
<Editor />

Using the component with its namespace:

<TinyMCE.Blazor.Editor />

For example:

File: Pages/Index.razor

@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
<h2>Welcome to your new app.</h2>
<Editor />

In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that @rendermode InteractiveServer is specified in a page component.

Update the LicenseKey option in the editor element and include your License Key.
```
<Editor LicenseKey="your-license-key" />
```
To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the ScriptSrc property:
```
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
```

Next Steps

For information on customizing the integration, see: