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
Using a command prompt or terminal

Using Visual Studio

Prerequisites

This procedure requires:

Procedure

On the Visual Studio toolbar, click the New Project button.
Select the Blazor Server App template.
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
```
Verify the installation by checking the ItemGroup references in BlazorApp.csproj, such as:

File: BlazorApp.csproj
```
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```

Add the tinymce-blazor.js script to the main page.

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>

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 />
```

Using the full component and package name

<TinyMCE.Blazor.Editor />

For example:

File: Pages/Index.razor

@page "/"
@using TinyMCE.Blazor

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

To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the ScriptSrc property:
```
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
```
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 blazorserver -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
```
Verify the installation by checking the ItemGroup references in BlazorApp.csproj, such as:

File: BlazorApp.csproj
```
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```

Add the tinymce-blazor.js script to the main page.

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>

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 />
```

Using the full component and package name

<TinyMCE.Blazor.Editor />

For example:

File: Pages/Index.razor

@page "/"
@using TinyMCE.Blazor

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

To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the ScriptSrc property:
```
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
```
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:5000.
- To stop the development server, select on the command line or command prompt and press Ctrl+C.

Next Steps

For information on customizing the integration, see: