Popular blog tags

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

Published

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

using a local version of TinyMCE

 

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>

Or

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

 

Component binding

create a two-way data binding

 

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

 

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