---
title: "TinyMCE Blazor integration technical reference"
description: "Technical reference for the TinyMCE Blazor integration"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/blazor-ref/index.md"
version: "7"
last_updated: "2025-05-14T11:32:17Z"
tokens: 1372
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/blazor-ref/).
# TinyMCE Blazor integration technical reference

Covered in this section:

- [Configuring the TinyMCE Blazor integration](#configuring-the-tinymce-blazor-integration)
- [Component binding](#component-binding)

## Configuring the TinyMCE Blazor integration

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

```cs
<Editor
  Id="uuid"
  Inline=false
  CloudChannel="7"
  Value=""
  Disable=false
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ApiKey="no-api-key"
  LicenseKey="your-license-key"
  ScriptSrc="/path/to/tinymce.min.js"
  ClassName="tinymce-wrapper"
/>
```
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.

**Type:** `String`

**Default value:** `'no-api-key'`

#### Example using ApiKey

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

### `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/).

**Type:** `String`

**Default value:** `'7'`

**Possible values:** `'7'`, `'7-testing'`, `'7-dev'`, `'7.9'`

#### Example using CloudChannel

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

### `Id`

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

**Type:** `String`

**Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122)

#### Example using Id

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

### `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.

**Type:** `String`

**Default value:** `'tinymce-wrapper'`

#### Examples using ClassName

Setting a static class name:

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

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

### `Inline`

Set the editor to inline mode.

**Type:** `Boolean`

**Default value:** `false`

#### Example using Inline

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

### `Disable`

Sets the editor to a disable state.

**Type:** `Boolean`

**Default value:** `false`

#### Example using Disable

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

### `Readonly`

Sets the editor to readonly mode.

**Type:** `Boolean`

**Default value:** `false`

#### Example using Readonly

```cs
<Editor
  Readonly=@readonly
/>
<button @onclick="@(() => readonly = !readonly)">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.

**Type:** `String`

**Default value:** `null`

#### Example using JsConfSrc

In your `_Host.cshtml`:

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

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

### `LicenseKey`

Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is not required for deployments using the Tiny Cloud. For more information on licensing, see: [License key](../license-key/).

**Type:** `String`

#### Example using LicenseKey

```cs
<Editor
  LicenseKey="your-license-key"
/>
```

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

### `Conf`

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

**Type:** `Dictionary<string, object>`

**Default value:** `null`

#### Example using Conf

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

@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 = "";
}
```