Blazor integration

TinyMCE Blazor integration quick start guides

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
```
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"></PackageReference>
</ItemGroup>
```

Add the tinymce-blazor.js script to Pages/_Host.cshtml, for example:

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

Add the Editor component to a page by either:

Using the using directive

  @using TinyMCE.Blazor
  <Editor></Editor>

Using the full component and package name

<TinyMCE.Blazor.Editor></TinyMCE.Blazor.Editor>

For example:

File: Pages/Index.razor

@page "/"
@using TinyMCE.Blazor

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

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
```
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"></PackageReference>
</ItemGroup>
```

Add the tinymce-blazor.js script to Pages/_Host.cshtml, for example:

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

Add the Editor component to a page by either:

Using the using directive

  @using TinyMCE.Blazor
  <Editor></Editor>

Using the full component and package name

<TinyMCE.Blazor.Editor></TinyMCE.Blazor.Editor>

For example:

File: Pages/Index.razor

@page "/"
@using TinyMCE.Blazor

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

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:

TinyMCE basic setup.
The TinyMCE Blazor integration technical reference.

TinyMCE Blazor integration technical reference

Covered in this section:

Configuring the TinyMCE Blazor integration
Component binding

Configuring the TinyMCE Blazor integration

The TinyMCE.Blazor Editor component accepts the following properties:

<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

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

Default value: "5"
Type: String

Example using CloudChannel

<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

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

<Editor
  ClassName="my-editor-container"
></Editor>

Setting a dynamic class name:

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

Inline

Set the editor to inline mode.

Default value: false
Type: Boolean

Example using Inline

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

Disable

Set the editor to readonly mode.

Default value: false
Type: Boolean

Example using Disable

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

window.sample = {
  height: 300,
  toolbar: 'undo redo | bold italic'
}

In your component:

<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 or a .zip package of TinyMCE.

Type: String

Example using ScriptSrc

<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

<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

<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

<Editor
  @bind-Text=content
/>

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

@code {
  private string content = "";
}