---
title: "Blazor integration"
description: "Blazor TinyMCE component."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/blazor-pm/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 2216
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/blazor-pm/).
# Blazor integration

## TinyMCE Blazor integration quick start guides

The [Official TinyMCE Blazor component](https://github.com/tinymce/tinymce-blazor) integrates TinyMCE into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor).
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](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/).

Select from the following guides:

- [Using Visual Studio](#usingvisualstudio)
- [Using a command prompt or terminal](#usingacommandpromptorterminal)

### Using Visual Studio

#### Prerequisites

This procedure requires:

- [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/)
- [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)

#### Procedure

1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project).
2. Select the **Blazor Server App** template.
3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as:

```sh
Install-Package TinyMCE.Blazor
```
4. Verify the installation by checking the `ItemGroup` references in `BlazorApp.csproj`, such as:

*File:* `BlazorApp.csproj`

```xml
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z"></PackageReference>
</ItemGroup>
```
5. Add the `tinymce-blazor.js` script to `Pages/_Host.cshtml`, for example:

```html
<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
6. Add the `Editor` component to a page by either:

  - Using the `using` directive

```cs
@using TinyMCE.Blazor
  <Editor></Editor>
```
  - Using the full component and package name

```cs
<TinyMCE.Blazor.Editor></TinyMCE.Blazor.Editor>
```
For example:

*File:* `Pages/Index.razor`

```cs
@page "/"
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
Welcome to your new app.
<Editor></Editor>
```
7. To test the application, run the application by pressing **Ctrl+F5**.

### Using a command prompt or terminal

#### Prerequisites

This procedure requires:

- [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)

#### Procedure

1. Create a new Blazor project:

```sh
dotnet new blazorserver -o BlazorApp --no-https
```
2. Change into the new application directory:

```sh
cd BlazorApp
```
3. Install the TinyMCE Blazor integration:

```sh
dotnet add package TinyMCE.Blazor
```
4. Verify the installation by checking the `ItemGroup` references in `BlazorApp.csproj`, such as:

*File:* `BlazorApp.csproj`

```xml
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z"></PackageReference>
</ItemGroup>
```
5. Add the `tinymce-blazor.js` script to `Pages/_Host.cshtml`, for example:

```html
<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
6. Add the `Editor` component to a page by either:

  - Using the `using` directive

```cs
@using TinyMCE.Blazor
  <Editor></Editor>
```
  - Using the full component and package name

```cs
<TinyMCE.Blazor.Editor></TinyMCE.Blazor.Editor>
```
For example:

*File:* `Pages/Index.razor`

```cs
@page "/"
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
Welcome to your new app.
<Editor></Editor>
```
7. Test the application using the .NET development server.

  - To start the development server, in the project’s root directory, run:

```sh
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:

- [TinyMCE basic setup](../basic-setup/).
- [The TinyMCE Blazor integration technical reference](#tinymceblazorintegrationtechnicalreference).

## TinyMCE Blazor integration technical reference

Covered in this section:

- [Configuring the TinyMCE Blazor integration](#configuringthetinymceblazorintegration)
- [Component binding](#componentbinding)

### Configuring the TinyMCE Blazor integration

The `TinyMCE.Blazor` `Editor` component accepts the following properties:

```cs
<Editor
  Id="uuid"
  Inline="false"
  CloudChannel="5"
  Value=""
  Disable="false"
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ApiKey="your-api-key"
  ClassName="tinymce-wrapper">
</Editor>
```
None of the configuration properties are required for the TinyMCE Blazor integration to work.

#### ApiKey

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

Default value `"no-api-key"`

Type String

##### Example using ApiKey

```cs
<Editor
  ApiKey="your-api-key"
></Editor>
```

#### CloudChannel

Specifies the Tiny Cloud channel to use. For information on TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud](../editor-plugin-version/).

Default value `"5"`

Type String

##### Example using CloudChannel

```cs
<Editor
  CloudChannel="5-dev"
></Editor>
```

#### Id

Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method.

Default value Automatically generated UUID

Type String

##### Example using Id

```cs
<Editor
  Id="my-unique-identifier"
></Editor>
```

#### ClassName

Specifies the class of the Editor’s container `div` in the component. This `div` is the parent of the Editor and adding styles to it will not add styles to the editor.

Default value `"tinymce-wrapper"`

Type String

##### Examples using ClassName

Setting a static class name:

```cs
<Editor
  ClassName="my-editor-container"
></Editor>
```
Setting a dynamic class name:

```cs
<Editor
  ClassName="@((isEditorActive) ? "active-editor-div" : "default-editor-div")"
/>
```

#### Inline

Set the editor to inline mode.

Default value `false`

Type Boolean

##### Example using Inline

```cs
<Editor
  Inline="true"
></Editor>
```

#### Disable

Set the editor to readonly mode.

Default value `false`

Type Boolean

##### Example using Disable

```cs
<Editor
  Disable=@disable
/>
<button
  @onclick="@(() => disable = !disable)"
>Toggle</button>
```

#### JsConfSrc

Use a JS object as base configuration for the editor by specifying the path to the object relative to the window object.

Default `null`

Type String

##### Example using JsConfSrc

In your `_Host.cshtml`:

```cs
window.sample = {
  height: 300,
  toolbar: 'undo redo | bold italic'
}
```
In your component:

```cs
<Editor
  JsConfSrc="sample"
></Editor>
```

#### ScriptSrc

Use the `ScriptSrc` property to specify the location of TinyMCE to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of TinyMCE, such as the [TinyMCE NuGet package](https://www.nuget.org/packages/TinyMCE/) or a .zip package of TinyMCE.

Type String

##### Example using ScriptSrc

```cs
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
></Editor>
```

#### Conf

Specify a set of properties for the `Tinymce.init` method to initialize the editor.

Default value `null`

Type Dictionary<string, object>

##### Example using Conf

```cs
<Editor
  Conf="@editorConf"
></Editor>

@code {
  private Dictionary<string, object> editorConf = new Dictionary<string, object>{
    {"toolbar", "undo redo | bold italic"},
    {"width", 400}
  };
}
```

### Component binding

#### Input binding

The editor component allows developers to bind the contents of editor to a variable. By specifying the `@bind-Value` directive, developers can create a two-way binding on a selected variable.

##### Example using input binding

```cs
<Editor
  @bind-Value=content
/>

<textarea
  @bind=content
  @bind:event="oninput"
></textarea>

@code {
  private string content = "<p>Hello world</p>";
}
```

#### Binding Text output

Starting from TinyMCE.Blazor v0.0.4, the editor exposes the `@bind-Text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor.

##### Example using output text binding

```cs
<Editor
  @bind-Text=content
/>

<textarea
  @bind=content
  @bind:event="oninput"
></textarea>

@code {
  private string content = "";
}
```