Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Blazor integration

Blazor TinyMCE component.

Contribute to this page

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

Prerequisites

This procedure requires:

Procedure

  1. On the Visual Studio toolbar, click the New Project button.
  2. Select the Blazor Server App template.
  3. Use the NuGet package manager console to install the TinyMCE.Blazor package, such as:

     Install-Package TinyMCE.Blazor
    
  4. 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>
    
  5. 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>
    
  6. 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 />
    
  7. To test the application, run the application by pressing Ctrl+F5.

Using a command prompt or terminal

Prerequisites

This procedure requires:

Procedure

  1. Create a new Blazor project:

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

     cd BlazorApp
    
  3. Install the TinyMCE Blazor integration:

     dotnet add package TinyMCE.Blazor
    
  4. 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>
    
  5. 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>
    
  6. 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 />
    
  7. 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 Blazor integration technical reference

Covered in this section:

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

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

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

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

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

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

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

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

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

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

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.