blazor-postinstall.adoc

1. Verify the installation by checking the ItemGroup references in the project file. For example, if the project is named BlazorApp, the relevant file would be BlazorApp.csproj with the dependency referenced as follows:

   <ItemGroup>
     <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
   </ItemGroup>

2. Add the tinymce-blazor.js script to the main page. If using the Blazor Web App, add the script in Components/App.razor, for example:

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

   Note

   The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide. If 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> If 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>

3. Add the Editor component to a page by either:

   • Using the using directive:

     @using TinyMCE.Blazor
     <Editor />

     For example:

     File: Pages/Index.razor

     @page "/"
     @rendermode InteractiveServer
     @using TinyMCE.Blazor
     
     <h1>Hello, world!</h1>
     Welcome to your new app.
     <Editor />

   • Using the component with its namespace:

     <TinyMCE.Blazor.Editor />

     For example:

     File: Pages/Index.razor

     @page "/"
     @rendermode InteractiveServer
     @using TinyMCE.Blazor
     
     <h1>Hello, world!</h1>
     Welcome to your new app.
     <Editor />

     Important

     In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that @rendermode InteractiveServer is specified in a page component.

4. Update the LicenseKey option in the editor element and include your License Key.

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

5. To load {productname} from the self-hosted package instead of the {cloudname}, configure the ScriptSrc property:

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