Integrating Table of Contents plugin with TinyMCE Editor Sidebar at Left Side in ASP.NET Core Blazor Server-iaspnetcore.com

Integrating Table of Contents plugin with TinyMCE Editor Sidebar at Left Side in ASP.NET Core Blazor Server

using a local version of TinyMCE -Blazor WebAssembly project

This repo contains an example project for integrating the TinyMCE-Editor in a Blazor WebAssembly project.

Steps:

Create a blazor wasm project using dotnet cli or Visual Studio
Add PackageReference to TinyMCE.Blazor nuget

dotnet add package TinyMCE.Blazor
Add Reference to the javascript of the TinyMCE.Blazor libary to the index.html file located in the wwwroot directory

I want to use TinyMCE in a Blazor server side app, but it shows up on page load for a second and then disappears. I blame it on StatehasChanged() thus I have written an interop function that re-initializes TinyMCE and is called in the OnAfterRender() of the page.

Step 1:Create A New Blazor Server App Project

Step 2:

Install-Package TinyMCE.Blazor

https://www.tiny.cloud/docs/tinymce/6/blazor-cloud/

Step 3:

Pages/_Host.cshtml

you can use self-hosted in your blazor application. There are two ways of doing that:

You can load your own version of TinyMCE in your _host.cshtml file or your index.html file before loading the blazor server script <script src="_framework/blazor.server.js"></script>

you can use the property ScriptSrc to point to the location of your self-hosted TinyMCE.min.js file.

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

step 4:

Step 6:Add the Editor component to a page

@page "/"
@using TinyMCE.Blazor

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

Part 2:

Configuring the TinyMCE Blazor integration

<Editor
  Conf="@editorConf"
/>

<Editor
  Id="uuid"
  Inline=false
  CloudChannel="5"
  Value=""
  Disable=false
  JsConfSrc="<path_to_jsObj>"
  Conf="@yourConf"
  ApiKey="your-api-key"
  ClassName="tinymce-wrapper"
/>

Step by step:

Create a blazor server project using dotnet cli or Visual Studio
Create a tinymce-blazor.js

_host.cshtml

<script src="_framework/blazor.server.js"></script>
@*
    using a local version of TinyMCE*@
    <script src="/lib/tinymce_5.1.6/js/tinymce/tinymce.min.js"></script>
    <script src="/js/tinymce-blazor.js"></script>

Create Textarea.razor

@page "/Textarea"

@inject IJSRuntime JSRuntime;

<h3>Textarea</h3>

<textarea id="Blazorservertinymce1">Hello, World!</textarea>

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

@*<textarea id="Blazorservertinymce" @bind=content></textarea>*@

<div id="Blazorservertinymce"></div>

<div id="Blazorservertinymcecontent">@content</div>

@code {

    private string content = "<p>Hello world  come from code</p>";


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
       // await Interop.InitializeTextEditor(JSRuntime);


        //come from https://github.com/tinymce/tinymce-blazor/blob/master/TinyMCE.Blazor/Editor.razor
        if (firstRender)
        {
           
       
            await JSRuntime.InvokeVoidAsync("blazeditorInit");
          //  _initialized = true;
        }
    }

}

Component binding

create a two-way data binding

https://www.tiny.cloud/docs/tinymce/6/blazor-ref/#component-binding

https://github.com/Blazored/TextEditor

https://stackoverflow.com/questions/57677035/tinymce-disappears-in-blazor-page/62091603#62091603