Using the TinyMCE .zip 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

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 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>
  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 load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the ScriptSrc property:

    <Editor
      ScriptSrc="/path/to/tinymce.min.js"
    />
  8. 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 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>
  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 load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the ScriptSrc property:

    <Editor
      ScriptSrc="/path/to/tinymce.min.js"
    />
  8. 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: